您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)JavaScript如何實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
1、js屬于一種解釋性腳本語(yǔ)言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺(tái)下運(yùn)行,擁有著跨平臺(tái)特性;3、js屬于一種弱類(lèi)型腳本語(yǔ)言,對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求,能夠進(jìn)行類(lèi)型轉(zhuǎn)換,簡(jiǎn)單又容易上手;4、js語(yǔ)言安全性高,只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對(duì)象的腳本語(yǔ)言,js不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
JavaScript之隨機(jī)碼的生成與校驗(yàn),具體內(nèi)容如下
由于獲取事件源有兩種寫(xiě)法,所以在此處都附上:
這個(gè)是直接用var去定義的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隨機(jī)驗(yàn)證碼校驗(yàn)</title> <style type="text/css"> #code{ width: 100px; height: 100px; background-color: #ddd; padding: 10px; line-height: 100px; text-align: center; font-size: 20px; color: red; /*font-weight: bold;*/ } </style> </head> <body> <div id="code"></div> <input type="text" name="" id="newCode"> <input type="button" name="" id="validate" value="驗(yàn)證"> <script type="text/javascript"> window.onload = function (){ var code; // 1.獲取對(duì)應(yīng)的標(biāo)簽 var codeDiv = document.getElementById("code"); var newCodeInput = document.getElementById("newCode"); var validate = document.getElementById("validate"); // 加載頁(yè)面獲取對(duì)應(yīng)驗(yàn)證碼 creatCode() // 1.獲取min到max之間的整數(shù) 1~100 function random(max,min){ return Math.floor(Math.random()*(max-min)+min); } function creatCode(){ code = ""; // 設(shè)置長(zhǎng)度 var codeLenth = 4; var randomCode =[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"]; for(var i=0;i<codeLenth;i++){ // 設(shè)置隨機(jī)范圍36范圍 var index = random(0,36); code += randomCode[index]; } codeDiv.innerHTML = code; } // 驗(yàn)證按鈕校驗(yàn) validate.onclick = function (){ // 獲取輸入用戶的驗(yàn)證碼 var newCode = newCodeInput.value.toUpperCase(); if (newCode === code){ // 驗(yàn)證成功 跳轉(zhuǎn)對(duì)應(yīng)的網(wǎng)址 window.location.href = "http://www.baidu.com"; }else { // 驗(yàn)證失敗 alert("驗(yàn)證失敗,請(qǐng)重新輸入") // 輸入框置空 newCodeInput.value = ""; // 重新獲取驗(yàn)證碼 creatCode(); } } } </script> </body> </html>
這個(gè)是用function定義變量的:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隨機(jī)驗(yàn)證碼校驗(yàn)</title> <style type="text/css"> #code{ width: 100px; height: 100px; background-color: #ddd; padding: 10px; line-height: 100px; text-align: center; font-size: 20px; color: red; /*font-weight: bold;*/ } </style> </head> <body> <div id="code"></div> <input type="text" name="" id="newCode"> <input type="button" name="" id="validate" value="驗(yàn)證"> <script type="text/javascript"> window.onload = function (){ var code; // 1.獲取對(duì)應(yīng)的標(biāo)簽(獲取事件源) function $(id){ return typeof id === "string"?document.getElementById(id):null; } // 加載頁(yè)面獲取對(duì)應(yīng)驗(yàn)證碼 creatCode() // 1.獲取min到max之間的整數(shù) 1~100 function random(max,min){ return Math.floor(Math.random()*(max-min)+min); } function creatCode(){ code = ""; // 設(shè)置長(zhǎng)度 var codeLenth = 4; var randomCode =[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"]; for(var i=0;i<codeLenth;i++){ // 設(shè)置隨機(jī)范圍36范圍 var index = random(0,36); code += randomCode[index]; } $("code").innerHTML = code; } // 驗(yàn)證按鈕校驗(yàn) $("validate").onclick = function (){ // 獲取輸入用戶的驗(yàn)證碼 var newCode = $("newCode").value.toUpperCase(); if (newCode === code){ // 驗(yàn)證成功 跳轉(zhuǎn)對(duì)應(yīng)的網(wǎng)址 window.location.href = "http://www.baidu.com"; }else { // 驗(yàn)證失敗 alert("驗(yàn)證失敗,請(qǐng)重新輸入") // 輸入框置空 $("newCode").value = ""; // 重新獲取驗(yàn)證碼 creatCode(); } } } </script> </body> </html>
兩種方式所實(shí)現(xiàn)效果一樣。附上效果圖:
當(dāng)輸入錯(cuò)誤的數(shù)據(jù)進(jìn)行驗(yàn)證時(shí),會(huì)提示:
當(dāng)輸入正確的數(shù)據(jù)進(jìn)行驗(yàn)證時(shí),點(diǎn)擊驗(yàn)證,如果驗(yàn)證成功,會(huì)跳轉(zhuǎn)指定路徑。
感謝各位的閱讀!關(guān)于“JavaScript如何實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。