JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)
更新時(shí)間：2021年01月10日 09:08:21 作者：棟棟很優(yōu)秀啊
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)的具體代碼，供大家參考，具體內(nèi)容如下
效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 40px;
background-color: red;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 30px;
font-weight: 900;
user-select: none;
}
.show {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
font-size: 40px;
font-weight: 900;
display: none;
}
</style>
</head>
<body>
<div></div>
<input type="text" value="請(qǐng)輸入上圖的驗(yàn)證碼" />
<button>注冊(cè)</button>
<div class="show">等待中。。。。</div>
<script type="text/javascript">
//1000-9999
var div = document.getElementsByTagName("div");
var inp = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("button")[0];
div[0].innerHTML = ranFun(1000, 9999);
inp.onclick = function () {
this.value = ""
}
div[0].onclick = function () {
this.innerHTML = ranFun(1000, 9999)
}
btn.onclick = function () {
if (inp.value == div[0].innerHTML) {
div[1].style.display = "block";
setTimeout(function () {
location.href = "register.html"
}, 3000)
} else {
alert('驗(yàn)證碼錯(cuò)誤')
div[0].innerHTML = ranFun(1000, 9999);
inp.value = ""
}
}
function ranFun(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a)
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Firebug對(duì)js進(jìn)行斷點(diǎn)調(diào)試的圖文方法
使用Firebug調(diào)試JavaScript非常方便。因?yàn)閖s的錯(cuò)誤不容易查找，用這個(gè)就方便多了。2011-04-04
這篇文章介紹了lodash中pick和omit函數(shù)的用法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法
今天小編就為大家分享一篇bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步
這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了詳解如何探測(cè)小程序返回到webview頁(yè)面，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JS禁用右鍵、禁用Ctrl+u、禁用Ctrl+s、禁用F12的實(shí)現(xiàn)代碼
最近項(xiàng)目需要屏蔽客戶端的一些操作，加大查看源碼等難度，特整理一下這個(gè)js，也防止客戶端用戶誤操作，破解方放也很簡(jiǎn)單這里就不多說(shuō)了2020-10-10
JS實(shí)現(xiàn)帶緩沖效果打開(kāi)、關(guān)閉、移動(dòng)一個(gè)層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)帶緩沖效果打開(kāi)、關(guān)閉、移動(dòng)一個(gè)層的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作技巧,需要的朋友可以參考下2015-05-05
前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式的文件實(shí)例
通過(guò)使用JavaScript我們可以很方便地實(shí)現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了關(guān)于JavaScript命名空間的一些心得,分別給出了頂級(jí)、多級(jí)命名空間的例子,需要的朋友可以參考下2014-06-06