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

本文实例为大家分享了微信小程序实现倒计时的具体代码，供大家参考，具体内容如下
大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。
直接上代码吧

倒计时{{days}}天{{hours}}时{{minutes}}分{{seconds}}秒

.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 : secondsminutes = minutes < 10 ? "0" + minutes : minuteshours = hours < 10 ? "0" + hours : hoursthat.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(); },})

如图所示：