欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能

 更新時(shí)間:2019年12月12日 09:46:31   作者:since  
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,效果圖如下所示:

template代碼

<div>
  <div class="component-wrapper" id="flash-sale">
   <div class="sale-header">
    <div class="countdown-zone">
     <div class="countdown-prefix">限時(shí)快搶</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(結(jié)束的時(shí)間戳)) - (new Date());
   //new Date當(dāng)前的時(shí)間戳,也可以換成自定義的時(shí)間戳
   if (date > 0) {
     let time = date / 1000;
     // 獲取時(shí)、分、秒,毫秒
     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 {
     //活動(dòng)已結(jié)束,全部設(shè)置為'00'
     // console.log("aaa")
      that.day="00",
      that.hou="00",
      that.min="00",
      that.sec="00"
    }
  },100)
  }
  },
};

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • 使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟

    使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟

    本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • vue2老項(xiàng)目中node-sass更換dart-sass的操作方法

    vue2老項(xiàng)目中node-sass更換dart-sass的操作方法

    這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-07-07
  • vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程

    vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程

    這篇文章主要介紹了vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • vue3封裝自定義v-model的hooks示例詳解

    vue3封裝自定義v-model的hooks示例詳解

    這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位

    詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位

    這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue.js指令和組件詳細(xì)介紹及實(shí)例

    vue.js指令和組件詳細(xì)介紹及實(shí)例

    這篇文章主要介紹了vue.js功能介紹 - 指令,組件詳細(xì)介紹及實(shí)例,詳細(xì)的介紹了指令和組件的用法,有興趣的可以了解一下。
    2017-04-04
  • Vue+elementui 實(shí)現(xiàn)復(fù)雜表頭和動(dòng)態(tài)增加列的二維表格功能

    Vue+elementui 實(shí)現(xiàn)復(fù)雜表頭和動(dòng)態(tài)增加列的二維表格功能

    這篇文章主要介紹了Vue+elementui 實(shí)現(xiàn)復(fù)雜表頭和動(dòng)態(tài)增加列的二維表格功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • VUE中data配置項(xiàng)詳細(xì)解析

    VUE中data配置項(xiàng)詳細(xì)解析

    data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能

    Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能

    這篇文章主要給大家介紹了Vue自定義指令實(shí)現(xiàn)卡片翻轉(zhuǎn)功能的代碼示例,文章通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的參幫助,需要的朋友可以參考下
    2023-11-11

最新評(píng)論