微信小程序电商常用倒计时实现实例

2024-02-20 09:39:03 132

微信小程序电商常用倒计时实现实例

wxml文件放个text

second:{{second}}microsecond:{{micro_second}}

在js文件中调用


functioncountdown(that){
varsecond=that.data.second
if(second==0){
//console.log("TimeOut...");
that.setData({
second:"TimeOut..."
});
return;
}
vartime=setTimeout(function(){
that.setData({
second:second-1
});
countdown(that);
}
,1000)
}

Page({
data:{
second:3
},
onLoad:function(){
countdown(this);
}
});

运行验证下，从10走到1s，然后显示时间到。

于是继续将毫秒完善，注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms

/*秒级倒计时*/
functioncountdown(that){
varsecond=that.data.second
if(second==0){
that.setData({
second:"Timeout!",
micro_second:"micro_secondtoo."
});
clearTimeout(micro_timer);
return;
}
vartimer=setTimeout(function(){
that.setData({
second:second-1
});
countdown(that);
}
,1000)
}

/*毫秒级倒计时*/
//初始毫秒数，同时用作归零
varmicro_second_init=100;
//当前毫秒数
varmicro_second_current=micro_second_init;
//毫秒计时器
varmicro_timer;

functioncountdown4micro(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文件

second:{{second}}s

{{micro_second}}

如此，当秒级运行完毕时，毫秒级timer即clearTimeout，并将字本显示为'micro_secondtoo'

再添加一个countdown4micro方法，使得显示剩余0:3:1989这样形式的倒数

functiondateformat(second){
vardateStr="";
varhr=Math.floor(second/3600);
varmin=Math.floor((second-hr*3600)/60);
varsec=(second-hr*3600-min*60);//equalto=>varsec=second%60;
dateStr=hr+":"+min+":"+sec;
returndateStr;
}
//目前有2个时钟，影响性能，合并下去掉countdown，于是countdown4micro变成以下的样子：

functioncountdown4micro(that){

varloop_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，传入一个时间点，转换成总毫秒数
vartotal_micro_second=2*1000;

/*毫秒级倒计时*/
functioncountdown(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:1986。每10ms都会调用一次
functiondateformat(micro_second){
//秒数
varsecond=Math.floor(micro_second/1000);
//小时位
varhr=Math.floor(second/3600);
//分钟位
varmin=Math.floor((second-hr*3600)/60);
//秒位
varsec=(second-hr*3600-min*60);//equalto=>varsec=second%60;
//毫秒位，保留2位
varmicro_sec=Math.floor((micro_second%1000)/10);
returnhr+":"+min+":"+sec+""+micro_sec;
}

Page({
data:{
clock:''
},
onLoad:function(){
countdown(this);
}
});

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

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

微信小程序电商常用倒计时实现实例

热门推荐

随机推荐