小程序普通倒计时功能（秒杀、活动倒计时）

上效果图

其实很简单，只需要知道结束时间，并获取当前时间，然后计算时间差和相差秒数，设置定时器，最后在离开页面清除定时器即可

html代码

<view class="daojishi-container">
    <view>距离2021年春节还有</view>

    <view class="time-content">
      <view class="item"><view>{{day}}</view>天</view>
      <view class="item"><view>{{hour}}</view>时</view>
      <view class="item"><view>{{minutes}}</view>分</view>
      <view class="item"><view>{{seconds}}</view>秒</view>
    </view>
  </view>

js代码

Page({
  data: {
    day: '',
    hour: '',
    minutes: '',
    seconds: '',
  },

  // 倒计时
  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 = 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
    })
  },
  onLoad(){
  	//最后记得在页面离开或者卸载的时候清除定时器
    setInterval(this.daojishi, 1000)
    this.daojishi()
  },
  
 })

css代码

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