<强>微信小程序电商常用倒计时实现实例
<强> wxml文件放个文本
在js文件中调用
函数倒计时(){
var=that.data.second第二
如果(第二==0){//控制台。日志(“时间…”);
that.setData ({
第二:“时间……”
});
返回;
}
var时间=setTimeout(函数(){
that.setData ({
第二:第二- 1
});
倒计时(,);
}
, 1000)
}
页面({
数据:{
第二:3
},>/*秒级倒计时*/函数倒计时(){
var=that.data.second第二
如果(第二==0){
that.setData ({
第二:“出去!”
micro_second:“micro_second。”
});
clearTimeout (micro_timer);
返回;
}
var计时器=setTimeout(函数(){
that.setData ({
第二:第二- 1
});
倒计时(,);
}
, 1000)
}/*毫秒级倒计时*///初始毫秒数,同时用作归零
var micro_second_init=100;//当前毫秒数
var micro_second_current=micro_second_init;//毫秒计时器
var micro_timer;
函数countdown4micro () {
如果(micro_second_current & lt;=0) {
micro_second_current=micro_second_init;
}
micro_timer=setTimeout(函数(){
that.setData ({
micro_second: micro_second_current - 1
});
micro_second_current——;
countdown4micro (,);
}
, 10)
}
页面({
数据:{
第二:2
micro_second: micro_second_init
},>
& lt;文本祝辞;第二:{{二}}s
& lt; text> {{micro_second}} & lt;/text>
之前
如此,当秒级运行完毕时,毫秒级定时器即clearTimeout,并将字本显示为“micro_second太”
再添加一个countdown4micro方法,使得显示剩余0:3:19 89这样形式的倒数
函数dateformat(二){
var dateStr=" ";
var hr=数学。地板(秒/3600);
var min=数学。地板((第二人力资源* 3600)/60);
var秒=(第二小时* 3600分* 60);//==比;var秒=第二% 60;
dateStr=人力资源+“:”+分钟+”:“+秒;
返回dateStr;
}//目前有2个时钟,影响性能,合并下去掉倒计时,于是countdown4micro变成以下的样子:
函数countdown4micro () {
var loop_second=数学。地板(loop_index/100);//得知经历了
如果(cost_micro_second !=loop_second) {//赋予新值
cost_micro_second=loop_second;//总秒数减1
total_second——;
}//每隔一秒,显示值减1;渲染倒计时时钟
that.setData ({
钟:dateformat (total_second - 1)
});
如果(total_second==0) {
that.setData ({//micro_second:“”,
钟:“时间到”
});
clearTimeout (micro_timer);
返回;
}
如果(micro_second_current & lt;=0) {
micro_second_current=micro_second_init;
}
micro_timer=setTimeout(函数(){
that.setData ({
micro_second: micro_second_current - 1
});
micro_second_current——;//放在最后+ +,不然时钟停止时还有10毫秒剩余
loop_index + +;
countdown4micro (,);
}
, 10)
}
之前
如此这般,毫秒与时分秒是分别运行渲染的,再次改造,程序可读性更好.dateformat针对于毫秒操作,而不接受秒为数,同时还省却了计算100次为1 s的运算
/* *
*需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒
* 1。将秒数换成格式化输出为XX天XX小时XX分钟XX秒XX
* 2 .提供一个时钟,每10 ms运行一次,渲染时钟,再总数女士自减10
* 3 .剩余的秒次为零时,回报,给出建议提示说,已经截止
*///定义一个总毫秒数,以一分钟为例.TODO,传入一个时间点,转换成总毫秒数
var total_micro_second=2 * 1000;/*毫秒级倒计时*/函数倒计时(){//渲染倒计时时钟
that.setData ({
钟:dateformat (total_micro_second)
});
如果(total_micro_second & lt;=0) {
that.setData ({
钟:“已经截止”
});//超时则跳出递归
返回;
}
setTimeout(函数(){//放在最后—
total_micro_second -=10;
倒计时(,);
}
, 10)
}//时间格式化输出,如3:25:19 86。每10毫秒都会调用一次
函数dateformat (micro_second) {//秒数
var=数学。地板(micro_second/1000);//小时位
var hr=数学。地板(秒/3600);//分钟位
var min=数学。地板((第二人力资源* 3600)/60);//秒位
var秒=(第二小时* 3600分* 60);//==比;var秒=第二% 60;//毫秒位,保留2位
var micro_sec=数学。地板((micro_second % 1000)/10);
返回人力资源部+“:”+分钟+”:“+秒+ " " + micro_sec;
}
页面({
数据:{
钟:“
},
onLoad:函数(){
倒计时(这个);
}
});
