vue实现商城秒杀倒计时功能

vue实现商城秒杀倒计时功能，效果图如下所示：

template代码

<div>
 <div class="component-wrapper" id="flash-sale">
  <div class="sale-header">
   <div class="countdown-zone">
    <div class="countdown-prefix">限時快搶</div>
    <div class="countdown pure-css-countdown active">
      <div class="digits-wrapper hours">11</div>
      <div class="digits-seperator">月</div>
      <div class="digits-wrapper minutes">02</div>
      <div class="digits-seperator">日</div>
      <div class="digits-seperator">——</div>
      <div class="digits-wrapper seconds">11</div>
      <div class="digits-seperator">月</div>
      <div class="digits-wrapper">03</div>
      <div class="digits-seperator">日</div>
    </div>
   </div>
  </div>
 </div>
</div>

script代码

export default {
 data() {
   return {
  hou:0,
  min:0,
  sec:0,
  ssec:0,
  endTime:'',
  disprArr:[],
   }
 },
 created(){
   let that=this
   that.time()
 },
 methods:{
   time(){
  var that=this
  var interval = setInterval(function timestampToTime(){

var date=(new Date(结束的时间戳)) - (new Date());
  //new Date当前的时间戳，也可以换成自定义的时间戳
  if (date > 0) {
    let time = date / 1000;
    // 获取时、分、秒,毫秒
    that.hou = parseInt((time ％ (60 * 60 * 24)) / 3600)<10?('0'+parseInt((time ％ (60 * 60 * 24)) / 3600)):parseInt((time ％ (60 * 60 * 24)) / 3600)
    that.min = parseInt(((time ％ (60 * 60 * 24)) ％ 3600) / 60)<10?('0'+parseInt(((time ％ (60 * 60 * 24)) ％ 3600) / 60)):parseInt(((time ％ (60 * 60 * 24)) ％ 3600) / 60);
    that.sec = parseInt(((time ％ (60 * 60 * 24)) ％ 3600) ％ 60)<10?('0'+parseInt(((time ％ (60 * 60 * 24)) ％ 3600) ％ 60)):parseInt(((time ％ (60 * 60 * 24)) ％ 3600) ％ 60);
    that.ssec= parseInt(((date ％ (60 * 60 * 24)) ％ 3600) / 60)％10
   } else {
    //活动已结束，全部设置为'00'
    // console.log("aaa")
     that.day="00",
     that.hou="00",
     that.min="00",
     that.sec="00"
   }
 },100)
 }
 },
};

总结

以上所述是小编给大家介绍的vue实现商城秒杀倒计时功能网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：https://blog.csdn.net/h5_since/article/details/102893803