vue js count down timer

1<template>
2   {{ countDown }}
3</template>
4
5<script>
6    export default {
7        data() {
8            return {
9                countDown : 10
10            }
11        },
12        method: {
13            countDownTimer() {
14                if(this.countDown > 0) {
15                    setTimeout(() => {
16                        this.countDown -= 1
17                        this.countDownTimer()
18                    }, 1000)
19                }
20            }
21        }
22        created: {
23           this.countDownTimer()
24        }
25    }
26</script>
27

1<template>
2    {{ timerCount }}
3</template>
4
5<script>
6
7    export default {
8
9        data() {
10            return {
11                timerCount: 30
12            }
13        },
14
15        watch: {
16
17            timerCount: {
18                handler(value) {
19
20                    if (value > 0) {
21                        setTimeout(() => {
22                            this.timerCount--;
23                        }, 1000);
24                    }
25
26                },
27                immediate: true // This ensures the watcher is triggered upon creation
28            }
29
30        }
31    }
32
33</script>

1<template>
2  <div>
3    <slot :hour="hour" :min="min" :sec="sec"></slot>
4  </div>
5</template>
6
7<script>
8export default {
9  props : {
10    endDate : {  // pass date object till when you want to run the timer
11      type : Date,
12      default(){
13        return new Date()
14      }
15    },
16    negative : {  // optional, should countdown after 0 to negative
17      type : Boolean,
18      default : false
19    }
20  },
21  data(){
22    return{
23      now : new Date(),
24      timer : null
25    }
26  },
27  computed:{
28    hour(){
29      let h = Math.trunc((this.endDate - this.now) / 1000 / 3600);
30      return h>9?h:'0'+h;
31    },
32    min(){
33      let m = Math.trunc((this.endDate - this.now) / 1000 / 60) % 60;
34      return m>9?m:'0'+m;
35    },
36    sec(){
37      let s = Math.trunc((this.endDate - this.now)/1000) % 60
38      return s>9?s:'0'+s;
39    }
40  },
41  watch : {
42    endDate : {
43      immediate : true,
44      handler(newVal){
45        if(this.timer){
46          clearInterval(this.timer)
47        }
48        this.timer = setInterval(()=>{
49          this.now = new Date()
50          if(this.negative)
51            return
52          if(this.now > newVal){
53            this.now = newVal
54            this.$emit('endTime')
55            clearInterval(this.timer)
56          }
57        }, 1000)
58      }
59    }
60  },
61  beforeDestroy(){
62    clearInterval(this.timer)
63  }
64}
65</script>
66

1<template>
2    {{ timerCount }}
3</template>
4
5<script>
6
7    export default {
8
9        data() {
10            return {
11                timerEnabled: true,
12                timerCount: 30
13            }
14        },
15
16        watch: {
17
18            timerEnabled(value) {
19                if (value) {
20                    setTimeout(() => {
21                        this.timerCount--;
22                    }, 1000);
23                }
24            },
25
26            timerCount: {
27                handler(value) {
28
29                    if (value > 0 && this.timerEnabled) {
30                        setTimeout(() => {
31                            this.timerCount--;
32                        }, 1000);
33                    }
34
35                },
36                immediate: true // This ensures the watcher is triggered upon creation
37            }
38
39        }
40
41        methods: {
42
43            play() {
44                this.timerEnabled = true;
45            },
46
47            pause() {
48                this.timerEnabled = false;
49            }
50
51        }
52
53    }
54
55</script>
56

1<template>
2    {{ timerCount }}
3</template>
4
5<script>
6
7    export default {
8
9        data() {
10            return {
11                timerCount: 30
12            }
13        },
14
15        watch: {
16
17            timerCount: {
18                handler(value) {
19
20                    if (value > 0) {
21                        setTimeout(() => {
22                            this.timerCount--;
23                        }, 1000);
24                    }
25
26                },
27                immediate: true // This ensures the watcher is triggered upon creation
28            }
29
30        }
31    }
32
33</script>
34