最近公司项目需要做一个功能, 商品的倒计时功能,计时结束后商品不能购买。
废话不多说,下面来讲解一下我的解决思路怎么写。
服务端返回服务端的时间和商品的到期时间
“到期时间”和“服务端时间”变成时间戳然后相减得出当前的秒数,秒数再转化为天时分秒单位
最终效果图:
wxml:
代码:
Page({
data: {
//倒计时参数
timeCountDown:""
},
//计算返回倒计时时间
countDownTime: function (systemTime, stateTime){
//时间戳相减得到倒计时时间
//2018-11-19 16:07:55 服务端时间格式
let data_time1 = systemTime.substring(0, 4) + "-" + systemTime.substring(4, 6) + "-" + systemTime.substring(6, 8) + " " + systemTime.substring(8, 10) + ":" + systemTime.substring(10, 12) + ":" + systemTime.substring(12, 14);
//2018-11-30 16:07:55 到期时间格式
let data_time2 = stateTime.substring(0, 4) + "-" + stateTime.substring(4, 6) + "-" + stateTime.substring(6, 8) + " " + stateTime.substring(8, 10) + ":" + stateTime.substring(10, 12) + ":" + stateTime.substring(12, 14);
var date1 = new Date(data_time1);
var time1 = date1.getTime();
var date2 = new Date(data_time2);
var time2 = date2.getTime();
console.log("time1 = " +time1);
console.log("time2 = " + time2);
let timestamp = parseInt(time2, 10) - parseInt(time1,10);
this.countdown(timestamp);
},
//倒数时间显示
countdown: function (timestamp){
let totalSecond = timestamp / 1000; //总秒数
let second = totalSecond;
// 天数位
var that = this;
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = '0' + dayStr;
// 小时位
var hr = Math.floor((second - day * 3600 * 24) / 3600);
var hrStr = hr.toString();
if (hrStr.length == 1) hrStr = '0' + hrStr;
// 分钟位
var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
var minStr = min.toString();
if (minStr.length == 1) minStr = '0' + minStr;
// 秒位
var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
var secStr = sec.toString();
// timeCountDown
let timeStr = dayStr + "天" + hrStr + "时" + minStr + "分" + secStr + "秒";
that.setData({
timeCountDown: timeStr
});
// console.log(timeStr);
setTimeout(function () {
timestamp -= 1000;
that.countdown(timestamp);
}, 1000)
},
})
setTimeout的方法后面设置1000意思为一秒后执行,这里使用递归的方式实现时间的刷新。
本期教程到此结束,如果有什么问题可以留言,作者看到了会尽快回复