微信小程序 - 倒计时
微信小程序倒计时组件的实现,功能适用于电商应用的限时团购、商品秒杀等等。
/** * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止 */ // 定义一个总毫秒数,以十小时为例。 var total_micro_second = 36000 * 1000; // 毫秒级倒计时 function count_down(that) { that.setData({ clock : date_format(total_micro_second) }); if (total_micro_second <= 0) { that.setData({ clock : "时间已经截止" }); return } setTimeout(function(){ total_micro_second -= 10; count_down(that); },10) } // 时间格式化输出,如:09:59: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)); 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); } });
<text style="display:block;text-align:center;font-size:30px;color:#f60;"> {{clock}} </text>