vue中多个倒计时实现

下面给出一个效果图，我今天要说的就是实现下图这种多个倒计时

很多时候我们做只有一个倒计时的情况比较多，比较简单只需要一个定时器setInterval，算出来赋赋值就好，

但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了

拿我自己的vue项目举个例

<div v-for="(item,index) in list" :key="index" class="act_item">
<h1>{{ item.title }}</h1>
<img :src="item.pic" alt="">
<div class="act_info">
<h2><span>{{ item.count }}</span>个视频</h2>
<div class="time">倒计时：{{ item.djs }}</div>
<div class="clear"></div>
</div>
</div>
<script>
function InitTime(endtime){
var dd,hh,mm,ss = null;
var time = parseInt(endtime) - new Date().getTime();
if(time<=0){
return '结束'
}else{
dd = Math.floor(time / 60 / 60 / 24);
hh = Math.floor((time / 60 / 60) % 24);
mm = Math.floor((time / 60) % 60);
ss = Math.floor(time % 60);
var str = dd+"天"+hh+"小时"+mm+"分"+ss+"秒";
return str;
}
}
export default {
data () {
return {
active: 'tab-container1',
pinkFont:true,
// 上拉刷新、下拉加载
allLoaded: false, //如果为true,禁止上拉刷新
autoFill: false, //取消自动填充，
list: [],
}
},
created() {
var ssss = [
{"title": "小心愿，大梦想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"1525293470350"},
{"title": "杭州国际时装周童模招募","pic":"../../assets/img/new/act2.jpg","count":"36","time":"1525293470350"},
{"title": "怪兽bobo全线代言火爆杭城的联名秀招募童模啦！","pic":"../../assets/img/new/act3.jpg","count":"74","time":"1529253270350"},
{"title": "汉风唐韵、别","pic":"../../assets/img/new/act2.jpg","count":"266","time":"1525753270350"},
{"title": "听说你们想和明星超模同台“PK”？","pic":"../../assets/img/new/act1.jpg","count":"97","time":"1525253270450"},
];
ssss.map( (obj,index)=>{
this.$set(
obj,"djs",InitTime(obj.time)
);
})
this.list = ssss;
},
mounted() {
setInterval( ()=> {
for (var key in this.list) {
var aaa = parseInt( this.list[key]["time"] );
var bbb = new Date().getTime();
var rightTime = aaa - bbb;
if (rightTime > 0) {
var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
var mm = Math.floor((rightTime / 1000 / 60) % 60);
var ss = Math.floor((rightTime / 1000) % 60);
}
this.list[key]["djs"] = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
}
}, 1000);

},
methods: {

}
}
</script>
需要注意的是那个标红的代码，在一个对象已经有了的情况下，假如此时object里没有djs这个元素，直接object.djs = "要赋的值"这样的做法是不正确的，可能会赋值成功，但是会出现很多奇怪的问题，推荐用

this.$set(object,'djs','要赋的值');

vue中多个倒计时实现相关推荐

vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
vue中通过定时器设置倒计时，5秒倒计时
前言:有时候,在项目中,我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现. 一.设置div显示倒计时数字 <div class="countCircle">& ...
vue中实现60秒倒计时
vue中实现60秒倒计时 <span>{{count}} s</span> data中: data(){return{show: true,count: '',timer: n ...
在vue中制作倒计时功能
在vue中制作简单的倒计时倒计时的核心是通过递归来时实现定时器所以在方法中使用setTimeout 就行了 <script src="https://cdn.jsdelivr.n ...
vue中倒计时(日，时，分，秒)的计算和当前时间计时读秒
在了解倒计时原理之前先了解一些时间戳例如:12小时转换为时间戳 12✖️60✖️60✖️1000 第一个60单位分钟第二个60单位是秒第三个1000单位毫秒未来某天的倒计时 <!DOCT ...
记一次 Vue 移动端活动倒计时优化
前言通常写倒计时效果,用的是 setInterval,但这会引发一些问题,最常见的问题就是定时器不准. 如果只是普通的动画效果,倒也无所谓,但倒计时这种需要精确到毫秒级别的,就不行了,否则活动都结束 ...
原生js 或vue实现60分钟倒计时案例
使用场景类似于订单倒计时,或答题倒计时,代码如下在Vue中封装了如下的方法 data () {return {countdownTxt:'',//要显示的倒计时文案};}, // 定义一个方法方 ...
【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
html使用vue实现秒表,vue中使用时间计时器
vue中我们会使用各种倒计时的方法这里就为大家提供一个计时器的方法, 话不多说代码走起: 点击暂停重置继续 {{str}} export default { name:"homepag ...

vue中多个倒计时实现

vue中多个倒计时实现相关推荐

最新文章

热门文章