国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序 倒計時組件實現代碼

2019-11-20 08:40:37
字體:
來源:轉載
供稿:網友

功能: 適用于電商應用的限時團購、商品秒殺等

先來看下最終效果:

git源:http://git.oschina.net/dotton/CountDown

分步驟-性子急的朋友,可以直接看最后那段代碼。

wxml文件放個text

<text>second: {{second}} micro second:{{micro_second}}</text>

在js文件中調用

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

運行驗證下,從10走到1s,然后顯示時間到。

于是繼續將毫秒完善,注意毫秒的步長受限于系統的時間頻率,于是我們精確到0.01s即10ms

js

/* 秒級倒計時 */function countdown(that) { var second = that.data.second if (second == 0) {  that.setData({   second: "Time out!",   micro_second: "micro_second too."  });  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)}Page({  data: {    second: 2,    micro_second: micro_second_init  },  onLoad: function() {    countdown(this);    countdown4micro(this);  }});

wxml文件

<text style="display: block;">second: {{second}}s</text><text>{{micro_second}}</text>

如此,當秒級運行完畢時,毫秒級timer即clearTimeout,并將字本顯示為'micro_second too'

再添加一個countdown4micro方法,使得顯示剩余 0:3:19 89這樣形式的倒數

function dateformat(second) {  var dateStr = "";  var hr = Math.floor(second / 3600);  var min = Math.floor((second - hr * 3600) / 60);  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;  dateStr = hr + ":" + min + ":" + sec;  return dateStr;}目前有2個時鐘,影響性能,合并下去掉countdown,于是countdown4micro變成以下的樣子:function countdown4micro(that) {  var loop_second = Math.floor(loop_index / 100);  // 得知經歷了1s  if (cost_micro_second != loop_second) {    // 賦予新值    cost_micro_second = loop_second;    // 總秒數減1    total_second--;  }   // 每隔一秒,顯示值減1; 渲染倒計時時鐘  that.setData({   clock:dateformat(total_second - 1)  });   if (total_second == 0) {    that.setData({     // micro_second: "",     clock:"時間到"    });    clearTimeout(micro_timer);    return ;   }   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--;  // 放在最后++,不然時鐘停止時還有10毫秒剩余  loop_index ++;  countdown4micro(that); } ,10)}

如此這般,毫秒與時分秒是分別運行渲染的,再次改造,程序可讀性更好。dateformat針對于毫秒操作,而不接受秒為數。同時還省卻了計算100次為1s的運算

/**  * 需要一個目標日期,初始化時,先得出到當前時間還有剩余多少秒 * 1.將秒數換成格式化輸出為XX天XX小時XX分鐘XX秒 XX * 2.提供一個時鐘,每10ms運行一次,渲染時鐘,再總ms數自減10 * 3.剩余的秒次為零時,return,給出tips提示說,已經截止 */// 定義一個總毫秒數,以一分鐘為例。TODO,傳入一個時間點,轉換成總毫秒數var total_micro_second = 2 * 1000;/* 毫秒級倒計時 */function countdown(that) {   // 渲染倒計時時鐘   that.setData({     clock:dateformat(total_micro_second)   });   if (total_micro_second <= 0) {     that.setData({       clock:"已經截止"     });     // timeout則跳出遞歸     return ;   }     setTimeout(function(){    // 放在最后--    total_micro_second -= 10;    countdown(that);  }  ,10)}// 時間格式化輸出,如3:25:19 86。每10ms都會調用一次function dateformat(micro_second) {   // 秒數   var second = Math.floor(micro_second / 1000);   // 小時位   var hr = Math.floor(second / 3600);   // 分鐘位   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 hr + ":" + min + ":" + sec + " " + micro_sec;}Page({  data: {    clock: ''  },  onLoad: function() {    countdown(this);  }});

經過如上優化,代碼量減少一半,運行效率也高了。

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 东乌珠穆沁旗| 旬阳县| 聂拉木县| 元谋县| 买车| 夏河县| 阳山县| 海门市| 河间市| 惠来县| 石渠县| 吉安县| 连平县| 保亭| 阿克陶县| 彭阳县| 通山县| 正宁县| 罗平县| 喀喇沁旗| 江阴市| 阳江市| 宣恩县| 永康市| 南开区| 东明县| 怀来县| 唐海县| 通渭县| 富蕴县| 吕梁市| 内丘县| 朝阳县| 绥芬河市| 临汾市| 南靖县| 武夷山市| 板桥市| 搜索| 华安县| 绩溪县|