微信小程序商城详情页秒杀倒计时功能

实现一个秒杀倒计时功能

这个功能比较简单,算是做个记录

wxml页面:

<view class="second">
  <view class="second_left"></view>
  <view class="second_right">
    <text>距结束还剩</text>
    <view class="second_right_time">
      <text>{{timeObj.hour}}</text>
       <view>:</view>
      <text>{{timeObj.minute}}</text>
      <view>:</view>
      <text>{{timeObj.second}}</text>
    </view>
  </view>
</view>

wxss页面:只做了右边部分的样式,左边的还没写出来

.second{
  height: 120rpx;
  display: flex;
  box-sizing: border-box;
}
.second_left{
  width: 60%;
  background-color: #DB315D;
}
.second_right{
   box-sizing: border-box;
  width: 40%;
  background-color: #F7F7F7;
  color: #404040;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.second_right_time{
  margin-top: 10rpx;
  display: flex;
}
.second_right_time>text{
  display: block;
  width: 40rpx;
  height: 40rpx;
  color: #E93B3D;
  font-size: 30rpx;
  border: 3rpx solid #CCCCCC;
  text-align: center;
  line-height: 40rpx;
  border-radius: 8rpx;
}
.second_right_time>view{
   color: #E93B3D;
   margin: 0 10rpx;
   font-size: 30rpx;
}

接下来是有关于js的代码实现了:

Page({

 
  data: {
   
    timeObj: {  //初始化时间格式,免得用户进入页面显示空白
      hour: '00',
      minute: '00',
      second: '00',
    }
  },
    onShow(){  //在小程序onShow这个生命周期函数中调用函数 ,不用onLoad是因为可能用户会进入购买页面再返回详情页,这样onLoad就不能实时读取本地时间
        this.antitime()
    },
  antitime() {
    //获取当前日期
    let nowDate = new Date();
    //截止日期
    let endDate = new Date('2019/12/16 15:55:00'); 
    
    if (nowDate > endDate) { //超时,活动结束
      console.log('进来了')
      clearTimeout(timer) //关闭定时器 ,以下代码不执行
      return
    }
    let diffTime = parseInt((endDate.getTime() - nowDate.getTime()) / 1000);
    //将时间转化为时 分 秒
    let hour, minute, second;

    second = diffTime % 60; //秒
    minute = parseInt(diffTime / 60) % 60;
    hour = parseInt(diffTime / 60 / 60);

    // var time = '剩余：' + hour + '小时' + minute + '分钟' + second + '秒';
    let time = '剩余：' + this.zero(hour) + '小时' + this.zero(minute) + '分钟' + this.zero(second) + '秒'; //打印时间
    console.log(time)
    let timeObj = { //补0操作
      hour: this.zero(hour),
      minute: this.zero(minute),
      second: this.zero(second),
      day: this.zero(day)
    }
    console.log(timeObj)
    this.setData({ //更新
      timeObj
    })
    let timer = setTimeout(this.antitime, 1000); //开启定时器
  },
  zero(value) { //补0操作
    return value < 10 ? '0' + value : value;
  },
})

增加天数倒计时

  
    //获取当前日期
    let nowDate = new Date();
    //截止日期
    let endDate = new Date(this.data.activityTime);
    if (nowDate > endDate) { //超时,活动结束
    
      clearTimeout(timer) //关闭定时器 ,以下代码不执行
      return
    }
    let diffTime = parseInt((endDate.getTime() - nowDate.getTime()) / 1000);
    //将时间转化为时 分 秒
    let day,hour, minute, second;
    day = parseInt(diffTime / 60 / 60 / 24) ; //天
    hour = parseInt(diffTime / 60 / 60 % 24); //小时
    minute = parseInt(diffTime / 60) % 60; //分钟
    second = diffTime % 60; //秒
   
   
    // console.log(day)
    // var time = '剩余：' + hour + '小时' + minute + '分钟' + second + '秒';
    let time = '剩余：'+ day + "天"+ this.zero(hour) + '小时' + this.zero(minute) + '分钟' + this.zero(second) + '秒'; //打印时间
    console.log(time)
    let timeObj = { //补0操作
      hour: this.zero(hour),
      minute: this.zero(minute),
      second: this.zero(second)
    }
    // console.log(timeObj)
    this.setData({ //更新
      timeObj
    })

    let timer = setTimeout(this.antitime, 1000); //开启定时器
    

总结:因为这次功能比较简单,所以直接写在了主文件中了