JavaScript實現(xiàn)點擊切換驗證碼及校驗
更新時間：2021年01月10日 09:08:21 作者：棟棟很優(yōu)秀啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊切換驗證碼及校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xià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="請輸入上圖的驗證碼" />
<button>注冊</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('驗證碼錯誤')
div[0].innerHTML = ranFun(1000, 9999);
inp.value = ""
}
}
function ranFun(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a)
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript簡單修改窗口大小的方法,涉及javascript中moveTo與resizeTo方法的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
微信小程序?qū)崿F(xiàn)多個按鈕的顏色狀態(tài)轉(zhuǎn)換
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多個按鈕的顏色狀態(tài)轉(zhuǎn)換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
JS 實現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
本文主要介紹了JS 實現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié),包括ClipboardAPI和document.execCommand這兩種方法,具有一定的參考價值,感興趣的可以了解一下2025-02-02
位運算是在數(shù)字底層(即表示數(shù)字的 32 個數(shù)位)進行運算的,下面這篇文章主要給大家介紹了關(guān)于JavaScript中7種位運算符在實戰(zhàn)的妙用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
我們都知道只有正確引用路徑,Typescript才不會提示報錯,這篇文章主要給大家介紹了關(guān)于typescript路徑別名問題詳解與前世今生的故事,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
最近在使用layui前端框架,在使用單選按鈕、下拉菜單select、checkbox等控件的時候,往往遇到一些初始化的東西,下面這篇文章主要給大家介紹了關(guān)于layui動態(tài)設(shè)置單選按鈕選中效果的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS實現(xiàn)碰撞檢測的方法,結(jié)合實例形式分析了javascript碰撞檢測的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
本篇主要給大家介紹cocos2dx骨骼動畫Armature源碼剖析之flash中數(shù)據(jù)與xml中數(shù)據(jù)關(guān)系，需要的朋友一起來學(xué)習(xí)吧2015-09-09
這篇文章主要為大家詳細介紹了Bootstrap表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)搜索提示框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09