vue实现列表倒计时
更新时间：2022年09月14日 11:11:19 作者：Glowworms浠
这篇文章主要为大家详细介绍了vue实现列表倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现列表倒计时的具体代码，供大家参考，具体内容如下
如图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就执行倒计时否则就结束
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() { //这个计时器是每秒减去数组中指定字段的时间
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;//页面上要显示的结束时间
vm.list.push(el);
});
},
}
})
apiready = function(){
vm.get_list()
};
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue3中watch和watchEffect实战梳理，watch和watchEffect都是vue3中的监听器，但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别，需要的朋友可以参考一下2022-07-07
这篇文章主要为大家详细介绍了vue实现树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要为大家详细介绍了vue实现手机端省市区区域选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最近一直在做的项目是Vue2搭建的项目，本文主要介绍了Vue全局自定义指令Modal拖拽的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue-cli中打包图片路径错误的解决方法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下2022-08-08
最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤
这篇文章主要介绍了vue3+vite+ts通过svg-sprite-loader插件使用自定义图标,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue监听浏览器的后退和刷新事件,阻止默认的事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论