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

实验效果：
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>