首页 > 第一次点击验证,button的正常倒计时,再次点击验证,验证和倒计时数字切换显示,请帮助?

第一次点击验证,button的正常倒计时,再次点击验证,验证和倒计时数字切换显示,请帮助?

<meta charset="utf-8">
<div id="app">
    <input type="text" v-model="tel" placeholder="手机号" value="13344445555">
    <button type="button" v-on:click="send" v-bind:disabled="!tel.length || !validation.tel">
        验证
    </button>
</div>

<script src="https://cdn.jsdelivr.net/vue/1.0.7/vue.js"></script>
<script>
    var telReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    var vm = new Vue({
        el: '#app',
        data: {
            tel: ''
        },
        computed: {
            validation: function() {
                return {
                    tel: telReg.test(this.tel)
                }
            },
            isValid: function() {
                var validation = this.validation
                return Object.keys(validation).every(function(key) {
                    return validation[key]
                })
            },
        },
        methods: {
            send: function(event) {
                var t = 5;
                event.target.disabled = false;
                setInterval(function() {
                    if (t > 0) {
                        event.target.innerHTML = t--;
                        event.target.disabled = true;
                    } else {
                        window.clearInterval(0);
                        event.target.innerHTML = '验证';
                        event.target.disabled = false;
                    }
                }, 1000);
            }
        }
    })
</script>

我知道了,改成这样就可以了

                             var i = setInterval(function(){                
                                if(t > 0) {                
                                    event.target.innerHTML = t--;
                                    event.target.disabled = true;                                                    
                                } else {                
                                    window.clearInterval(i);                
                                   event.target.innerHTML ='验证';
                                    event.target.disabled = false;
                                }                
                            }, 1000);     
【热门文章】
【热门文章】