当前位置 主页 > 服务器问题 > Linux/apache问题 >

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

    栏目:Linux/apache问题 时间:2019-12-13 10:40

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

    template代码

    <div>
      <div class="component-wrapper" >
       <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实现商城秒杀倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对IIS7站长之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!