小程序實現簡單倒計時

倒計時: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>

 

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