废话不多说，直接上源码！！！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .chaxun-yanzhengma-btn{ border-radius: 4px; background-color: #FF4179; border: 2px solid #c81352; color: #FFFFFF; } </style> </head> <body> <input class="chaxun-yanzhengma-btn" type="button" value="获取验证码" /> <script> var btn = document.querySelector('.chaxun-yanzhengma-btn'); var timer; btn.onclick=function(){ clearInterval(timer); var tip = 6; btn.disabled = 'disabled'; btn.value = tip + 's后重新发送'; btn.style.background = '#eee'; btn.style.color = '#666'; btn.style.borderColor = '#aaa'; timer = setInterval(function(){ tip-- if( tip == 0 ){ btn.disabled = false; btn.value = '获取验证码'; btn.style.background = '#FF4179'; btn.style.color = '#fff'; btn.style.borderColor = '#c81352'; clearInterval(timer); return false; } btn.value = tip + 's后重新发送' },1000); } </script> </body> </html>
<template> <div slot="center" class="register-page"> <div class="login-content w1224"> <div class="login-box"> <div class="login-top"> <ul> <li v-for="(item,index) in switchNav" :key="index" @click="switchModule(item)" :class="{'active': curSelect == item.id}"> <span>{{item.title}}</span> </li> </ul> </div> <div> <!-- 微信注册 --> <div class="login-bottom" v-if="curSelect === 1"> <h1>暂未开放</h1> </div> <!-- 手机号注册 --> <div class="login-bottom" v-if="curSelect === 2"> <a-select :size="size" defaultValue="选择身份" style=" 120px" @change="handleChange"> <a-select-option value="用户">用户</a-select-option> <a-select-option value="商户">商户</a-select-option> </a-select> <a-input placeholder="请输入手机号" /> <div class="testing"> <a-input placeholder="请输入验证码" /> <a-button type="primary" size="large" @click="getCode()">{{texts}}</a-button> </div> <a-input placeholder="请输入密码" /> <a-input placeholder="请输入用户名" /> <div class="texts"><img src="@/assets/image/dui.jpg">我已阅读并接受《云工长用户服务协议》、《隐私政策》</div> <div class="btn"> <a-button type="primary" size="large">立即注册</a-button> </div> </div> </div> </div> </div> </div> </template> <script> /** * @ description 注册模块 * @ author CuiYanKang * @ date 2020-1-7 * @ lastModifiedBy CuiYanKang * @ lastModifiedTime 2020-1-8 15:30 */ export default { data() { return { switchNav: [{ id: 1, title: "微信注册" }, { id: 2, title: "账号注册" } ], curSelect: 2, size: 'large', texts: '获取验证码', count: '', timer: null, }; }, components: {}, methods: { switchModule(obj) { this.curSelect = obj.id; }, onChange() { console.log("====", this.checked); }, jumpUrl(path) { this.$router.push({ path }) }, handleChange(value) { console.log(`selected ${value}`); }, getCode() { const TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.texts = this.count+'S'; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count--; this.texts = this.count+'S'; } else { clearInterval(this.timer); this.timer = null; this.texts = '重新获取'; } }, 1000) } }, } }; </script> <style lang="less" scoped> @import "./index.less"; </style>