【黄啊码】微信小程序倒计时秒杀功能

 .wxml

<block wx:​​​​if​​​​=​​​​"{{isstart}}"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"top"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"imageview"​​​​>​​ ​​<image src=​​​​"/images/background.png"​​​ ​​mode=​​​​"aspectFit"​​​​></image>​​ ​​</view>​​ ​​<view ​​​​class​​​​=​​​​"top_view"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"top_left_view"​​​​>​​ ​​<view style=​​​​"color:red;height:170rpx;line-height:170rpx;margin-top:40rpx;font-size:28rpx"​​​​>​​ ​​￥<text style=​​​​"font-size:30px"​​​​>{{list.Money}}</text> {{list.Name}}​​ ​​</view>​​ ​​<view>​​ ​​{{list.Rules[0]}}​​ ​​</view>​​ ​​<view>​​ ​​{{list.Rules[1]}}​​ ​​</view>​​ ​​</view>​​ ​​<view ​​​​class​​​​=​​​​"top_right_view"​​​​>​​ ​​<text>积分兑换</text>​​ ​​</view>​​ ​​</view>​​ ​​</view>​​ ​​<view ​​​​class​​​​=​​​​"center"​​​​>​​ ​​<view style=​​​​"font-size:34rpx;"​​​​>积分抢购{{list.Money}}元{{list.Name}}</view>​​ ​​<view style=​​​​"color:#358174"​​​​>​​ ​​<text style=​​​​"font-size:32rpx"​​​​>需{{list.Score}}积分 | </text>​​ ​​<text style=​​​​"font-size:24rpx"​​​​>每人限抢1次，您已抢购{{list.GetCount}}次</text>​​ ​​</view>​​ ​​<view ​​​​class​​​​=​​​​"centerview"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"{{list.State==2?'colorred':'colorgray'}}"​​​​>{{list.StateStr}}</view>​​ ​​<view><text>剩余</text><text style=​​​​"color:#358174"​​​​>{{list.LeftCount}}</text><text>份</text></view>​​ ​​</view>​​ ​​</view>​​ ​​<view ​​​​class​​​​=​​​​"buttom"​​​​>​​ ​​<text wx:​​​​for​​​​=​​​​"{{list.Info}}"​​​ ​​wx:key=​​​​"key"​​​​>​​ ​​{{item}}​​ ​​</text>​​ ​​</view>​​ ​​<block wx:​​​​if​​​​=​​​​"{{list.GetCount!=0}}"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"finished"​​​​>​​ ​​您已抢购成功​​ ​​</view>​​ ​​</block>​​ ​​<block wx:elif=​​​​"{{list.State==3}}"​​​​>​​ ​​<view ​​​​class​​​​=​​​​"finished"​​​​>​​ ​​{{list.Desc}}​​ ​​</view>​​ ​​</block>​​ ​​<block wx:​​​​else​​​​>​​ ​​<view ​​​​class​​​​=​​​​"countdownBox"​​​ ​​bindtap=​​​​"nowbuy"​​​​>​​ ​​<block wx:​​​​if​​​​=​​​​"{{timeout}}"​​​​>​​ ​​{{list.Desc}}​​ ​​</block>​​ ​​<block wx:​​​​else​​​​>​​ ​​<text>倒计时:</text>​​ ​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.hour}}</view>​​ ​​<text>：</text>​​ ​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.minute}}</view>​​ ​​<text>：</text>​​ ​​<view ​​​​class​​​​=​​​​"item"​​​​>{{countdown.second}}</view>​​ ​​</block>​​ ​​</view>​​ ​​</block>​​ ​​</block>​​ ​​<block wx:​​​​else​​​​>​​ ​​<view ​​​​class​​​​=​​​​"nostart"​​​​>​​ ​​暂无抢红包活动​​ ​​</view>​​ ​​</block>​​

.wxss

.top {
  width: 100%;
  height: 380rpx;
  font-size: 24rpx;
  border-bottom: 1px solid #989898;
}

.imageview {
  width: 100%;
  height: 360rpx;
}

.imageview image {
  margin-left: 5%;
  width: 90%;
  height: 360rpx;
}

.top_left_view {
  width: 45%;
  height: 360rpx;
  margin-left: 21%;
  margin-top: 20rpx;
  color: #636365;
  line-height: 1.5em;
  margin-top: -360rpx;
}

.colorgray{
  color: gray;
}

.colorred{
  color: red;
}

.top_left_view view {
  text-align: center;
}

.top_right_view {
  border: 1px solid black;
  width: 4%;
  color: #B89633;
  height: 200rpx;
  font-size: 28rpx;
  margin-top: -300rpx;
  margin-left: 86%;
}

.center {
  width: 90%;
  margin-left: 5%;
  padding: 3% 0;
  line-height: 1.8em;
  font-size: 26rpx;
  border-bottom: 1px solid #989898;
}

.centerview {
  display: flex;
  justify-content: space-between;
}

.buttom {
  width: 90%;
  margin-left: 5%;
  font-size: 26rpx;
  color: #989898;
}

.finished{
  width: 90%;
  margin-left: 5%;
  height: 85rpx;
  border-radius: 50rpx;
  background-color: #999999;
  position: absolute;
  bottom: 0;
  margin-bottom: 50rpx;
  color: white;
  text-align: center;
  line-height: 85rpx;
}

.countdownBox {
  width: 90%;
  margin-left: 5%;
  height: 85rpx;
  margin-bottom: 50rpx;
  background-color: #de2c3a;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  bottom: 0;
}
.countdownBox .item{
  height: 50rpx;
  color: #000;
  box-sizing: border-box;
  padding: 0rpx 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  font-weight: 480;
  margin: 0rpx 10rpx;
}

.nostart{
  text-align: center;
  margin-top: 200rpx;
}

.js

var http = require('../../../utils/request.js');
const app = getApp();
Page({
  data: {
    isnull: false,
    timeout: false,
    isClicked: true,
    isstart: false,
    countdown: {
      hour: '00',
      minute: '00',
      second: '00',
      millisecond:'00'
    },
    list: []
  },
  //开始倒计时
  startCountdown: function (millisecond) {
    var that = this;
    that.clearinterval();
    app.globalData.seckillinterval = null;
    if (millisecond > 0) {
      app.globalData.seckillinterval = setInterval(function () {
        millisecond -= 10;
        if (millisecond <= 0) {
          if (app.globalData.seckillinterval != null) {
            clearInterval(app.globalData.seckillinterval);
            app.globalData.seckillinterval = null;
          }
          that.setData({
            countdown: {
              hour: '00',
              minute: '00',
              second: '00',
              millisecond:'00'
            },
            timeout: true
          });
          that.onShow();
        }
        that.transformRemainTime(millisecond);
      }, 10);
    } else {
      that.setData({
        timeout: true
      });
    }
  },
  // 剩余时间(毫秒)处理转换时间
  transformRemainTime: function (millisecond) {
    var that = this;
    var countdownObj = that.data.countdown;
    var seconds = Math.floor(millisecond / 1000)
    // 小时
    countdownObj.hour = that.formatTime(Math.floor(seconds / 3600 % 24));
    // 分钟
    countdownObj.minute = that.formatTime(Math.floor(seconds / 60 % 60));
    // 秒
    countdownObj.second = that.formatTime(Math.floor(seconds % 60));
    // 毫秒
    countdownObj.millisecond = that.formatTime(Math.floor((millisecond % 1000) / 10));
    that.setData({
      countdown: countdownObj
    });
  },
  //格式化时间为2位
  formatTime: function (time) {
    if (time < 10)
      return '0' + time;
    return time;
  },
  //点击“立即抢”
  nowbuy: function (e) {
    var that = this;
    //状态是“秒杀中”才执行方法
    if (that.data.list.State == 2 && that.data.isClicked) {
      that.setData({
        isClicked: false
      })
      http.postRequest("Skill/Buy", {}, function (res) {
        if (res.IsOk) {
          wx.showModal({
            title: '提示',
            content: res.Data.ErrMsg,
            showCancel: false,
            success(res) {
              if (app.globalData.seckillinterval) {
                clearInterval(app.globalData.seckillinterval);
                app.globalData.seckillinterval = null
              }
              that.onShow();
            }
          })
        }
      }, function (res) {})
      //防止重复提交
      setTimeout(function () {
        that.setData({
          isClicked: true
        })
      }, 1000)
    }
  },
  onShow: function () {
    var that = this;
    //获取优惠券信息
    http.postRequest("Skill/Index", {}, function (res) {
      if (res.IsOk) {
        if (res.Data) {
          that.setData({
            list: res.Data,
            isstart: true
          })
          that.startCountdown(res.Data.StartTimeLeft)
        } else {
          that.setData({
            isstart: false
          })
        }
      }
    }, function (res) {})
  },
  //清除计时器
  clearinterval: function () {
    if (app.globalData.seckillinterval) {
      clearInterval(app.globalData.seckillinterval);
      app.globalData.seckillinterval = null;
    }
  },
  onHide: function () {
    this.clearinterval();
  },
  onUnload: function () {
    this.clearinterval();
  }
})

在使用完定时器后一定要清除定时器，否则定时器将一直运行，占用程序资源，甚至程序报错。关于有效清除定时器方法在微信开放社区的讨论：微信小程序使用clearInterval清除定时函数无效？ | 微信开放社区

啊码整理了一部分小程序的案例，比较适合入门的朋友入手，如果需要可以从该​​链接【1】​​、​​链接【2】​​进入