小程式（倒計時的製作）

微信小程式如火如荼，今天我借教程做一篇倒計時效果的小程式頁面.

這樣的效果是怎樣實現的呢

按以下步驟操作

wxml檔案放個text:

<view>
  <text>{{second}} 秒:{{micro_second}}</text>
</view>

然後在js檔案下編寫如下程式碼：

function countdown(that) {
  var second = that.data.second 
   if (second == 0) {   
     // console.log("時間到...");
    that.setData({
      second: "Time Out..."
    }); 
    return;
  } var time = setTimeout(function () {
    that.setData({
      second: second - 1
    });
    countdown(that);
  }
    , 1000)
}
 

在Page裡面加入：

 second: 3,

在onLoad載入函式裡面執行倒計時函式：

countdown(this);

最終效果如圖：

加入毫秒demo

更改js程式碼：

function countdown(that) {
  var second = that.data.second 
   if (second == 0) {
    that.setData({
      second: "時間到!",
      micro_second: " " ,
      s:0

    });
    clearTimeout(micro_timer);
     return;
  }
   var timer = setTimeout(function () {
    that.setData({
      second: second - 1
    });
    countdown(that);
  } , 1000)
}
/* 毫秒級倒計時 */
// 初始毫秒數，同時用作歸零
var micro_second_init = 100;
// 當前毫秒數
var micro_second_current = micro_second_init;
// 毫秒計時器
var micro_timer;
function countdown4micro(that) { 
   if (micro_second_current <= 0) {
    micro_second_current = micro_second_init;
  }
micro_timer = setTimeout(function () {
  that.setData({
    micro_second: micro_second_current - 1
  });
  micro_second_current--;
  countdown4micro(that);
}, 10)
}
 

在onload函式如加入上述的兩個計時函式：

 countdown(this);
  countdown4micro(this);

最終效果：