On the rendering

In fact, it is very simple, just need to know the end time, and obtain the current time, and then calculate the time difference and the number of seconds, set the timer, and finally leave the page to clear the timer

The HTML code

<view class=" daojiishi -container"> <view> There is still </view> <view class="time-content"> <view Class = "item" > < view > {{day}} < / view > day < / view > < the view class = "item" > < view > {{hour}} < / view > when < / view > < the view Class = "item" > < view > {{you}} < / view > points < / view > < the view class = "item" > < view > {{seconds}} < / view > s < / view > < view > < / view >Copy the code

Js code

Page({ data: { day: '', hour: '', minutes: '', seconds: "'}, // countdown 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 = 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 }) }, Daojishi () daojishi() daojishi() daojishi() daojishi() daojishi() daojishi() daojishi() daojishi() daojishi() daojishi())Copy the code

CSS code

.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: rgba(248, 219, 183, 0.795); color: #fff; font-size: 25rpx; text-align: center; line-height: 45rpx; margin: 0 10rpx; }Copy the code