咸虾米中关于触发事件的运用

news2024/11/15 18:02:40

实验效果:
1.点击方块,方块中的随机数发生改变

2.点击方块,方块的背景颜色发生改变

3.点击方块,方块的大小任意改变

4.对上面的三种情况合并,随机数,大小,颜色都发生改变!

输入以下代码实现实验4

 

.WXML

 

下图标记的3行代码,好像是把内容放到正中间的

.WXSS

 为什么是个双引号,简单理解。因为是字符串,所以用双引号!!!

.JS

 

 下图中的  1处的两处代码,还可以改写成 let size =parseInt(Match.random()*600)

                                                                      size = size<100?100:size

                  2处的代码,原先在黑马程序员的教程中看到过,加深理解!

注释:Match.random()取得的是0到1之间的任意小数,

          parseInt() 方法是将小数取整!

        运用三元操作符的目的是为了避免方框缩的太小,给其一个最小值!

.JS

 以下是部分运行代码!!!

.JS中的触发函数

click(){
    let rdm= parseInt(Math.random()*100)
    let r1=parseInt(Math.random()*255)
    let r2=parseInt(Math.random()*255)
    let r3=parseInt(Math.random()*255)
    let r4=parseInt(Math.random()*600)
    let size = r4<100?200:r4

    let color = `rgb(${r1},${r2},${r3})`
   console.log(color)
    this.setData({
      num:rdm,
      color:color,
      size:size
    })
},
.WXML中的代码
<view class="box" bindtap="click" style="background: {{color}};width: {{size}}rpx;height: {{size}}rpx;">随机数;{{num}}</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/934424.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis持久化之RDB解读

目录 什么是RDB 配置位置参数解读 如何使用 自动触发 手动触发 save bgsave RDBRDB持久化文件的恢复 正常恢复 恢复失败处理方法 RDB优势 RDB 缺点 redis是一个内存数据库,当redis服务器重启,获取电脑重启,数据会丢失,我们可以将redis内存中的数据持久化保存到硬盘…

C++动态库编程 | C++名称改编、标准C接口、extern “C”、函数调用约定以及def文件详解

目录 1、导入导出声明 2、C函数名称改编与extern "C" 3、函数调用约定与跨语言调用 3.1、函数调用约定 3.2、跨语言调用dll库接口 3.3、函数调用约定以哪个为准 4、def文件的使用 5、在C程序中引用ffmpeg库中的头文件链接报错问题 6、最后 VC常用功能开发汇…

Day46|leetcode 139.单词拆分

leetcode 139.单词拆分 题目链接&#xff1a;139. 单词拆分 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;动态规划之完全背包&#xff0c;你的背包如何装满&#xff1f;| LeetCode&#xff1a;139.单词拆分_哔哩哔哩_bilibili 题目概述 给你一个字符串 s 和一…

一文讲通物联网嵌入式

最近有很多同学问我&#xff0c;物联网近几年一直是科技的热点&#xff0c;嵌入式和物联网有什么关系呢&#xff1f;我在这里统一给大家讲解一下。 嵌入式是应用于物联网产品方向的一种嵌入式操作系统。类似于Android系统是谷歌开发的移动操作系统&#xff0c;嵌入式实际上也是…

如何使用 Tailwind CSS 设计高级自定义动画

使用Tailwind CSS掌握动画技术&#xff0c;为用户带来难忘的体验 开篇 动画已经成为网页设计的重要组成部分&#xff0c;使开发人员能够创建引人入胜和互动的用户体验。 Tailwind CSS&#xff0c;一款流行的实用型CSS框架&#xff0c;提供了一套强大的工具&#xff0c;可以轻松…

8款优秀的AI绘画工具,让您的绘画创作发挥无限想象力

今天为大家推荐8款优秀的AI绘画工具&#xff0c;帮助您在绘画创作中发挥无限想象力。这些工具结合了人工智能技术和艺术创作&#xff0c;能够帮助您实现更高水平的绘画作品。无论您是专业画家还是刚刚入门的爱好者&#xff0c;这些AI绘画工具都能为您提供灵感和支持。让我们一起…

【CSS】定位 ( 子元素绝对定位 父元素相对定位 | 代码示例 )

一、子元素绝对定位 父元素相对定位 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布…

Python-pyqt不同窗口数据传输【使用静态函数】

文章目录 前言程序1&#xff1a;caogao1.py输入数据界面程序2&#xff1a;caogao2.py接收数据界面 程序3 &#xff1a;将输入数据界面和接收数据界面组合成一个总界面讲解 总结 前言 在编写pyqt 页面时有时候需要不同页面进行数据传输。本文讲解静态函数方法。直接看示例。 程…

《纽约时报》禁止人工智能厂商未经许可抓取其内容

记录纸在吸收一切的人工智能商业模式上戳了洞 8月初&#xff0c;《纽约时报》更新了服务条款(TOS)&#xff0c;禁止抓取其用于人工智能训练的文章和图片。报告广告周刊。此举正值科技公司继续利用人工智能语言应用赚钱之际&#xff0c;例如ChatGPT聊天机器人和谷歌诗人该公司通…

嵌入式系统入门实战:探索基本概念和应用领域

嵌入式系统是一种专用的计算机系统,它是为了满足特定任务而设计的。这些系统通常具有较低的硬件资源(如处理器速度、内存容量和存储容量),但具有较高的可靠性和实时性。嵌入式系统广泛应用于各种领域,如家用电器、汽车、工业控制、医疗设备等。 嵌入式系统的基本概念 微控…

AI个体户的崛起:普通人“屁胡”的机会、模式和风险

前几篇文章写的是大模型本身以及垂域中的系统型超级应用&#xff08;AI Agent类&#xff09;&#xff0c;这些机会很大&#xff0c;不管你是真的做得来大模型&#xff0c;还是能做得了某个行业的系统型超级应用&#xff0c;成功者最终都会是这个时代的成功者。 是什么样子的时…

华为数通方向HCIP-DataCom H12-821题库(单选题:121-140)

第121题 关于OSPF特性描述错误的是 A、OSPF采用链路状态算法。 B、每个路由器通过泛洪 LSA 向外发布本地链路状态信息 C、每台 OSPF 设备都会收集其它路由器发来的LSA 所有的LSA 放在一起便组成了链路状态数据库LSDB&#xff0c; D、OSPF 区域0中所有路由器的 LSDB 都相同…

Spring中@Value注解取值为null问题排查

文章目录 一、背景二、Value 取值为 null 原因分析2.1. Value 取值为 null 常见原因分析常见现象一&#xff1a;类没有交给 Spring 管理&#xff0c;比如类没有加上 Component 等注解常见现象二&#xff1a;手动 new 对象实例&#xff0c;没有从 Spring 容器中获取常见现象三&a…

基于人工电场算法优化的BP神经网络(预测应用) - 附代码

基于人工电场算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于人工电场算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.人工电场优化BP神经网络2.1 BP神经网络参数设置2.2 人工电场算法应用 4.测试结果&#xff1a;5…

Redis.conf详解

Redis.conf详解 配置文件unit单位对大小写不敏感 包含 网络 bind 127.0.0.1 # 绑定的ip protected-mode yes # 保护模式 port 6379 # 端口设置通用 GENERAL daemonize yes # 以守护进程的方式运行 默认为no pidfile /var/run/redis_6379.pid #如果以后台的方式运行&#xff…

VUE笔记(三)vue的语法

一、计算属性 1、计算属性的概念 计算属性是依赖于源数据(data或者属性中的数据)&#xff0c;在元数据的基础上进行逻辑运算后得到的新的数据&#xff0c;计算属性要依赖于源数据&#xff0c;源数据数据变化计算属性也会变化 2、计算属性的语法 在vue2中使用computed这个选…

【Python】模块、包

模块 Python模块&#xff08;Module&#xff09;&#xff0c;是一个Python文件&#xff0c;以.py结尾。模块能定义函数&#xff0c;类和变量&#xff0c;模块里也能保护可执行的代码。 不同模块&#xff0c;同名的功能&#xff0c;如果都被导入&#xff0c;那么后者会覆盖前者…

【LeetCode: 56. 合并区间+贪心+双指针+标识+模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

计算一组数据的高中位数statistics.median_high()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算一组数据的高中位数 statistics.median_high() [太阳]选择题 下列说法错误的是? import statistics print(【执行】statistics.median_high([1, 5, 4, 3, 6, 2])) print(statistic…