vue实现倒计时的插件 时间戳 刷新 跳转 都不影响
2018-06-24 01:08:14来源:未知 阅读 ()
工作当中需要开发一个倒计时插件,于是开始网上先拿来主义,发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个插件,测试已经通过,直接上代码
如下是组件代码:
<template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: '', } }, props:{ endTime:{ type: String, default :'' }, endText:{ type : String, default:'已结束' }, callback : { type : Function, default :'' } }, mounted () { this.countdowm(this.endTime) }, methods: { countdowm(timestamp){ let self = this; let timer = setInterval(function(){ let nowTime = new Date(); let endTime = new Date(timestamp * 1000); let t = endTime.getTime() - nowTime.getTime(); if(t>0){ let day = Math.floor(t/86400000); let hour=Math.floor((t/3600000)%24); let min=Math.floor((t/60000)%60); let sec=Math.floor((t/1000)%60); hour = hour < 10 ? "0" + hour : hour; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; let format = ''; if(day > 0){ format = `${day}天${hour}小时${min}分${sec}秒`; } if(day <= 0 && hour > 0 ){ format = `${hour}小时${min}分${sec}秒`; } if(day <= 0 && hour <= 0){ format =`${min}分${sec}秒`; } self.content = format; }else{ clearInterval(timer); self.content = self.endText; self._callback(); } },1000); }, _callback(){ if(this.callback && this.callback instanceof Function){ this.callback(...this); } } } } </script>
下面是调用组件代码:
<count-down endTime="1490761620" :callback="callback" endText="已经结束了"></count-down>
引入上面代码之后 换要在vue的methods里加上callback回调函数
ednTime 是时间结束之后的时间戳 callback是结束之后的回调 endText是结束之后的文字显示!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash