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给dropdownlist添加选项的小例子
Mar 04 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JS简单计算器实例
2015/01/20 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
python 循环遍历字典元素的简单方法
2016/09/11 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
解决Django连接db遇到的问题
2019/08/29 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python脚本定时发送邮件
2020/12/22 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
安全检查验收制度
2014/01/12 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Golang 并发编程 SingleFlight模式
2022/04/26 Golang