1、案例要求：

案例描述.jpg

2、制作流程：

2.1、代码展示：

wxml：

<view class='box' hidden='{{hidden}}'>
  <view class='title'>计时器</view>
  <view class='time'>{{num}}</view>
  <view class='btnLayout'>
    <button bindtap='start'>开始计时</button>
    <button bindtap='stop'>停止计时</button>
    <button bindtap='again'>重新计时</button>
  </view>
</view>

wxss：

/* pages/kj/Timer/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: 30%;
    font-size: 15px;
  }
  

js：

var num = 5;
var time_Id = 0;

Page({
    data:{
        num : num,
        hidden : true
    },
    onLoad: function (options) {
        var that = this;
        setTimeout(()=>{
            that.setData({
                hidden : false
            })
        },2000)
    },
    start:function(){
        time_Id = setInterval(this.renew,1000)
        
    },
    stop:function(){
        clearInterval(time_Id)
    },
    again:function(){
        clearInterval(time_Id)
        this.setData({
            num : 5
        })
        num = 5;
        console.log(num)
    },
    renew:function(){
        if(num > 0){
            num = num - 1;
            this.setData({
                num : num
            })
        }
        else{
            this.setData({
                num : 0
            })
        }
        console.log(num)
    },

})

• 注意：app.json中如果有"style": "v2"这条语句，要记得删掉，不然按钮宽度是无法设置的。

2.2、结果展示：

结果展示.jpg

3、知识点总结：

知识概述.jpg settimeout.jpg cleartimeout.jpg setinterval.jpg clearinterval.jpg

4、踩坑说明（有坑未填）：

• var that = this 解释：
  1.从this作用域分析要加，但具体为什么要写个这东西，目前也没弄懂，后面懂了再更！
  5.当然用this.setData({})直接调用也行。
• 在小程序中不论怎么修改button的尺寸，button都不变化的原因：app.json
  中"style": "v2",这条语句在作怪，删掉就好了。
• 对于扩展功能踩坑问题说明：
  1、拓展功能想要实现，在页面中新添加一个“重新开始”按钮，目的是实现将计时器数值复原的功能。
  2、为了实现上述功能发现一个新问题：this.setData只会改变页面的显示数值，并不会改变js逻辑层的num值。

again:function(){
        clearInterval(time_Id)
        this.setData({
            num : 5
        })
        num = 5;//如果不在这设置num初值，在计时器运行至时间为0时，
//激活again，上面 this.setData 会将页面num值改为5，一旦再次运行就会发现，num的值在js中还是0，
//所以this.setData只会改变页面的显示数值，并不会改变js逻辑层的num值。
        console.log(num)
    }