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 类似flash效果的立体图片浏览器
Feb 08 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JS Attribute属性操作详解
May 19 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
Vue脚手架编写试卷页面功能
Mar 17 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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中通过curl smtp发送邮件
2012/06/05 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Python入门篇之函数
2014/10/20 Python
python编程实现归并排序
2017/04/14 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
详解python深浅拷贝区别
2019/06/24 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python 可视化神器Plotly详解
2020/12/26 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
诚信承诺书模板
2014/05/26 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2014年物流工作总结
2014/11/25 职场文书
材料员岗位职责
2015/02/10 职场文书
河童之夏观后感
2015/06/11 职场文书
社区干部培训心得体会
2016/01/06 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
pytorch中的numel函数用法说明
2021/05/13 Python
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
tree shaking对打包体积优化及作用
2022/07/07 Java/Android