小程序制作（超详解！！！）第十四节 计时器

1.案例描述

设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白界面，过2秒后才显示计时界面点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时。

2.index.wxml

<view class="box" hidden="{{hidden}}"><!--hidden为true不显示，flase显示-->
  <view class="title">计数器</view>
  <view class="time">{{num}}</view><!--计时器界面，显示数值为num-->
  <view class="btnLayout">
    <button bindtap="start">开始计时</button><!--开始按钮-->
    <button bindtap="stop">停止计时</button>
  </view>
</view>

3.index.wxss

.time{
  width:90%;/*宽度*/
  line-height: 200px;/*设置高度并使文字垂直居中*/
  background-color: yellow;
  color: red;/*文字颜色*/
  font-size: 100px;
  text-align: center;
  border: 1px solid silver;/*边框*/
  border-radius: 30px;/*边框半径（圆角）*/
  margin: 15px;
}

.btnLayout{
  display: flex;
  flex-direction: row;/*水平方向*/
}

button{
  width: 45%;/*按钮宽度*/
}

4.index.js

var num=60;//计时器显示的数字
var timerID;//计时器的ID
Page({
  data:{
    hidden:true,//小程序运行时不显示计时界面
    num:num//将全局变量赋值给绑定变量
  },

  onLoad:function(options){
    var that=this;
    setTimeout(()=>{//回调函数
      that.onShow()//隔2秒后调用函数
    },2000)//2秒后显示计时界面
  },

  show:function(){//显示计时界面函数
    var that=this;
    that.setData({
      hidden:false//显示计时界面
    })
  },

  start:function(){//开始计时函数
    var that=this;
    timerID=setInterval(()=>{
      that.timer()
    },1000)
  },

  stop:function(){//停止计时函数
    clearInterval(timerID)//清除计时器
  },

  timer:function(){//计时函数
    var that=thia;
    console.log(num)
    if(num>0){
      that.setData({
      num:num--//每次减一
      })
    }else{
      that.setData({
        num:0
      })
    }
    console.log(num)
  }
})

5.总结

1）setTimeout()

函数number setTimeout(function callback,number delay, any rest)。

设定一个计时器在计时到期以后执行注册的回调函数。

2)setInterval()

函数number setInterval(function callback, number delay，any rest)。

设定一个计时器，按照指定的周期 (以毫秒计) 来执行注册的回调函数。

3)clearTimeout()

函数clearTimeout(number timeoutID)

取消由setTimeout 设置的计时器。参数 timeoutID为要取消的计时器的 ID

4)clearInterval()

函数clearInterval(number intervalID)。

取消由 setInterval 设置的计时器。参数 intervalID为要取消的计时器的ID