JavaScript使用Math.random()生成簡單的驗證碼
更新時間：2019年01月21日 15:45:28 作者：muzidigbig
今天小編就為大家分享一篇關于JavaScript使用Math.random()生成簡單的驗證碼，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
第一種：單純的純數(shù)字驗證碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js驗證碼</title>
</head>
<body>
<div class="yzm" style="width: 20%;height: 300px;text-align: center;background-color: pink;line-height: 200px;"></div>
</body>
</html>
<script>
window.onload = function () {
var yzm=document.querySelector(".yzm");
//頁面一加載完成就生成隨機數(shù)調(diào)用rand()
yzm.innerHTML=rand(5);
//點擊切換隨機碼
yzm.onclick=function() {
var num = rand(5);
this.innerHTML = num;
};
//生成隨機碼
function rand(number){
//用來存儲產(chǎn)生的隨機數(shù)
var num="";
for(var i=0;i<number;i++){
num+=Math.floor(Math.random()*10)
}
return num;
}
}
</script>
第二種：輸入的驗證碼與生成的驗證碼進行校驗(數(shù)字與字母相結合)
<html>
<head>
<meta charset="UTF-8">
<title>驗證碼</title>
<style type="text/css">
#code
{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}
</style>
</head>
<body>
<div>
<input type = "text" id = "input"/>
<input type = "button" id="code" onclick="createCode()"/>
<input type = "button" value = "驗證" onclick = "validate()"/>
</div>
</body>
</html>
<script>
var code ; //在全局定義驗證碼
var number = 5;//驗證碼生成的個數(shù)
var checkCode = document.getElementById("code");
//產(chǎn)生驗證碼(頁面一加載就生成)
window.onload = function (){
createCode();
};
//產(chǎn)生驗證碼(輸入錯誤的時候刷新驗證碼，函數(shù)調(diào)用)
function createCode(){
code = "";
var codeLength = number;//驗證碼的長度
// var checkCode = document.getElementById("code");
var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',
's','t','u','v','w','x','y','z'];//隨機數(shù)
for(var i = 0; i < codeLength; i++) {//循環(huán)操作
var index = Math.floor(Math.random()*random.length);//取得隨機數(shù)的索引(random.length)
code += random[index];//根據(jù)索引取得隨機數(shù)加到code上
}
checkCode.value = code;//把code值賦給驗證碼
}
//校驗驗證碼
function validate(){
var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗證碼并轉化為大寫
if(inputCode.length <= 0) { //若輸入的驗證碼長度為0
alert("請輸入驗證碼！"); //則彈出請輸入驗證碼
} else if(inputCode != code.toUpperCase() ) { //將隨機產(chǎn)生的驗證碼轉化為大寫，若輸入的驗證碼與產(chǎn)生的驗證碼不一致時
alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤
createCode();//刷新驗證碼
document.getElementById("input").value = "";//清空文本框
}
else { //輸入正確時
alert("正確^-^"); //彈出^-^
}
}
</script>
若有不足請多多指教！希望給您帶來幫助！
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內(nèi)容請查看下面相關鏈接
相關文章
在JavaScript中，var用來聲明變量，但是這個語法并不嚴格要求，很多時修改，我們可以直接使用一個變量而不用var聲明它。2009-09-09
教你巧用?import.meta?實現(xiàn)熱更新的問題
import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象，它包含了這個模塊的信息，這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了通過示例演示理解javascript預解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-03-03
這篇文章主要介紹了JS實現(xiàn)超簡單的仿QQ折疊菜單效果,可實現(xiàn)鼠標滑過列表展開的QQ折疊菜單效果,非常簡單實用,需要的朋友可以參考下2015-09-09
今天小編就為大家分享一篇layui使用表格渲染獲取行數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關于js實現(xiàn)簡單的點名器隨機色的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
引用了jQuery，節(jié)省了很多鼠標點擊上的判斷。界面顯然都是照搬Windows的掃雷啦，詳細的內(nèi)容注釋里都有，感興趣的朋友參考下吧2016-02-02
TextRange是用來表現(xiàn)HTML元素中文字的對象，是一個用于處理JavaScript對象文本部分內(nèi)容的一個對象2014-07-07
promise中reject和catch處理上區(qū)別對比分析
在 Promise 中,reject?和?catch?是處理異步操作失敗的兩種方式,本文給大家介紹promise中reject和catch處理上區(qū)別對比分析,感興趣的朋友跟隨小編一起看看吧2024-07-07
本文通過一段簡單的代碼給大家介紹了js實現(xiàn)瀏覽器下載文件的方法，需要的的朋友參考下吧2017-08-08