微信小程序如何实现倒计时功能？

本文共计771个文字，预计阅读时间需要4分钟。

本例展示了如何用微信小程序实现倒计时功能。代码示例如下，供您参考：

javascript// pages/countdown/countdown.jsPage({ data: { endTime: '2023-12-31 23:59:59', // 结束时间 remainingTime: '00:00:00' // 剩余时间 }, onLoad: function() { this.startCountdown(); }, startCountdown: function() { const now=new Date(); const endTime=new Date(this.data.endTime); const remainingTime=endTime - now;

if (remainingTime > 0) { const hours=Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes=Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds=Math.floor((remainingTime % (1000 * 60)) / 1000);

this.setData({ remainingTime: `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` });

setTimeout(this.startCountdown, 1000); } else { this.setData({ remainingTime: '00:00:00' }); } }});

倒计时： {{remainingTime}}

css/* pages/countdown/countdown.wxss */text { font-size: 18px; color: #333;}

以上代码实现了微信小程序中的倒计时功能，包括获取当前时间、计算剩余时间、格式化时间以及定时更新显示。

本文实例为大家分享了微信小程序实现倒计时的具体代码，供大家参考，具体内容如下

大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。

直接上代码吧

<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();  }, })

如图所示：

结语

关于微信小程序实现倒计时就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。