微信小程序-倒计时显示 并且销毁、可用于登录验证等

效果图

 

 1、html

<view class='countDown' wx:if="{{countDownNum}}">
  <view class='tXt'><text style="color:red">{{countDownNum}}</text>秒钟后消失</view>
</view>

2、css

.countDown{
    position: fixed;
    margin:auto;
    width: 300rpx;
    height: 180rpx;
    background: rgba(1,1,1,0.1);
    left: 0rpx;
    right: 0rpx;
    top: 0rpx;
    bottom: 300rpx;
    text-align: center;
    line-height: 180rpx;
}

3、js

Page({
  data: {
    timer: '',//定时器名字
    countDownNum: '5'//倒计时初始值
  },
  onShow: function(){
    this.countDown();
  },
  countDown: function () {
    let that = this;
    let countDownNum = that.data.countDownNum;
    that.setData({
      timer: setInterval(function () {
        countDownNum--;
        that.setData({
          countDownNum: countDownNum
        })
        if (countDownNum == 0) {
          clearInterval(that.data.timer);
        //此处可执行计时后的操作
        }
      }, 1000)
    })
  }
})