js實現獲取驗證碼時60s後再次發送

現在許多的網站都有手機或郵箱驗證碼接受功能了,當我們點擊之後大概過60秒可以接受到短信了,這個有一個倒計時的功能了,今天我們就來看一些小編整理的js實現獲取驗證碼時60s後再次發送的例子,具體的細節如下所示。

我們在做注冊或登陸的頁面時經常有獲取驗證碼的功能,在獲取驗證碼時我們經常要做個60s禁止點擊的功能,下面是我做專案時經常用到的代碼:

例子

獲取驗證的按鈕:

代碼如下

<input class="get" type="button" value="獲取驗證碼" />;

獲取驗證碼的Ajax函數:

$(".get").on('click',function(){
var btn=$(this);
var phone = $(".phone").val();
var data = {phone: phone, type: 1};

if(!phone || !eval('/'+regexEnum.mobile+'/').test(phone)
|| phone.length &amp;lt; 11){
alert("手機號格式不正確!");
return;
}
// ajax 獲取驗證碼
ajaxPOSTRequest(kBaseUserUrl + "getPhoneSalt", data, handleCaptcha);
function handleCaptcha(result) {
ZMAlert(result.message['content']);
if(result.errorCode == 0){
settime(btn);
}
}
});

倒計時60s的函數:

代碼如下
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.attr("disabled", false);
val.val("重新發送");
val.css({
"background":"#fe8836"
});
countdown = 60;
return false;
} else {
val.attr("disabled", true);
val.val("正在獲取"+countdown);
val.css({
"background":"#ccc"
});
countdown--;
}
setTimeout(function() {
settime(val)
},1000)
}

例子1

代碼如下

javascriptvar getCode = document.getElementById('getCode');
var wait = 60;
function time(btn){
if (wait===0) {
btn.removeAttribute("disabled");
btn.innerHTML = "獲取驗證碼";
wait = 60;
}else{
btn.setAttribute("disabled",true);
btn.innerHTML = wait + "秒後重試";
wait--;
setTimeout(function(){
time(btn);
},1000);
}
}
getCode.onclick = function(){
time(this);
};

更多相關文章
  • Win10開發中使用 ValidationAttribute 實現數據驗證
    .NET開發中,服務端驗證要繼承自ValidationAttribute,並重寫IsValid虛方法來自定義自己的驗證規則.本文我們介紹win10中使用ValidationAttribute驗證數據.WPF 中數據驗證的方式多種多樣,這裏就不說了.但是,在 Windows Phone 8.1 Run
  • Nutz是一個java開發的優秀的國産開源專案,它是一組輕便小型的框架的集合,被稱作是"除了SSH之外的另一個選擇",本文來看看我們用nutz框架中如何實現登錄驗證的實例教程.一.nutz介紹 Nutz是對于Java程序員來說,除SSH之外的另一個選擇.當然,它是開源的,並且是完 ...
  • 一般在數據分頁的時候需要獲取當前頁的數據和總條數,一般人是在model中封裝兩個函數分別獲取當前頁的數據和數據總條數,業務邏輯類似,感覺有點冗余,可以封裝在一起 代碼如下 /** * 獲取分頁數據及總條數 * @pa
  • jsp spring mvc 框架集成google kaptcha生成驗證碼實例教程
    我們知道,kaptcha是google開源的生成驗證碼的工具,有了kaptcha我們可以生
  • 倒計時功能在許多的網站注冊處會用到,如注冊之前有一個協義閱讀或注冊獲取手機驗證碼功能,這些都會用到倒計時功能了,下面小編介紹的是一篇JS實現自動倒計時30秒後按鈕才可用例子,效果如下.WEB開發中經常會用到倒計時來限
  • python模擬登陸之驗證碼與cookies的同步處理思路
    下文給大家介紹python模擬登陸之驗證碼與cookies的同步處理思路與實現方法,希望對
  • CentOS下Google Authenticator配置SSH登錄動態驗證碼配置
    下面我們來看從一個站長博客轉過來了一篇CentOS下Google Authenticato
  • 其實刷新驗證碼很多朋友說用ajax其實不然,我們只要用js就可以實現不要刷新頁面實現驗 證碼刷新更換功能,有需要的朋友可以參考一下.使用Javascript刷新驗證碼目的是爲了頁面無刷新情況下重新得到驗證碼JS代碼:
一周排行