【微信小程序】15分钟倒计时（附带天数和时钟的实现方法在文章中）

这是制作的订单支付前倒计时，如果客户在规定时间内没能支付，则系统自动删除，这样就以便有些商品冗余，当然了，这里只有分钟和秒钟，天数和时钟我写在了最底下，最后代码的显示第七行，可以看一下，然后带入到相应的地方。

这是实现的效果，每秒钟都在onload（）里面被调用，然后自动动态倒计时。

其实难度不是很大，有一些代码防止你们看不懂，我会在下面注解出来的。

首先还是wxml

html 复制代码

<view class='demo-text2'>
   <text>倒计时：{{countdown}}</text>
</view>

其次是wxss:

css 复制代码

.demo-text2 {
  font-size: 28rpx;
  color: #ff7ba8;
}

我就加了一个颜色，哈哈哈哈~，你们可以根据自己的意思加字和东西，很好加的。

最后就是最重要的js里，注释我会写在最下面的。

js 复制代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.countDown();
  },

  //倒计时
  countDown() {
    var that = this

    var starttime = '2019/07/30 09:04:19'

    var start = new Date(starttime.replace(/-/g, "/")).getTime()
    var endTime = start + 15 * 60000

    var date = new Date(); //现在时间
    var now = date.getTime(); //现在时间戳

    var allTime = endTime - now
    var m, s;
    if (allTime > 0) {
      m = Math.floor(allTime / 1000 / 60 % 60);
      s = Math.floor(allTime / 1000 % 60);
      that.setData({
        countdown: m + "：" + s,
      })
      setTimeout(that.countDown, 1000);
    } else {
      console.log('已截止')
      that.setData({
        countdown: '00:00'
      })
    }
  },
}）

首先，是开始的时间，注意，千万不要是现在时间，不然一直是15分钟，无法改变的。

如果你想要用获取的时间，把我上面的时间改成在onload（）里获取的时间就好了，this.data.你的时间属性。

var starttime = '2019/07/30 09:04:19'

var start = new Date(starttime.replace(/-/g, "/")).getTime() //时间转时间戳

这里有个重点，replace(/-/g, "/") 里面的/符号是根据starttime 的日期时间的符号改变的，

如果是 "---" ，就把里面 / 改成 --- 就好了。
var endTime = start + 15 * 60000 表示之前的时间加15分钟，如果想30分钟，改一下就好了，随你们用。

第二点，如果获取到了时间就不用使用上面的时间转时间戳了。

因为后面是用时间戳计算的，如果是用时间计算，比较麻烦，建议用时间戳。

第三点，因为我这里只有分钟和秒钟，如果你需要时钟和天数的话，d代表day（天数），h代表（时钟）加入下面代码。

复制代码

  var d,h,m, s;
  d = Math.floor(allTime/ 1000 / 60 / 60 / 24);
  h = Math.floor(allTime/ 1000 / 60 / 60 % 24);
  countdown: d + "：" +  h + "：" + m + "：" + s,
  countdown: '00:00:00:00'

加在对应的位置一看就知道吧，哪里相同加哪里。

setTimeout(that.countDown, 1000);指定的毫秒数后调用函数，后面的数字是指定毫秒。

注：如果需要小时显示几天的倒计时，请勿除于24，否则会显示为当天的24小时，此代码需要改为

h = Math.floor(allTime/ 1000 / 60 / 60);

好了，这就是倒计时的所有代码了，有问题的请留言。