vue按钮倒计时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style type="text/css">
            .Tim{
                width: 100px;
                height: 30px;
                background: #2AABD2;
                border: 0;
                border-radius:4px ;
                color: #FFFFFF;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <button @click="tap()" class="Tim">{{ content }}</button>
        </div>
    </body>
    <script type="text/javascript">
        const app = new Vue({
            el:"#box",
            data:{
                content:'发送验证码',
                totalTime:60,
                canClick: true
            },
            methods:{
                tap () {
                    if (!this.canClick) return   //改动的是这两行代码
                        this.canClick = false
                        this.content = this.totalTime + 's重新发送'
                        let clock = window.setInterval(() => {
                            this.totalTime--
                            this.content = this.totalTime + 's重新发送'
                            if (this.totalTime < 0) {
                                window.clearInterval(clock)
                                this.content = '重新发送验证码'
                                this.totalTime = 60
                                this.canClick = true   //这里重新开启
                            }
                        },1000)
                        }
                }
        })
    </script>
</html>

 

展开阅读全文

没有更多推荐了,返回首页