微信小程序如何制作倒计时功能？

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

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

view

修改后的内容为：“本文以实例方式分享了微信小程序实现倒计时的代码，供大家参考。具体内容如下：大家好，今天我们来学习一下倒计时的实现。代码如下：

view

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

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

直接上代码吧

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

如图所示：

结语

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

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