vue实现倒计时
最近项目中需要用到通过获取系统当前时间和自定义时间(两者之差)实现倒计时的功能,话不多说,直接上代码。。。
-
新建一个文件countdown.vue
<template> <p style="font-size: 18px">{{time}}</p> </template> <script> export default{ data () { return { time : '', flag : false } }, mounted () { let time = setInterval(() => { if (this.flag == true) { clearInterval(time); } this.timeDown(); }, 500); }, props : { endTime : { type: String } }, methods : { timeDown () { const endTime = new Date(this.endTime); const nowTime = new Date(); let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); let d = parseInt(leftTime / (24 * 60 * 60)); let h = this.formate(parseInt(leftTime / (60 * 60) % 24)); let m = this.formate(parseInt(leftTime / 60 % 60)); let s = this.formate(parseInt(leftTime % 60)); if(leftTime <= 0){ this.flag = true; this.$emit('time-end'); this.time = '倒计时已完成'; }else{ this.time = `${d} 天 ${h} 小时 ${m} 分 ${s} 秒`; // 需要修改时间样式的话 ,比如需要什么30分钟倒计时,就只保留分和秒 } }, formate(time) { if (time >= 10) { return time; } else { return `0${time}`; } } } } </script> <style scoped> </style>
-
再次新建一个测试test.vue进行调用上面我们封装的组件 countdown.vue
<template> <div> <countdown :endTime='endTime'></countdown> </div> </template> <script> import countdown from '../components/countdown' // 引入倒计时 countdown.vue地址 export default{ data() { return { endTime : '2020-12-1 11:59:00' // 设置定时器倒计时,时间必须大于当前时间和上面一样,跟上面对应 } }, components:{ 'countdown': countdown } } </script> <style scoped> </style>