JS實現(xiàn)簡單短信驗證碼界面
更新時間：2017年08月07日 16:07:39 作者：m0_38056893
要實現(xiàn)短信驗證碼界面，首先要有一個文本框，旁邊是按鈕，點擊時開始倒計時。接下來通過本文給大家分享js實現(xiàn)簡單短信驗證碼界面，感興趣的朋友參考下吧
1.要實現(xiàn)短信驗證碼界面，首先要有一個文本框，旁邊是按鈕，點擊時開始倒計時。
2.先創(chuàng)建文本框和按鈕，按鈕設(shè)置對應(yīng)的id，然后在js中通過id獲取按鈕這個元素，對其執(zhí)行操作。同時應(yīng)設(shè)置倒計時時間以及計時器變量，并使點擊發(fā)送按鈕后倒計時結(jié)束前無法繼續(xù)點擊按鈕重新發(fā)送。
3.倒計時結(jié)束后，清除計時器，并使文字改變?yōu)椤爸匦掳l(fā)送驗證碼”，恢復對按鈕能操作的功能，同時使倒計時的數(shù)從5秒重新開始以便點擊后重新倒計時。
<head>
<meta charset="UTF-8">
<title>js發(fā)送短信驗證碼</title>
</head>
<body>
<input type="text"/><button id="bt01">發(fā)送驗證碼</button>
</body>
<script type="text/javascript">
var bt01 = document.getElementById("bt01");
bt01.onclick = function() {
bt01.disabled = true; //當點擊后倒計時時候不能點擊此按鈕
var time = 5; //倒計時5秒
var timer = setInterval(fun1, 1000); //設(shè)置定時器
function fun1() {
time--;
if(time>=0) {
bt01.innerHTML = time + "s后重新發(fā)送";
}else{
bt01.innerHTML = "重新發(fā)送驗證碼";
bt01.disabled = false; //倒計時結(jié)束能夠重新點擊發(fā)送的按鈕
clearTimeout(timer); //清除定時器
time = 5; //設(shè)置循環(huán)重新開始條件
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的JS實現(xiàn)簡單短信驗證碼界面，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
promise面試中經(jīng)常會遇到的一個問題就是關(guān)于控制并發(fā)的，所以下面這篇文章主要給大家介紹了關(guān)于Promise面試題之控制并發(fā)的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了js A*尋路算法原理與具體實現(xiàn)過程,結(jié)合實例形式詳細分析了A*尋路算法的具體概念、原理、實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
get(0).tagName可獲得作用標簽，下面是它的一個小應(yīng)用，在學習js的朋友可以參考下2014-10-10
本文為大家介紹下js如何獲取IP和PcName在IE下測試，代碼如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
echarts如何實現(xiàn)動態(tài)曲線圖(多條曲線)
這篇文章主要介紹了echarts如何實現(xiàn)動態(tài)曲線圖(多條曲線)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了PHP實現(xiàn)本地圖片上傳和驗證功能的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
當需要制作轉(zhuǎn)動鼠標滾輪放大頁面字體這樣的交互效果時，會用到 Mousewheel 事件。2010-09-09
這篇文章主要介紹了如何采用call方式實現(xiàn)js繼承,需要的朋友可以參考下2014-05-05
Bootstrap模態(tài)框水平垂直居中與增加拖拽功能
最近開發(fā)一個CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個添加某些選項時，打算彈出一個模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會垂直居中到屏幕上，而是在屏幕上方,通過查閱資料才解決此問題，下面小編給大家分享解決思路2016-11-11
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)的相關(guān)資料,需要的朋友可以參考下2015-12-12