小程式(倒計時的製作)
阿新 • • 發佈:2018-12-30
小程式(倒計時的製作)
微信小程式如火如荼,今天我借教程做一篇倒計時效果的小程式頁面.
這樣的效果是怎樣實現的呢
按以下步驟操作
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);
最終效果: