微信小程序的抽奖页面
做一个1-10的微信小程序抽奖界面,随机到6和8会显示中奖信息!
点开始按钮开始执行,点结束按钮结束抽奖并且判断是否中奖
wxml代码:
<view>{{title}}</view>
<view bindtap="kaishi">开始</view>
<view bindtap="jieshu">结束</view>
JS代码:
var diaoyong=-1; /*声明全局变量diaoyong=-1*/
var panduan; /*声明全局变量panduan*/
Page({
/**
* 页面的初始数据
*/
data: {
title:0,
},
kaishi: function ()
{
if (diaoyong == -1)
{
console.log("抽奖开始")
var that = this; /*setInterval( ){ }内的this.setData({ })的作用域
不包括page({ })里的this.setData({ })
要在setInterval( ){ }之前将this赋值给一个新的方法———var that=this;*/
diaoyong = setInterval(function () /*diaoyong变量一定要在全局声明,
否则定时器可能会出现无法停止的情况*/
{
var suiji = Math.ceil(Math.random() * 10);
that.setData
({
title: suiji,
})
panduan=suiji;
console.log(panduan);
}, 500)
}
},
jieshu : function () {
console.log("抽奖结束");
clearInterval(diaoyong);
diaoyong = -1;
if (panduan == 8 ||panduan == 6) {
console.log("中奖了");
}else{
console.log("没中奖");
}
},
给全局变量赋值-1是为后面的if语句打基础,判断diaoyong是否=-1,为真运行定时器,为假不进行操作,这样就不会有点几下开始按钮,定时器就开几个的情况。
关闭定时器后面加了个diaoyong=-1,是为了点击结束按钮后,还可以继续开始。
效果图: 中奖信息将在控制台显示