美文网首页
小程序多个倒计时

小程序多个倒计时

作者: 魅眼ALong | 来源:发表于2019-08-13 17:08 被阅读0次

直接上代码

module.exports = {
  interval
}
//util.js
// interval(lastTime, _this,countDownName,index)
// lastTime: 到期时间戳
// _this: 页面级this
// countDownName: data数据变量名
// index: 下标
function interval(lastTime, _this,countDownName,index) {
  // _this.interval[index] = setInterval(function () {  页面page中设定定时器,记得添加this
  interval[index] = setInterval(function() {    
    var countDown = _this.data[countDownName];     // 获取现在的时间   
    var nowTime = new Date();    
    var nowTime = Date.parse(nowTime); //当前时间戳
    var differ_time = lastTime - nowTime; //时间差:
        
    if (differ_time >= 0) {      
      var differ_day = Math.floor(differ_time / (3600 * 24 * 1e3)); //相差天数
      var differ_hour = Math.floor(differ_time % (3600 * 1e3 * 24) / (1e3 * 60 * 60)); //相差小时
      var differ_minute = Math.floor(differ_time % (3600 * 1e3) / (1000 * 60)); //相差分钟
      var s = Math.floor(differ_time % (3600 * 1e3) % (1000 * 60) / 1e3);

      // 时间为个位数时,添加0
      differ_day = differ_day > 0 ? (differ_day.toString()[1] ? differ_day : '0' + differ_day) + "天 " : ""; //天数数
      differ_hour = differ_hour > 0 ? (differ_hour.toString()[1] ? differ_hour : '0' + differ_hour) + ":" : ""; //小时数
      differ_minute = differ_minute > 0 ? (differ_minute.toString()[1] ? differ_minute : '0' + differ_minute) + ":" : ""; //分钟数
      s = s.toString()[1] ? s : '0' + s; //秒数   
      var str = differ_day + differ_hour + differ_minute + s;
  
      countDown[index] = str;
    } else { // 已到期,不再进行倒计时    
      // console.log("倒计时已结束");
      // [countDownName][index] = "00天00小时00分";
      countDown[index] = "已结束";
      
      // 清除到期的计时器
      //clearInterval(_this.interval[index]); 页面page.js中清除定时器
      clearInterval(interval[index]);  
    }
    _this.setData({
        [countDownName]: countDown
    });
  }, 1000);
}

页面page.js

//页面级 js
var util = require("../../utils/util.js")
Page({
  data: {
    timeList: [{
      lastDate: "2019-08-13 13:00:16"
    },        {
      lastDate: "2019-08-13 17:00:03"
    },        {
      lastDate: "2019-08-13 17:05:25"
    },        {
      lastDate: "2019-08-14 18:00:33"
    }],
    countDown: []
  },
  onLoad: function(options) {
    var _this = this;
    let timeList = this.data.timeList;
    for (let i = 0; i < timeList.length; i++) {
      var index = i;
      var lastDate = timeList[index].lastDate;
      lastDate = Date.parse(lastDate);
      util.interval(lastDate, _this,"countDown", index);
    }
  },
})
//WXML
<block wx:for="{{timeList}}" wx:key="*this">
  <view class='actives'>
    <view>活动倒计时{{index}}:
      <text>{{countDown[index]}}</text>
    </view>
  </view>
</block>

相关文章

网友评论

      本文标题:小程序多个倒计时

      本文链接:https://www.haomeiwen.com/subject/ftsbjctx.html