上效果图
其实很简单,只需要知道结束时间,并获取当前时间,然后计算时间差和相差秒数,设置定时器,最后在离开页面清除定时器即可
html
<view class="daojishi-container">
<view>距离2021年春节还有</view>
<view class="time-content">
<view class="item"><view>{{day}}</view>天</view>
<view class="item"><view>{{hour}}</view>时</view>
<view class="item"><view>{{minutes}}</view>分</view>
<view class="item"><view>{{seconds}}</view>秒</view>
</view>
</view>
js
Page({
data: {
day: '',
hour: '',
minutes: '',
seconds: '',
},
// 倒计时
daojishi(){
//获取当前时间
var nowDate = new Date()
var endDate = new Date('2021-01-01 00:00:00')
var now = nowDate.getTime()
var end = endDate.getTime()
//计算时间差、相差秒数
var time = end - now
time /= 1000
// 计算时间
let day, hour, minutes, seconds
day = Math.floor(time / 60 / 60 / 24)
hour = Math.floor(time / 60 / 60 % 24)
minutes = Math.floor(time / 60 % 60)
seconds = Math.floor(time % 60)
this.setData({
day,
hour,
minutes,
seconds
})
},
onLoad(){
//最后记得在页面离开或者卸载的时候清除定时器
setInterval(this.daojishi, 1000)
this.daojishi()
},
})
css
.daojishi-container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.time-content{
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
}
.item{
display: flex;
justify-content: center;
align-items: center;
}
.time-content view view{
width: 55rpx;
height: 45rpx;
border-radius: 10rpx;
background-color: rgba(248, 219, 183, 0.795);
color: #fff;
font-size: 25rpx;
text-align: center;
line-height: 45rpx;
margin: 0 10rpx;
}