項目需要做倒計時.
黃大哥的輪子.拿來用用.表示很順手.

代碼:
1.index.wxml

<text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;">
    {{clock}} {{micro_second}}
</text>

2.index.js
注釋很清楚了.不多說.

/** 
 * 需要1個目標日期，初始化時，先得出到當前時間還有剩余多少秒
 * 1.將秒數換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供1個時鐘，每10ms運行1次，渲染時鐘，再總ms數自減10
 * 3.剩余的秒次為零時，return，給出tips提示說，已截止
 */

// 定義1個總毫秒數，以1分鐘為例。TODO，傳入1個時間點，轉換成總毫秒數
var total_micro_second = 36 * 60 * 60 * 1000;

/* 毫秒級倒計時 */
function count_down(that) {
  // 渲染倒計時時鐘
  that.setData({
    clock: date_format(total_micro_second)
  });

  if (total_micro_second <= 0) {
    that.setData({
      clock: "已截止"
    });
    // timeout則跳出遞歸
    return;
  }
  setTimeout(function () {
    // 放在最后--
    total_micro_second -= 10;
    count_down(that);
  }, 10)
}

// 時間格式化輸出，如03:25:19 86。每10ms都會調用1次
function date_format(micro_second) {
  // 秒數
  var second = Math.floor(micro_second / 1000);
  // 小時位
  var hr = Math.floor(second / 3600);
  // 分鐘位
  var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
  // 秒位
  var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
  // 毫秒位，保存2位
  var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10));

  return hr + ":" + min + ":" + sec + " " + micro_sec;
}

// 位數不足補零
function fill_zero_prefix(num) {
  return num < 10 ? "0" + num : num
}

Page({
  data: {
    clock: ''
  },
  onLoad: function () {
    count_down(this);
  }
});

demo下載地址
原文地址 我的博客,歡迎評論!
CSDN微信小程序開發專欄,歡迎關注!