微信小程序倒计时功能
1、在wxml页面中写入倒计时功能代码,设计倒计时功能。依次从天、时、分、秒写入代码。
<view class='body'> <!--设置倒计时格式-->
<text class='time1'>距结束</text>
<text class='text1'>{{qgdjs_jo.day}}</text>
<text class='time1'>天</text>
<text class='text1'>{{qgdjs_jo.hour}}</text>
<text class='time1'>时</text>
<text class='text1'>{{qgdjs_jo.min}}</text>
<text class='time1'>分</text>
<text class='text1'>{{qgdjs_jo.sec}}</text>
<text class='time1'>秒</text>
</view>
2、在wxss里面设置计时器的样式
.body{
display: flex;
width: 100%;
align-items: center;
font-size: 12px;
flex-direction: row;
justify-content: flex-end;
}
.time1{
color: #f02a46;
padding-right: 2px;
padding-left: 2px;
}
.text1{
color: #fff;
background: #f02a46;
border-radius: 5px;
padding: 2px;
}
2、在data中定义倒计时中要用到的变量。结束时间(jssj),定时器名称等,结束时间一般都是从后台获取的。
Page({
data: {
jssj:"2020-07-24 07:23:00", //设置结束时间
timer:"", //倒计时定时器名称
qgdjs_jo:{ day : "00", hour: "00", min: "00", sec: "00"} //抢购倒计时
},
3、然后编写计时器函数,主要用到了定时器的功能。
countDown:function(){
let that = this;
that.setData({
timer: setInterval(function(){
var lefttime = parseInt((new Date(that.data.jssj.replace(/-/g,"/")).getTime() - new Date().getTime()));
if(lefttime <= 0) {
that.setData({
qgdjs_jo:{day:"00",hour:"00",min:"00",sec:"00"}
})
clearInterval(that.data.timer);
return;
}
var d = parseInt(lefttime /1000 /3600 /24); //天数
var h = parseInt(lefttime / 1000 / 3600 % 24); //小时
var m = parseInt(lefttime / 1000 / 60 % 60); //分钟
var s = parseInt(lefttime / 1000 % 60); //当前的秒
d < 10 ? d = "0" + d : d;
h < 10 ? h = "0" + h : h;
m < 10 ? m = "0" + m : m;
s < 10 ? s = "0" + s : s;
that.setData({
qgdjs_jo:{ day: d, hour: h, min: m, sec:s }
})
},1000)
})
},
然后 调用计时器函数,一般都是在onload中执行。
onLoad: function () {
var that = this;
that.countDown();
},
然后就可以了