微信小程序 倒计时
2017-01-10 00:26
411 查看
项目需要做倒计时.
黄大哥的轮子.拿来用用.表示很顺手.
![](http://img.blog.csdn.net/20170110001729067?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzEzODMzNDU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
代码:
1.index.wxml
2.index.js
注释很清楚了.不多说.
demo下载地址
原文地址 我的博客,欢迎评论!
CSDN微信小程序开发专栏,欢迎关注!
黄大哥的轮子.拿来用用.表示很顺手.
代码:
1.index.wxml
<text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;"> {{clock}} {{micro_second}} </text>
2.index.js
注释很清楚了.不多说.
/** * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止 */ // 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数 var total_micro_second = 36 * 60 * 60 * 1000; /* 毫秒级倒计时 */ function count_down(that) { // 渲染倒计时时钟 that.setData({ clock: date_format(total_micro_second) }); if (total_micro_second <= 0) { that.setData({ clock: "已经截止" }); // timeout则跳出递归 return; } setTimeout(function () { // 放在最后-- total_micro_second -= 10; count_down(that); }, 10) } // 时间格式化输出,如03:25:19 86。每10ms都会调用一次 function date_format(micro_second) { // 秒数 var second = Math.floor(micro_second / 1000); // 小时位 var hr = Math.floor(second / 3600); // 分钟位 var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60)); // 秒位 var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10)); return hr + ":" + min + ":" + sec + " " + micro_sec; } // 位数不足补零 function fill_zero_prefix(num) { return num < 10 ? "0" + num : num } Page({ data: { clock: '' }, onLoad: function () { count_down(this); } });
demo下载地址
原文地址 我的博客,欢迎评论!
CSDN微信小程序开发专栏,欢迎关注!
相关文章推荐
- 微信小程序 倒计时组件实现代码
- Android中微信小程序支付倒计时功能
- 微信小程序小工具之下发短信验证码倒计时
- 微信小程序获取验证码倒计时时间
- 微信小程序之发送短信倒计时功能
- 微信小程序倒计时组件
- 微信小程序 —— 验证码获取倒计时效果
- 微信小程序开发--倒计时60s获取验证码
- 微信小程序开发(3)--倒计时60获取验证码
- 微信小程序倒计时功能
- 微信小程序 倒计时
- 微信小程序电商常用倒计时实现实例
- 微信小程序 倒计时
- 微信小程序开发--倒计时60s获取验证码
- 微信小程序倒计时组件开发
- 微信小程序-支付倒计时
- 微信小程序倒计时组件更新,加入时间校准、多计时器功能
- 微信小程序 button内多行文字垂直居中、短信倒计时
- 微信小程序实现倒计时60s获取验证码
- 微信小程序倒计时功能实现代码