方式一:短信验证码倒计时 vue
// html <el-form-item v-show="codeCheck"> <el-input v-model="formLoginData.message" maxlength="6" type="text" class="msgInput" placeholder="请输入验证码" @keyup.enter.native="verificationCode" /> <el-button type="primary" class="msgBtn" @click="sendSms">{{ sendContent }}</el-button> </el-form-item> //data data() { return { sendContent: '获取验证码', smsWait: 0, sendClass: false, } }, // 方法 methods: { // 发送验证码 sendSms() { var that = this if (that.smsWait !== 0) { return false } console.log(that.formLoginData.phone) if (isEmpty(that.formLoginData.phone)) { this.$message({ message: '请输入手机号', type: 'error' }) return false } if (!isMobile(that.formLoginData.phone)) { this.$message({ message: '手机号格式不正确', type: 'error' }) return false } that.smsWait = 60 that.waitSms() that.smsInterval = setInterval(function() { that.waitSms() }, 1000) }, // 验证码倒计时 waitSms() { var that = this that.smsWait-- var msgBtn = document.querySelector('.msgBtn') if (that.smsWait === 0) { clearInterval(that.smsInterval) that.sendContent = '重新获取' that.sendClass = false msgBtn.style.backgroundColor = '#1873f9' msgBtn.style.borderColor = '#1873f9' msgBtn.style.cursor = 'pointer' } else { that.sendClass = true that.sendContent = that.smsWait + '秒后重新获取' msgBtn.style.backgroundColor = '#aecdfa' msgBtn.style.borderColor = '#aecdfa' msgBtn.style.cursor = 'default' } }, // 手机号验证 verificationCode() { if (isEmpty(this.formLoginData.phone)) { this.$message({ message: '请输入手机号', type: 'error' }) return false } } }
方式二:短信验证码倒计时 [纯html+js]
/* 短信验证码倒计时*/ var send=document.getElementById('sendMsg'), times=60, timer=null; send.onclick=function(){ // 计时开始 var that = this; this.disabled=true; timer = setInterval(function(){ times --; that.value = times + "秒后重试"; if(times <= 0){ that.disabled =false; that.value = "发送验证码"; clearInterval(timer); times = 60; } },1000); } // html <input type="button" class="divInput msgBtn" id="sendMsg" value="发送短信验证码"/>