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)文章
這篇文章主要介紹了JavaScript簡(jiǎn)單修改窗口大小的方法,涉及javascript中moveTo與resizeTo方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序?qū)崿F(xiàn)多個(gè)按鈕的顏色狀態(tài)轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多個(gè)按鈕的顏色狀態(tài)轉(zhuǎn)換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
本文主要介紹了JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié),包括ClipboardAPI和document.execCommand這兩種方法,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用
位運(yùn)算是在數(shù)字底層(即表示數(shù)字的 32 個(gè)數(shù)位)進(jìn)行運(yùn)算的,下面這篇文章主要給大家介紹了關(guān)于JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
typescript路徑別名問(wèn)題詳解與前世今生的故事
我們都知道只有正確引用路徑,Typescript才不會(huì)提示報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于typescript路徑別名問(wèn)題詳解與前世今生的故事,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
layui動(dòng)態(tài)設(shè)置單選按鈕選中效果實(shí)例
最近在使用layui前端框架,在使用單選按鈕、下拉菜單select、checkbox等控件的時(shí)候,往往遇到一些初始化的東西,下面這篇文章主要給大家介紹了關(guān)于layui動(dòng)態(tài)設(shè)置單選按鈕選中效果的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS實(shí)現(xiàn)碰撞檢測(cè)的方法,結(jié)合實(shí)例形式分析了javascript碰撞檢測(cè)的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析(二)
本篇主要給大家介紹cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析之flash中數(shù)據(jù)與xml中數(shù)據(jù)關(guān)系，需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap表格使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)搜索提示框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09