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

这篇文章主要介绍“微信小程序如何实现倒计时”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序如何实现倒计时”文章能帮助大家解决问题。

直接上代码吧

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

如图所示：

关于“微信小程序如何实现倒计时”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。