60秒倒計時

效果：

佈局：

<button bindtap='countdown'>60秒倒計時</button>
<text>{{second}}</text>

js程式碼：

// pages/info-four/info-four.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    second: 60
  },

  // 小程式實現簡單的倒計時效果
  // 基本實現功能:1，從60到0的倒計時效果2，倒計時完畢後會有提示
  countdown: function () {
    var that = this
    var second = this.data.second
    if (second == 0) {
      that.setData({
        second: 60
      })
      return
    }
    var time = setTimeout(function () {
      that.setData({
        second: second - 1
      })
      that.countdown(that)
    }, 1000)
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

電商秒殺倒計時效果

效果：

佈局

<text>pages/info-three/info-three.wxml</text>
 <button bindtap='countdown'>電商秒殺倒計時效果</button>
<text >秒殺: {{clock}}</text>
<text>{{micro_second}}</text> 

js程式碼

// pages/info-three/info-three.js
var total_micro_second = 10 * 1000;//這是10秒倒計時
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    clock: ''
  },
  /* 毫秒級秒殺倒計時 */
  countdown: function () {
    var that = this

    // 定義一個總毫秒數，以一天為例
    // var total_micro_second = 3600 * 1000*24;//這是一天倒計時
    
    console.log('countdown=')
     
    // 渲染倒計時時鐘
    var clock = this.dateformat(total_micro_second)//格式化時間
    console.log('clock=' + clock)
    that.setData({
      clock: clock
    });

    if (total_micro_second <= 0) {
      that.setData({
        clock: "秒殺結束"
      });
      // timeout則跳出遞迴
      return
    }
    // settimeout實現倒計時效果
    setTimeout(function () {
      // 放在最後--
      total_micro_second -= 10
      that.countdown()
    }, 10)//注意毫秒的步長受限於系統的時間頻率，於是我們精確到0.01s即10ms
  },


  // 時間格式化輸出，如1天天23時時12分分12秒秒12 。每10ms都會呼叫一次
  dateformat: function (micro_second) {
    // 總秒數
    var second = Math.floor(micro_second / 1000);
    // 天數
    var day = Math.floor(second / 3600 / 24);
    // 總小時
    var hr = Math.floor(second / 3600);
    // 小時位
    var hr2 = hr % 24;
    // 分鐘位
    var min = Math.floor((second - hr * 3600) / 60);
    // 秒位
    var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
    // 毫秒位，保留2位
    var micro_sec = Math.floor((micro_second % 1000) / 10);
    return day + "天" + hr2 + "時" + min + "分" + sec + "秒" + micro_sec;
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
   
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

。。。