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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
今天小編就為大家分享一篇關于js中事件對象和事件委托的介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。本文將用Three.js實現(xiàn)3D三棱錐立體特效，感興趣的可以了解一下2022-06-06
本篇文章主要介紹了用ES6的class模仿Vue寫一個雙向綁定的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之面板,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例
for...in?、?for...of?和?forEach?都是用于循環(huán)遍歷集合元素的方法,但它們之間有一些重要的區(qū)別,本文通過實例代碼介紹JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的相關知識,感興趣的朋友一起看看吧2023-09-09
下面小編就為大家?guī)硪黄远x事件解決重復請求BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript中的函數(shù)申明、函數(shù)表達式、箭頭函數(shù)
js中的函數(shù)可以通過幾種方式創(chuàng)建，具體創(chuàng)建方法通過實例代碼給大家介紹的非常詳細，文中通過例子給大家介紹了函數(shù)聲明和表達式之間的差別，感興趣的朋友跟隨小編一起看看吧2019-12-12
指定區(qū)域的圖片自動按比例縮小的js代碼（防止頁面被圖片撐破）
有時候我們更新的內(nèi)容，有很多的大圖片，就會導致頁面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個補充2014-02-02
這篇文章主要為大家詳細介紹了如何利用原生js實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
點擊按鈕時，彈出B窗口（模態(tài)）。在B窗口中添加數(shù)據(jù)，提交后，要求B窗口自關閉，然后刷新A窗口（父），需要的朋友可以了解下2012-12-12