vue中多个倒计时实现代码实例


Posted in Javascript onMarch 27, 2019

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

vue中多个倒计时实现代码实例

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

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

拿我自己的vue项目举个例

<!-- template -->
 <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>

需要注意的是this.$set(obj,"djs",InitTime(obj.time)代码,在一个对象已经有了的情况下,假如此时object里没有djs这个元素,直接object.djs = "要赋的值"这样的做法是不正确的,可能会赋值成功,但是会出现很多奇怪的问题,推荐用

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

以上所述是小编给大家介绍的vue中多个倒计时实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 #Javascript
JavaScript惰性载入函数实例分析
Mar 27 #Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 #Javascript
详解JS浏览器事件循环机制
Mar 27 #Javascript
详解如何更好的使用module vuex
Mar 27 #Javascript
原生js实现获取form表单数据代码实例
Mar 27 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
5.PHP的其他功能
2006/10/09 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
限制文本字节数js代码
2007/03/06 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python3实现名片管理系统
2020/11/29 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python 串行执行和并行执行实例
2020/04/30 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
Django中template for如何使用方法
2021/01/31 Python
大学生专科毕业生自我评价
2013/11/17 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL