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

 更新时间:2019年03月27日 14:17:58   作者:jw19950424  
这篇文章主要介绍了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中多个倒计时实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 简单谈谈Vue中的diff算法

    简单谈谈Vue中的diff算法

    diff算法的本质是找出两个对象之间的差异,目的是尽可能复用节点。,下面这篇文章主要给大家介绍了关于Vue中diff算法的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue实现导出excel表格功能

    Vue实现导出excel表格功能

    这篇文章主要介绍了Vue实现导出excel表格的功能,在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
    2018-03-03
  • Vue响应式原理深入解析及注意事项

    Vue响应式原理深入解析及注意事项

    Vue 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。下面这篇文章主要给大家深入讲解了关于Vue的响应式原理,以及Vue响应式的一些注意事项,需要的朋友下面随着小编来一起学习学习吧。
    2017-12-12
  • vue动态路由匹配和路由懒加载多种方法详解

    vue动态路由匹配和路由懒加载多种方法详解

    这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 浅谈vue的props,data,computed变化对组件更新的影响

    浅谈vue的props,data,computed变化对组件更新的影响

    本篇文章主要介绍了浅谈vue的props,data,computed变化对组件更新的影响,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    vue中使用h5 video标签实现弹窗播放本地视频的方法

    本文主要介绍了vue中使用h5 video标签实现弹窗播放本地视频的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    触底时,继续向后端发请求获取下一页的数据,请求回来的数据合并给options,这篇文章主要介绍了ElementPlus 中el-select自定义指令实现触底加载请求options数据的操作方法,需要的朋友可以参考下
    2024-08-08
  • Vue动态绑定Class的几种常用方式

    Vue动态绑定Class的几种常用方式

    在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下
    2023-03-03
  • 在vue中实现日历功能的代码示例

    在vue中实现日历功能的代码示例

    在许多Web应用程序中,日历是一个常见的组件,它通常用于显示日期、安排会议、查看活动等,在Vue中,我们可以使用第三方库来轻松实现日历功能,也可以手动编写代码来实现日历的展示和操作,本文将介绍如何使用vue-calendar和手动编写代码来实现日历功能
    2023-07-07
  • Vue3.0版本强势升级点特性详解

    Vue3.0版本强势升级点特性详解

    这篇文章主要介绍了Vue3.0版本强势升级点特性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2022-06-06

最新评论