JavaScript倒计时功能实现,微信小程序倒计时

最近公司项目需要做一个功能, 商品的倒计时功能,计时结束后商品不能购买。

废话不多说,下面来讲解一下我的解决思路怎么写。

服务端返回服务端的时间和商品的到期时间

“到期时间”和“服务端时间”变成时间戳然后相减得出当前的秒数,秒数再转化为天时分秒单位

最终效果图:

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意思为一秒后执行,这里使用递归的方式实现时间的刷新。

本期教程到此结束,如果有什么问题可以留言,作者看到了会尽快回复

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章