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

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

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

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

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

输入以下代码实现实验4

 

咸虾米中关于触发事件的运用_第1张图片 .WXML

 

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

咸虾米中关于触发事件的运用_第2张图片 .WXSS

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

咸虾米中关于触发事件的运用_第3张图片 .JS

 

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

                                                                      size = size<100?100:size

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

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

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

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

咸虾米中关于触发事件的运用_第4张图片 .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中的代码
随机数;{{num}}

你可能感兴趣的:(javascript,开发语言,ecmascript)