您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 小程序如何实现简单的倒计时秒杀效果

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

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


QQ截图20210125235940.png

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

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了