奈寻味导航网 » 文章资讯 » 微信小程序实现倒计时功能

微信小程序实现倒计时功能

2023-07-11 12:21:02 300

本文实例为大家分享了微信小程序实现倒计时功能的具体代码，供大家参考，具体内容如下

商城商品中的活动倒计时

varendTime=newDate().getTime()+24*3600*1000*4;

Page({

/**
*页面的初始数据
*/
data:{
headerImgs:postData.postSwiperData,
countDownDay:'',
countDownHour:'',
countDownMinute:'',
countDownSecond:'',
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varid=options.id;//页面跳转传过来的值
},
onReady:function(){
varthat=this;

countdown(that);
}
})

functioncountdown(that){
varNowTime=newDate().getTime();
varEndTime=endTime;
vartotal_micro_second=EndTime-NowTime||[];
console.log('当前时间'+NowTime+'\n剩余时间：'+total_micro_second);
//渲染倒计时时钟
that.setData({
countDownDay:dateformaDay(total_micro_second),
countDownHour:dateformaHour(total_micro_second),
countDownMinute:dateformaMinute(total_micro_second),
countDownSecond:dateformaSecondMinute(total_micro_second),
});
//if(total_micro_second<=0){
//that.setData({
//clock:"已经截止"
//});
////return;
//}
setTimeout(function(){
total_micro_second-=1000;
countdown(that);
},1000)
}

//时间格式化输出
functiondateformaDay(micro_second){
//总秒数
varsecond=Math.floor(micro_second/1000);
//天数
varday=Math.floor(second/3600/24);
returnday;
}

functiondateformaHour(micro_second){
//总秒数
varsecond=Math.floor(micro_second/1000);
//小时
varhr=Math.floor(second/3600%24);
returnhr;
}

functiondateformaMinute(micro_second){
//总秒数
varsecond=Math.floor(micro_second/1000);
//分钟
varmin=Math.floor(second/60%60);
returnmin;
}

functiondateformaSecondMinute(micro_second){
//总秒数
varsecond=Math.floor(micro_second/1000);
//秒
varsec=Math.floor(second%60);
returnsec;
}

wxml



距活动结束还剩

{{countDownDay}}
天
{{countDownHour}}
时
{{countDownMinute}}
分
{{countDownSecond}}
秒

wxss

.time-container{
display:flex;
flex-direction:row;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
align-items:center;
}

.time-number{
background:white;
color:red;
width:18px;
height:18px;
font-size:12px;
border-radius:3px;
display:flex;
align-items:center;
justify-content:center;
}

.time-text{
font-size:10px;
color:white;
margin:3px;
}

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现倒计时功能

热门推荐

随机推荐