1、案例要求：

案例要求.jpg

2、制作流程：

2.1、代码展示：

wxml：

<view class="box">
    <view class="title">变化的三色旗</view>
    <view class="three_flag">
        <view class="flag_1" style="background-color:{{color2}}"></view>
        <view class="flag_1" style="background-color:{{color2}}"></view>
        <view class="flag_1" style="background-color:{{color3}}"></view>
    </view>
    <button type="primary" bindtap="change">改变颜色</button>
    <button type="primary" bindtap="stop">停止</button>
</view>

wxss：

.three_flag{
    margin: 15px;
    display: flex;
    flex-direction: row;
    height: 200px;
    
}
.flag_1{
    height: 150px;
    width: 100px;
    margin: 10px;
}
button{
    margin: 10px;
}

自己逻辑写的js代码：

//用自己的逻辑写的js代码
var color1,color2,color3;
var id;

Page({
    data:{
  

    },
    change: function(){
      id = setInterval(this.color,1000);
    },
    stop: function(){
        clearInterval(id);
    },
    onLoad: function (options) {
        this.color();
    },
    color: function(){
        // var color;
        var cunfang = [];
        var col=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
        for(var i = 1;i <= 4;i++){
            var c = '#';
            for(var j = 0;j < 6;j++){
                c = c + col[Math.floor(Math.random()*16)]
            }
            cunfang.push(c); 
        }
        this.setData({
            color1:cunfang[0],
            color2:cunfang[1],
            color3:cunfang[2]
        })
        console.log(color1)
    }

})

范例中给出的js代码：

//范例中给出的js代码
/*index.js*/
var color = []; //定义数组
var letters = '0123456789ABCDEF'; //定义16进制颜色字符集
Page({
  createColor: function() { //自定义函数，创建三种随机颜色

    for (var i = 0; i < 3; i++) { //利用循环创建三种随机颜色
      var c = '#';
      for (var j = 0; j < 6; j++) { //创建一种由6个16进制字符构成的随机颜色
        c += letters[Math.floor(Math.random() * 16)]
      }
      color.push(c); //将创建的颜色加入颜色数组
    }
    console.log(color); //在console面板中显示颜色值
    this.setData({ //将创建的颜色渲染到视图层
      color1: color[0],
      color2: color[1],
      color3: color[2]
    })
  },

  onLoad: function(e) {
    this.createColor(); //利用this调用本类定义的函数
    setInterval(() => { //每隔5秒钟调用一次this.createColor()函数
      this.createColor();
    }, 5000);
  },

  changeColor: function(e) { //点击按钮时的事件函数
    this.createColor();
  }
})

2.2、结果展示：

结果展示.jpg

3、知识点总结：

知识总结.jpg

4、踩坑说明：

• 自己第一次js写没有跑出来的程序

var color1,color2,color3;
var id;
var cunfang = [];
var col=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
Page({
    data:{
  

    },
    change: function(){
      id = setInterval(this.color,1000);
    },
    stop: function(){
        clearInterval(id);
    },
    onLoad: function (options) {
        this.color();
    },
    color: function(){
        // var color;
        
        for(var i = 1;i <= 4;i++){
            var c = '#';
            for(var j = 0;j < 6;j++){
                c = c + col[Math.floor(Math.random()*16)]
            }
            cunfang.push(c); 
        }
        this.setData({
            color1:cunfang[0],
            color2:cunfang[1],
            color3:cunfang[2]
        })
      console.log("1");
    }

})
//再点击“百变颜色”button后虽然change事件被触发，
//其中的setInterval函数也会一直执行，但是页面颜色就是不会改变。
//只有将color函数会用到的数组cunfang放在color函数中定义的时候，才会正常运行。
//错误原因：cunfang数组是全局数组，第一次运行color1~color3都会被赋值为数组
//的前三项，所以错误程序执行后，会改变一次颜色，之后就不会改变颜色了，
//因为每次执行都是在把cunfang数组已经生成的前三个元素赋值给color1~color3。