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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
Express的路由详解
Dec 10 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
js编写简单的计时器功能
Jul 15 Javascript
微信小程序picker组件两列关联使用方式
Oct 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP7.0版本备注
2015/07/23 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python partial函数原理及用法解析
2019/12/11 Python
应届生船舶驾驶求职信
2013/10/19 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
出国导师推荐信
2015/03/25 职场文书
听证会主持词
2015/07/03 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Kubernetes控制节点的部署
2022/04/01 Servers
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Python 视频画质增强
2022/04/28 Python
python热力图实现的完整实例
2022/06/25 Python