小程序制作（超详解！！！）第十五节 自动随机变化的三色旗

1.例题描述

设计一个小程序，开始时界面上显示一个三色旗和一个按钮，当点击按钮时，三色旗的颜色会发生随机变化，即使不点击按钮，三色旗的颜色也会每隔一定时间自动发生变化。

2.index.wxml

  变化的三色旗
  
    
    
    
  
  改变颜色

3.index.wxss

.flex-wrp{
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;/*水平方向*/
}

.item{
  width: 300rpx;
  height: 500rpx;
}

.btn{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

4.index.js

Page({
  createColor:function(){//创建三种随机颜色
    var color=[];//定义数组
    var letters='0123456789ABCDEF';//定义16进制颜色字符集
    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(()=>{//每隔5s调用一次this.createColor()函数
    this.createColor();
  },5000);
},
changeColor:function(e){//点击按钮的事件函数
  this.createColor();
}
})