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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
ES6中的Promise代码详解
Oct 09 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 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写出自己的BLOG系统 2
2010/04/12 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python datetime 如何处理时区信息
2020/09/02 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
安全生产实施方案
2014/02/23 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
培训通知
2015/04/17 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server