javascript發(fā)送短信驗證碼實現代碼
更新時間：2015年11月12日 09:46:49 投稿：lijiao
我們在注冊賬號，或者是參加活動時，都會向手機發(fā)送收短信驗證碼，短信驗證碼到底是如何實現的，本文為大家揭曉，并為大家分項1javascript發(fā)送短信驗證碼實現代碼，感興趣的小伙伴們可以參考一下
本文首先分析手機發(fā)送驗證碼的原理，再對javascript發(fā)送短信驗證碼予以實現，具體思路如下：
實現點擊“發(fā)送驗證碼”按鈕后，按鈕依次顯示為“59秒后重試”、“58秒后重試”…直至倒計時至0秒時再恢復顯示為“發(fā)送驗證碼”。在倒計時期間按鈕為禁用狀態(tài) .
第一步、獲取按鈕、綁定事件、設置定時器變量和計時變量
第二步、添加定時器，每隔1秒鐘計時減 1，直至當計時小于等于 0 時清除定時器，按鈕恢復為“發(fā)送驗證碼”，否則顯示為“X秒后重試”
效果圖：
實現代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send'),
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 = "發(fā)送驗證碼";
clearInterval(timer);
times = 60;
}
//console.log(times);
},1000);
}
}
</script>
</head>
<body>
<input type="button" id="send" value="發(fā)送驗證碼">
</body>
</html>
注意點：
設置按鈕是否為禁用時，send.disabled=true; send.disabled=false;
true和false不能加引號!true和false不能加引號!true和false不能加引號!否則值永遠為真。
也可用send.setAttribute('disabled','disabled');
或send.removeAttribute('disabled');
以上就是為大家分享的javascript發(fā)送短信驗證碼全部代碼，希望對大家的學習有所幫助。
相關文章
今天小編就為大家分享一篇利用layer實現表單完美驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序 wx.login解密出現亂碼的問題解決辦法的相關資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS實現在狀態(tài)欄顯示打字效果的方法,涉及JavaScript中字符遍歷結合時間函數對狀態(tài)欄顯示進行操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
JavaScript代碼壓縮對代碼進行一系列優(yōu)化處理,從而減小代碼的體積,提高網頁的加載速度,JavaScript代碼壓縮的原理包含去除代碼中的空格、注釋、不必要的換行符等無用字符,壓縮變量名、壓縮函數名等操作,將一些常見的操作(如+、-、*、/)轉換成更短的操作符(如@、^、#、|)2023-12-12
這篇文章主要介紹了JavaScript導航腳本判斷當前導航的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了深入理解javascript prototype的相關知識,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
詳解如何使用JavaScript中Promise類實現并發(fā)任務控制
在JavaScript中,Promise是一種用于管理異步操作的強大工具,但是,有時候需要更高級的控制,以限制同時執(zhí)行的任務數量,以避免系統(tǒng)資源超負荷,本文將深入探討JavaScript中的并發(fā)任務控制,并介紹如何創(chuàng)建一個自定義的Promise類——ConcurrentPromise2023-08-08
這篇文章主要給大家介紹了關于前后端json數據發(fā)送與接收的相關資料，文中通過示例代碼詳細介紹了關于flask中的json數據接收和前端發(fā)送json數據等內容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
Ajax被認為是(Asynchronous(異步) JavaScript And Xml的縮寫）,現在允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax,下面這篇文章主要給大家介紹了關于ajax在js中和jQuery中的用法,需要的朋友可以參考下2021-08-08