以下讨论的是和相关的VUE组件的实例:VUE组件如何实现倒计时? 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
本篇文章给大家带来的内容是关于VUE组件的实例:VUE组件如何实现倒计时?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、效果图:
二、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代码
四、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: `倒计时 {{timerCount < 10 ? '0' + timerCount : timerCount}} 秒` }); // Vue实例 new Vue({ el: '.wrap' });
关于VUE组件的实例:VUE组件如何实现倒计时?的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2018081096018.shtml方便下次再访问哦。