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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: