廢話不多說，直接上源碼！！！
<!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="width: 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>