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

详解！！！）第十五节 自动随机变化的三色旗"/>

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

1.例题描述

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

2.index.wxml

<view class="box"><view class="title">变化的三色旗</view><view class="flex-wrp"><view class="item" style="background-color: {{color1}};"></view><view class="item" style="background-color: {{color2}};"></view><view class="item" style="background-color: {{color3}};"></view></view><button type="primary" class="btn" bindtap="changeColor">改变颜色</button>
</view>

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();
}
})