Home  >  Article  >  Web Front-end  >  Example of VUE component: How does VUE component implement countdown?

Example of VUE component: How does VUE component implement countdown?

不言
不言Original
2018-08-09 17:29:442463browse

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(&#39;countdown&#39;, {
    props: [&#39;seconds&#39;, &#39;index&#39;],
    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 ? &#39;0&#39; + timerCount : timerCount}}</span> 秒</div>`
});

// Vue实例
new Vue({
    el: &#39;.wrap&#39;
});

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn