小程序教程

微信小程序倒计时组件

字号+ 作者： 来源： 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. }

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

运行验证下，从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. }

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

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

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

wxml文件

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

  3. <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) {

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

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

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

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

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

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

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

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

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

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

  48. Page({
  49.     data: {
  50.         clock: ''
  51.     },
  52.     onLoad: function() {
  53.         countdown(this);
  54.     }
  55. });
复制代码

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


　

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

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

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

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

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习