小程序如何实现简单的倒计时秒杀效果

小程序实现电商秒杀倒计时效果+样式

wxml:

  
    
      
      
      限时秒购
       
      
        
          {{qgdjs_jo.day}}
          :
          {{qgdjs_jo.hour}}
          :
          {{qgdjs_jo.min}}
          :
          {{qgdjs_jo.sec}}
         
        倒计时
       
     
    
      
        
        
          ￥{{item.price}}
          ￥{{item.old_price}}
         
       
     
  
  
  
  
  
  
  
  
  
  
  
  

wxcss:

/* 限时抢购 */
.purchase{
  width: 100%;
  margin-top: 15rpx;
  background: #fff;
  padding-bottom: 20rpx;
}
.purchase .header{
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  margin: auto;
  overflow: auto;
}
.purchase .header .title{
  float: left;
  font-size: 32rpx;
  line-height: 100rpx;
  color: #333333;
}
.purchase .header .title .word{ 
  float: left;
  line-height: 100rpx;
}
.purchase .header .title image{
  width: 40rpx;
  margin-top: 30rpx;
  line-height: 100rpx;
  margin-right: 20rpx;
  float: left;
}
.purchase .header .time{
  float: right;
  overflow: auto;
}
.purchase .header .time .left{
  float: right;
  font-size: 28rpx;
  color: #333333;
  margin-right: 10rpx;
}
.purchase .header .time .daojishi{
  float: right;
  line-height: 100rpx;
}
.purchase .daojishi .num,.purchase .daojishi .bel{
  float: left;
}
.purchase .daojishi .num{
  width: 38rpx;
  height: 35rpx;
  line-height: 35rpx;
  background: #f6f6f6;
  color: #fc4353;
  font-size: 30rpx;
  margin: 32rpx 5rpx 0rpx 5rpx;
}

js:

// 获取应用实例
const app = getApp()

Page({
  data: {
    jssj: "2021-02-01 00:00:00",
    timer: "",
    qgdjs_jo:{ day: '00', hour: '10', min: '08', sec: '08' },
  },
  onLoad() {
    var that = this;
    that.countDown();
  },
  //倒计时插件
  countDown: function(){
    let that = this;

    that.setData({
      timer: setInterval(function(){
        var lefttime = parseInt((new Date(that.data.jssj.replace(/-/g,"/")).getTime() - new Date().getTime()));
        if(lefttime < 0){
          that.setData({
            qgdjs_jo:{ day: "00" ,hour: "00" , min:"00",sec:"00" }
          })
          clearInterval(that.data.timer);
        }
        var d = parseInt(lefttime / 1000 / 3600 / 24); //天
        var h = parseInt(lefttime / 1000 / 3600 % 24); //时
        var m = parseInt(lefttime / 1000 / 60 % 60); //分
        var s = parseInt(lefttime / 1000 % 60); //秒

        d < 10 ? d = "0" +d : d;
        h < 10 ? h = "0" +h : h;
        m < 10 ? m = "0" +m : m;
        s < 10 ? s = "0" +s : s;

        that.setData({
          qgdjs_jo:{ day: d ,hour: h , min:m,sec:s }
        })
      })
    })
  },
})