Vue實現傳送短息60秒倒計時
阿新 • • 發佈：2018-12-09
Vue實現傳送短息60秒倒計時
Vue實現註冊賬號時，傳送簡訊60秒倒計時功能，並進行手機號校驗的Demo案例，如果能幫到您，我感到非常榮幸，廢話不多說，直接上乾貨，
首先來一個測試頁面，引入Vue.js，及基本格式
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>使用者註冊</title> 根據需求編寫data中的資料
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
< 編寫方法和資料渲染
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>使用者註冊</title>
<script src="js/vue/vue.js"></script>
<script src="js/vue/axios.js"></script>
</head>
<body>
<div id="app">
<label for="">手機號碼：</label>
<input type="text" class="txt" name="mobile" v-model="mobile"/>
<input type="button" :disabled="countFlag" @click="sendMobile" v-model="btnMsg == null ? countNum+'s後重新發送' : btnMsg">
</div>
<script>
new Vue({
el:"#app",
data:{
// 倒計時週期
countNum:60,
// 用於倒計時標記，true-正在倒計時
countFlag:false,
// 定時器
intervalBtn:{},
//預設按鈕的值
btnMsg:"點擊發送驗證碼",
//手機號碼
mobile:""
},
methods:{
// 倒計時
countDown(){
// 設定btn倒計時時顯示的資訊
this.btnMsg = null;
// 更改btn狀態
this.countFlag =! this.countFlag;
// 設定倒計時
this.intervalBtn = setInterval(() => {
if(this.countNum <= 0) {
// 重置btn提示資訊
this.btnMsg = "點擊發送驗證碼";
// 清除定時器
clearInterval(this.intervalBtn)
// 更改btn狀態
this.countFlag =! this.countFlag;
// 重置倒計時狀態
this.countNum = 5;
};
// 倒計時
this.countNum -- ;
}, 1000);
},
sendMobile(){
//獲取輸入手機號碼
let mobile = this.mobile
//正則校驗手機號是否合法
if(!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))){
alert("手機號錯誤")
return
}
//觸發定時器方法
this.countDown()
}
},
})
</script>
</body>
</html>
如有您有任何疑問，歡迎評論