网站建设海报,重庆建筑招聘网,设计网站做什么内容好,wordpress手机悬浮1.例题描述
设计一个小程序#xff0c;开始时界面上显示一个三色旗和一个按钮#xff0c;当点击按钮时#xff0c;三色旗的颜色会发生随机变化#xff0c;即使不点击按钮#xff0c;三色旗的颜色也会每隔一定时间自动发生变化。
2.index.wxml
view classbox开始时界面上显示一个三色旗和一个按钮当点击按钮时三色旗的颜色会发生随机变化即使不点击按钮三色旗的颜色也会每隔一定时间自动发生变化。
2.index.wxml
view classboxview classtitle变化的三色旗/viewview classflex-wrpview classitem stylebackground-color: {{color1}};/viewview classitem stylebackground-color: {{color2}};/viewview classitem stylebackground-color: {{color3}};/view/viewbutton typeprimary classbtn bindtapchangeColor改变颜色/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 letters0123456789ABCDEF;//定义16进制颜色字符集for(var i0;i3;i){//利用循环创建三种随机颜色var c#;for(var j0;j6;j){//创建一种由6个16进制字符构成的随机颜色cletters[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();
}
})
