小程序多个倒计时

2019-08-13  本文已影响0人  魅眼ALong

直接上代码

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>
上一篇 下一篇

猜你喜欢

热点阅读