微信小程序 倒计时组件实现代码


Posted in Javascript onOctober 24, 2016

功能: 适用于电商应用的限时团购、商品秒杀等

先来看下最终效果:

微信小程序 倒计时组件实现代码

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);
  }
});

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 #Javascript
微信小程序 购物车简单实例
Oct 24 #Javascript
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP初学者头疼问题总结
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vant实现购物车功能
2020/06/29 Javascript
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
乔迁宴答谢词
2014/01/21 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
项目经理聘任书
2014/03/29 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis