javascript倒计时5秒效果

转载于：https://blog.csdn.net/fromAnnie/article/details/81978709?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 

<template>
    <div>            

        <div style="margin: 20px;">
            <h3>倒计时5秒</h3>
            <el-button @click="startCount">开始倒计时</el-button>
            <div style="color: red; font-size: 20px;font-weight: bold;margin: 20px;">{
   
   {count}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
          
                count: '',//倒计时
            }
        },
      
        methods: {
      

            startCount(){
                const TIME_COUNT = 5;
                if(!this.timer){
                    this.count = TIME_COUNT;
                    this.timer = setInterval(()=>{
                        if(this.count > 0 && this.count <= TIME_COUNT){
                            this.count--;
                        }else{
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    },1000)
                }
            },
        }
    }
</script>

<style scoped>

</style>