微信小程序 - 倒计时

微信小程序 - 倒计时

 

微信小程序倒计时组件的实现，功能适用于电商应用的限时团购、商品秒杀等等。

 

/** 
 * 需要一个目标日期，初始化时，先得出到当前时间还有剩余多少秒
 * 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>