vue實現(xiàn)列表倒計時
更新時間:2022年09月14日 11:11:19 作者:Glowworms浠
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)列表倒計時的具體代碼,供大家參考,具體內(nèi)容如下
如圖10分鐘倒計時
在做項目的時候遇到vue列表要用到倒計時的方法,想直接在頁面中處理,使用vue過濾器。
<!DOCTYPE html> <html> <head> ?? ?<meta charset="utf-8"> ? ? <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> ? ? <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> ? ? <title>倒計時</title> ? ? <link rel="stylesheet" type="text/css" href="../css/css2021.css" /> ? ? <style> ? ? ? ? #app{ ? ? ? ? ?? ?min-height:100vh; ? ? ? ? } ? ? ? ? .doglist{ ? ? ? ? ?? ?width:93.6vw;margin:0 auto; ? ? ? ? } ? ? ? ? .dogli{ ? ? ? ? ?? ?margin-bottom:2.7vw;border-radius:2vw; ? ? ? ? } ? ? ? ? .userimg{ ? ? ? ? ? ? width:26vw;height:26vw;border-radius:2vw;margin:1.33vw; ? ? ? ? } ? ? ? ? .userimg .imgs{border-radius:2vw;} ? ? ? ? .userinfo{width:62vw;height:26vw;} ? ? ? ? .leftbox{height:20vw;} ? ? </style> </head> <body>? <div id="app" class="bg-f9f9f9 f-3-7 c-333"> ? ? <div class="doglist"> ? ? ? ? <div class="dogli align-center bg-fff" v-for="(vo,index) in list" :key="index"> ? ? ? ? ? ? <div class="userimg"> ? ? ? ? ? ? ? ? <img :src=vo.userimg alt="" class="imgs"> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="userinfo space-center"> ? ? ? ? ? ? ? ? <div class="leftbox flex-column-space f-w-b"> ? ? ? ? ? ? ? ? ? ? <div class="username line-overflow1 f-4">{{vo.name}}</div> ? ? ? ? ? ? ? ? ? ? <div class="prices">¥{{vo.price}}</div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? <div class="times">{{vo.time | limitTimeFilter}}</div> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? </div> </div> </body> <script type="text/javascript" src="../script/vant/vue.js"></script> <script type="text/javascript" src="../script/main.js"></script> <script type="text/javascript" src="../script/fastclick.js"></script> <script type="text/javascript"> ?? ?// 初始化fastclick方法 ? ? window.addEventListener('load', function () { ? ? ? ? FastClick.attach(document.body); ? ? }, false); ? ? var vm = new Vue({ ?? ??? ?el:'#app', ?? ??? ?data:{ ? ? ? ? ? ? list:[ ? ? ? ? ? ? ? ? {"id":1,"name":"多多","add_time":"1645577937","userimg":"../image/dog1.jpg","price":"1200"}, ? ? ? ? ? ? ? ? {"id":2,"name":"laughing","add_time":"1645577967","userimg":"../image/dog2.jpg","price":"1600"}, ? ? ? ? ? ? ? ? {"id":3,"name":"饅頭","add_time":"1645577997","userimg":"../image/1.jpeg","price":"600"}, ? ? ? ? ? ? ? ? {"id":4,"name":"團團","add_time":"1645577988","userimg":"../image/2.jpeg","price":"400"}, ? ? ? ? ? ? ], ? ? ? ? ? ? ticker:null, ?? ??? ?}, ? ? ? ? filters:{ ? ? ? ? ? ? //倒計時10分鐘 ? ? ? ? ? ? limitTimeFilter (val) { ? ? ? ? ? ? ? ? var rightTime = val; ? ? ? ? ? ? ? ? var showTime = ''; ? ? ? ? ? ? ? ? if (rightTime > 0) { ? ? ? ? ? ? ? ? ? ? //判斷剩余倒計時時間如果大于0就執(zhí)行倒計時否則就結(jié)束 ? ? ? ? ? ? ? ? ? ? var dd = Math.floor(rightTime / 60 / 60 / 24) < 10 ? '0' + Math.floor(rightTime / 60 / 60 / 24) : Math.floor(rightTime / 60 / 60 / 24); ? ? ? ? ? ? ? ? ? ? var hh = Math.floor((rightTime / 60 / 60) % 24) < 10 ? '0' + Math.floor((rightTime / 60 / 60) % 24) : Math.floor((rightTime / 60 / 60) % 24); ? ? ? ? ? ? ? ? ? ? var mm = Math.floor((rightTime / 60) % 60) < 10 ? '0' + Math.floor((rightTime / 60) % 60) : Math.floor((rightTime / 60) % 60); ? ? ? ? ? ? ? ? ? ? var ss = Math.floor((rightTime) % 60) < 10 ? '0' + Math.floor((rightTime) % 60) : Math.floor((rightTime) % 60); ? ? ? ? ? ? ? ? ? ? if(dd>0){ ? ? ? ? ? ? ? ? ? ? ? ? showTime = `剩余${dd}天${hh}時${mm}分${ss}秒` ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? if(hh>0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? showTime = `剩余${hh}時${mm}分${ss}秒` ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(mm>0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? showTime = `剩余${mm}分${ss}秒` ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(ss>0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? showTime = `剩余${ss}秒` ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? var showTime = ""; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? return showTime; ? ? ? ? ? ? } ?? ? ? ? ? ? }, ? ? ? ? mounted() { ? ? ? ? ? ? //這一段是防止進入頁面出去后再進來計時器重復啟動 ? ? ? ? ? ? if (this.ticker) { ? ? ? ? ? ? ? ? clearInterval(this.ticker); ? ? ? ? ? ? } ? ? ? ? ? ? this.beginTimer(); ? ? ? ? }, ?? ??? ?methods:{ ? ? ? ? ? ? beginTimer() { //這個計時器是每秒減去數(shù)組中指定字段的時間 ? ? ? ? ? ? ? ? this.ticker = setInterval(() => { ? ? ? ? ? ? ? ? ? ? for (let i = 0, len = this.list.length; i < len; i++) { ?? ? ? ? ? ? ? ? ? ? ? ?var obj = this.list[i]; ?? ? ? ? ? ? ? ? ? ? ? ?obj.time--; ?? ? ? ? ? ? ? ? ? ? ? ?this.$set(this.list,i,obj)//給list賦值 ?? ? ? ? ? ? ? ? ? ? ? ?if(obj.time<1){ ?? ? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(this.ticker); ?? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }, 1000); ? ? ? ? ? ? }, ? ? ? ? ? ? get_list(){ ? ? ? ? ? ? ?? ?//獲取time ? ? ? ? ? ? ?? ?vm.list.forEach(function(el){ ? ? ? ? ? ? ? ? ? ? ?el.time=el.add_time*1+600 - Date.parse(new Date())/1000;//頁面上要顯示的結(jié)束時間 ? ? ? ? ? ? ? ? ? ? ?vm.list.push(el); ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? }, ?? ??? ?} ?? ?}) ?? ?apiready = function(){ ? ? ? ? vm.get_list() ?? ?}; ? ?? </script> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
羊了個羊通關(guān)腳本Vue?node實現(xiàn)版本
這篇文章主要為大家介紹了羊了個羊通關(guān)腳本Vue?node實現(xiàn)版本,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理,watch和watchEffect都是vue3中的監(jiān)聽器,但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別,需要的朋友可以參考一下2022-07-07vue3+vite+ts?通過svg-sprite-loader?插件使用自定義圖標的詳細步驟
這篇文章主要介紹了vue3+vite+ts通過svg-sprite-loader插件使用自定義圖標,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認的事件方式
這篇文章主要介紹了vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認的事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10