小程序教程

微信小程序倒计时组件

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

先来看下最终效果:

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

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

wxml文件放个text

  1. <text>second: {{second}} micro second:{{micro_second}}</text>
复制代码

在js文件中调用
  1. function countdown(that) {
  2.   var second = that.data.second
  3.   if (second == 0) {
  4.     // console.log("Time Out...");
  5.     that.setData({
  6.       second: "Time Out..."
  7.     });
  8.     return ;
  9.   }
  10.   var time = setTimeout(function(){
  11.     that.setData({
  12.       second: second - 1
  13.     });
  14.     countdown(that);
  15.   }
  16.   ,1000)
  17. }

  18. Page({
  19.     data: {
  20.         second: 3
  21.     },
  22.     onLoad: function() {
  23.         countdown(this);
  24.     }
  25. });
复制代码

运行验证下,从10走到1s,然后显示时间到。

于是继续将毫秒完善,注意毫秒的步长受限于系统的时间频率,于是我们精确到0.01s即10ms

js

  1. /* 秒级倒计时 */
  2. function countdown(that) {
  3.   var second = that.data.second
  4.   if (second == 0) {
  5.     that.setData({
  6.       second: "Time out!",
  7.       micro_second: "micro_second too."
  8.     });
  9.     clearTimeout(micro_timer);
  10.     return ;
  11.   }
  12.   var timer = setTimeout(function(){
  13.     that.setData({
  14.       second: second - 1
  15.     });
  16.     countdown(that);
  17.   }
  18.   ,1000)
  19. }

  20. /* 毫秒级倒计时 */
  21. // 初始毫秒数,同时用作归零
  22. var micro_second_init = 100;
  23. // 当前毫秒数
  24. var micro_second_current = micro_second_init;
  25. // 毫秒计时器
  26. var micro_timer;

  27. function countdown4micro(that) {
  28.   if (micro_second_current <= 0) {
  29.     micro_second_current = micro_second_init;
  30.   }
  31.   micro_timer = setTimeout(function(){
  32.     that.setData({
  33.       micro_second: micro_second_current - 1
  34.     });
  35.     micro_second_current--;
  36.     countdown4micro(that);
  37.   }
  38.   ,10)
  39. }

  40. Page({
  41.     data: {
  42.         second: 2,
  43.         micro_second: micro_second_init
  44.     },
  45.     onLoad: function() {
  46.         countdown(this);
  47.         countdown4micro(this);
  48.     }
  49. });
复制代码

wxml文件

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

  2. <text>{{micro_second}}</text>
复制代码

如此,当秒级运行完毕时,毫秒级timer即clearTimeout,并将字本显示为'micro_second too'

再添加一个countdown4micro方法,使得显示剩余 0:3:19 89这样形式的倒数

  1. function dateformat(second) {
  2.     var dateStr = "";
  3.     var hr = Math.floor(second / 3600);
  4.     var min = Math.floor((second - hr * 3600) / 60);
  5.     var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  6.     dateStr = hr + ":" + min + ":" + sec;
  7.     return dateStr;
  8. }
复制代码

目前有2个时钟,影响性能,合并下去掉countdown,于是countdown4micro变成以下的样子:

  1. function countdown4micro(that) {

  2.     var loop_second = Math.floor(loop_index / 100);
  3.     // 得知经历了1s
  4.     if (cost_micro_second != loop_second) {
  5.         // 赋予新值
  6.         cost_micro_second = loop_second;
  7.         // 总秒数减1
  8.         total_second--;

  9.     }
  10.       // 每隔一秒,显示值减1; 渲染倒计时时钟
  11.     that.setData({
  12.       clock:dateformat(total_second - 1)
  13.     });

  14.       if (total_second == 0) {
  15.         that.setData({
  16.           // micro_second: "",
  17.           clock:"时间到"
  18.         });
  19.         clearTimeout(micro_timer);
  20.         return ;
  21.       }   

  22.   if (micro_second_current <= 0) {
  23.     micro_second_current = micro_second_init;
  24.   }
  25.   micro_timer = setTimeout(function(){
  26.     that.setData({
  27.       micro_second: micro_second_current - 1
  28.     });
  29.     micro_second_current--;
  30.     // 放在最后++,不然时钟停止时还有10毫秒剩余
  31.     loop_index ++;
  32.     countdown4micro(that);
  33.   }
  34.   ,10)
  35. }
复制代码

如此这般,毫秒与时分秒是分别运行渲染的,再次改造,程序可读性更好。dateformat针对于毫秒操作,而不接受秒为数。同时还省却了计算100次为1s的运算

  1. /**
  2. * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒
  3. * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
  4. * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10
  5. * 3.剩余的秒次为零时,return,给出tips提示说,已经截止
  6. */

  7. // 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
  8. var total_micro_second = 2 * 1000;

  9. /* 毫秒级倒计时 */
  10. function countdown(that) {
  11.       // 渲染倒计时时钟
  12.       that.setData({
  13.           clock:dateformat(total_micro_second)
  14.       });

  15.       if (total_micro_second <= 0) {
  16.           that.setData({
  17.               clock:"已经截止"
  18.           });
  19.           // timeout则跳出递归
  20.           return ;
  21.       }   
  22.       setTimeout(function(){
  23.         // 放在最后--
  24.         total_micro_second -= 10;
  25.         countdown(that);
  26.     }
  27.     ,10)
  28. }

  29. // 时间格式化输出,如3:25:19 86。每10ms都会调用一次
  30. function dateformat(micro_second) {
  31.       // 秒数
  32.       var second = Math.floor(micro_second / 1000);
  33.       // 小时位
  34.       var hr = Math.floor(second / 3600);
  35.       // 分钟位
  36.       var min = Math.floor((second - hr * 3600) / 60);
  37.       // 秒位
  38.     var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  39.     // 毫秒位,保留2位
  40.     var micro_sec = Math.floor((micro_second % 1000) / 10);
  41.     return hr + ":" + min + ":" + sec + " " + micro_sec;
  42. }

  43. Page({
  44.     data: {
  45.         clock: ''
  46.     },
  47.     onLoad: function() {
  48.         countdown(this);
  49.     }
  50. });
复制代码

经过如上优化,代码量减少一半,运行效率也高了。


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评