微信小程序倒计时
大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。
直接上代码吧
<view class="title-item">倒计时</view>
<view class="countdown-item">
<view class="countdown-title">
<block>
<text class='tui-conutdown-box'>{{days}}</text>
<text class="countdown-text">天</text>
<text class='tui-conutdown-box'>{{hours}}</text>
<text class="countdown-text">时</text>
<text class='tui-conutdown-box'>{{minutes}}</text>
<text class="countdown-text">分</text>
<text class='tui-conutdown-box'>{{seconds}}</text>
<text class="countdown-text">秒</text>
</block>
</view>
</view>
.countdown-item {
width: 100%;
height: 100rpx;
border: 0rpx solid red;
}
.countdown-title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
font-size: 40rpx;
color: #fff;
}
.tui-conutdown-box {
display: inline-block;
line-height: 50rpx;
text-align: center;
background-color: red;
color: #fff;
margin: 0 4rpx;
padding: 10rpx 20rpx;
}
.tui-countdown-bg {
background-color: #DF0101;
}
.countdown-text{
color: #000;
}
Page({
data: {
nowDate: '2021-12-22 18:00:00', //结束时间
countdown: '', //倒计时
days: '00', //天
hours: '00', //时
minutes: '00', //分
seconds: '00', //秒
},
countTime() {
let days,hours, minutes, seconds;
let nowDate = this.data.nowDate;
console.log(nowDate)
let that = this;
let now = new Date().getTime();
let end = new Date(nowDate).getTime(); //设置截止时间
// console.log("开始时间:" + now, "截止时间:" + end);
let leftTime = end - now; //时间差
if (leftTime >= 0) {
days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
minutes = Math.floor(leftTime / 1000 / 60 % 60);
seconds = Math.floor(leftTime / 1000 % 60);
seconds = seconds < 10 ? "0" + seconds : seconds
minutes = minutes < 10 ? "0" + minutes : minutes
hours = hours < 10 ? "0" + hours : hours
that.setData({
countdown: days+":"+hours + ":" + minutes + ":" + seconds,
days,
hours,
minutes,
seconds
})
// console.log(that.data.countdown)
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(that.countTime, 1000);
} else {
that.setData({
countdown: '已截止'
})
}
},
onLoad: function (options) {
this.countTime();
},
})
如图所示:
结语
关于微信小程序实现倒计时就介绍到这里 ,欢迎大家多多指教,互相交流,一起学习