时间:2021-07-01 10:21:17 帮助过:17人阅读
一、效果图:
二、CSS代码
.box{ width: 300px; height: 100px; line-height: 100px; margin: 100px auto; background-color: #eee; text-align: center; font-size: 30px; color: #666; }.count-number{ color: red; font-size: 30px; font-weight: bold; }
三、HTML代码
<p class="wrap"> <countdown seconds="15" index="1"></countdown> <countdown seconds="30" index="2"></countdown></p>
四、javascript代码
// 倒计时组件 Vue.component('countdown', { props: ['seconds', 'index'], data: () => { return { timerCount: 0 } }, mounted() { this.timing(); }, methods: { timing() { let startTime = localStorage.getItem(`startTime${this.index}`); let nowTime = new Date().getTime(); if(startTime) { let surplus = this.seconds - parseInt((nowTime-startTime) / 1000, 10); this.timerCount = surplus <= 0 ? 0 : surplus; } else { this.timerCount = this.seconds; localStorage.setItem(`startTime${this.index}`, nowTime); } let timer = setInterval(() => { if(this.timerCount > 0 && this.timerCount <= this.seconds) { this.timerCount--; } else { localStorage.removeItem(`startTime${this.index}`); clearInterval(timer); } }, 1000); } }, template: `<div class="box">倒计时 <span class="count-number">{{timerCount < 10 ? '0' + timerCount : timerCount}}</span> 秒</div>` }); // Vue实例 new Vue({ el: '.wrap' });
相关推荐:
JS中的原型机制:实现构造函数与其实例的继承与扩展
Vue子组件与父组件之间的通信(附代码)
以上就是VUE组件的实例:VUE组件如何实现倒计时?的详细内容,更多请关注Gxl网其它相关文章!