Home > Article > Web Front-end > Example of VUE component: How does VUE component implement countdown?
This article brings you examples of VUE components: How does the VUE component implement countdown? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Rendering:
2. CSS code
.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; }
3 , HTML code
<p class="wrap"> <countdown seconds="15" index="1"></countdown> <countdown seconds="30" index="2"></countdown></p>
4. JavaScript code
// 倒计时组件 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' });
Related recommendations:
Prototype mechanism in JS: Implement inheritance and extension of constructors and their instances
Communication between Vue child components and parent components (with code)
The above is the detailed content of Example of VUE component: How does VUE component implement countdown?. For more information, please follow other related articles on the PHP Chinese website!