js實現(xiàn)簡單的獲取驗證碼按鈕效果
更新時間：2017年03月03日 14:06:35 作者：曾阿牛
本文主要介紹了js實現(xiàn)簡單的獲取驗證碼按鈕加效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
圖（1）初始圖
圖（2）點擊后
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>pro.html</title>
<style type="text/css">
.checkCode {
cursor: pointer;
border: 1px solid black;
text-align: center;
line-height: 26px;
width: 115px;
height: 35px;
}
</style>
<script type="text/javascript">
var sleep = 30, interval = null;
window.onload = function ()
{
var btn = document.getElementById ('btn');
btn.onclick = function ()
{
if (!interval)
{
this.style.backgroundColor = 'rgb(243, 182, 182)';
this.disabled = "disabled";
this.style.cursor = "wait";
this.value = "重新發(fā)送 (" + sleep-- + ")";
interval = setInterval (function ()
{
if (sleep == 0)
{
if (!!interval)
{
clearInterval (interval);
interval = null;
sleep = 30;
btn.style.cursor = "pointer";
btn.removeAttribute ('disabled');
btn.value = "免費獲取驗證碼";
btn.style.backgroundColor = '';
}
return false;
}
btn.value = "重新發(fā)送 (" + sleep-- + ")";
}, 1000);
}
}
}
</script>
</head>
<body>
<input class="checkCode" type="button" id="btn" value="免費獲取驗證碼" />
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
本文通過簡單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式 ，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
JavaScript實現(xiàn)前端網(wǎng)頁版倒計時
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端網(wǎng)頁版倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了基于Bootstrap表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
javascript 函數(shù)的暫停和恢復(fù)實例詳解
這篇文章主要介紹了javascript 函數(shù)的暫停和恢復(fù),結(jié)合實例形式詳細分析了javascript 函數(shù)的暫停和恢復(fù)相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2020-04-04
JS實現(xiàn)點擊上移下移LI行數(shù)據(jù)的方法
這篇文章主要介紹了JS實現(xiàn)點擊上移下移LI行數(shù)據(jù)的方法,涉及javascript針對LI列表動態(tài)排序的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料，文中介紹的非常詳細，對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值，需要的朋友可以下面來一起看看吧。2017-04-04
這篇文章主要介紹了JS實現(xiàn)判斷有效的數(shù)獨算法,結(jié)合實例形式分析了javascript數(shù)獨判斷的原理及相關(guān)算法實現(xiàn)、使用操作技巧,需要的朋友可以參考下2019-02-02
Javascript前端UI框架Kit使用指南之kitjs事件管理
本文詳細介紹了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解決問題、代碼解析、注銷事件等。需要的朋友可以參考下。2014-11-11
自己寫了個JS+CSS的小東西，用來看提升用戶體驗的。 Name：WindowsTextShow；2008-12-12
使用ECharts進行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個由百度開源的強大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強大的配置選項和良好的跨平臺兼容性,本文介紹了如何使用ECharts進行數(shù)據(jù)可視化,需要的朋友可以參考下2024-08-08