小程序实现简单倒计时

倒计时:00:10:22:23(天数,时,分,秒)

wxTimer.js

var wxTimer = function (initObj) {
  initObj = initObj || {};
  this.wxTimerSecond = initObj.wxTimerSecond;
  this.complete = initObj.complete;	//结束任务
  this.name = initObj.name;	//当前计时器在计时器数组对象中的名字
  this.intervarID; //计时ID
}

wxTimer.prototype = {
  //开始
  start: function (self) {
    var that = this;
    //开始倒计时
    var second = this.wxTimerSecond;
    function begin() {
      // 秒数
      second--;
      // 天数位
      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();
      if (secStr.length == 1) secStr = '0' + secStr;


      var tmpTimeStr = [dayStr, hrStr, minStr, secStr].join(':');
      var wxTimerSecond = second;
      var wxTimerList = self.data.wxTimerList;

      //更新计时器数组
      wxTimerList[that.name] = {
        wxTimer: tmpTimeStr,
        wxTimerSecond: wxTimerSecond,
      }

      self.setData({
        wxTimerList: wxTimerList
      });

      //结束执行函数
      if (wxTimerSecond <= 0) {
        if (that.complete) {
          that.complete();
        }
        that.stop();
      }
    }
    begin();
    this.intervarID = setInterval(begin, 1000);
  },
  //结束
  stop: function () {
    clearInterval(this.intervarID);
  },
}

module.exports = wxTimer;

使用:

timer.js

// 引入文件
var timer = require('../../utils/wxTimer.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    wxTimerList: {},//倒计时
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //要做倒计时的秒数(时间戳)
    var time = 60
    var wxTimer1 = new timer({
      wxTimerSecond: time,
      name: 'wxTimer1',
      complete: function () {
        console.log("倒计时结束")
      }
    })
    wxTimer1.start(this);
  },

})

timer.wxml

<text>倒计时:{{wxTimerList['wxTimer1'].wxTimer}}</text>

 

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