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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
javascript使用location.search的示例
Nov 05 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python模拟事件触发机制详解
2018/01/19 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python版百度语音识别功能
2019/07/09 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
焊接专业毕业生求职信
2013/10/01 职场文书
小学二年级评语
2014/04/21 职场文书
食品安全汇报材料
2014/08/18 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
继承公证书格式
2015/01/26 职场文书
国庆庆典邀请函
2015/02/02 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
情感电台广播稿
2015/08/18 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Golang 遍历二叉树
2022/04/19 Golang