微信小程序的抽奖页面

微信小程序的抽奖页面

做一个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，是为了点击结束按钮后，还可以继续开始。
效果图： 中奖信息将在控制台显示