评论

微信原生小程序实现订单毫秒级的倒计时功能

原生小程序实现订单取消时间倒计时功能

wxml:
<view>{{countdown}}</view>

js代码:
Page({
data: {
countdown: ‘’, // 倒计时
endDate: ‘2019-10-9 09:29:11’ // 结束时间
},
onLoad: function () {
this.countTime();
},

// 生命周期函数–监听页面卸载
onUnload: function () {
clearTimeout(this.ime);
},

// 倒计时
countTime() {
const date = new Date();
const now = date.getTime();
//设置截止时间
const endDate = new Date(this.data.endDate);
const end = endDate.getTime();
//时间差
const leftTime = end - now;
let d, h, m, s, ms;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 1000);
ms = ms < 100 ? “0” + ms : ms
s = s < 10 ? “0” + s : s
m = m < 10 ? “0” + m : m
h = h < 10 ? “0” + h : h
this.setData({
countdown: m + “:” + s + “:” + ms,
})
//递归每秒调用countTime方法,显示动态时间效果
this.time = setTimeout(this.countTime, 100);
} else {
this.setData({
countdown: ‘00:00:00’
})
clearTimeout(this.time);
}
}
})

代码片段地址:
https://developers.weixin.qq.com/s/mg27NZm776bp

最后一次编辑于  10-09  
点赞 1
收藏
评论

2 个评论

  • 小康¹⁸
    小康¹⁸
    11-08

    你这个重点不是毫秒级的操作。。

    11-08
    赞同 1
    回复
  • 吴迪
    吴迪
    10-09

    做乜啊

    10-09
    赞同
    回复