JavaScript實現(xiàn)簡單驗證碼
JavaScript實現(xiàn)簡單驗證碼，供大家參考，具體內(nèi)容如下
驗證流程圖
HTML部分
```javascript<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><style> .code { font-family: Arial; font-style: italic; color: blue; font-size: 26px; border: 0; padding: 0.2px 1.2px; letter-spacing: 4px; font-weight: bolder; float: left; cursor: pointer; width: 120px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; background-color: #d8b7e3; } span { text-decoration: none; font-size: 12px; color: #288bc4; padding-left: 10px; /* color: #4c9b7675; */ } span:hover { text-decoration: underline; cursor: pointer; /* color: rgb(rgb(221, 84, 84), green, blue); */ /* color: rgb(rgb(160, 207, 209), green, blue); */ }</style><body> <div> <table border='0' cellspacing='5' cellpadding='5'> <tr><td> <div onclick='createCode(4)'>543</div></td><td> <span onclick='createCode(4)'>看不清換一張</span></td> </tr> <tr><td>驗證碼：</td><td><input type='text' /></td> </tr> <tr><td></td><td><input type='button' onclick='validateCode()' value='確定' /></td> </tr> </table></div>
JavaScript部分
window.onload = function () { createCode(4); } // 創(chuàng)建驗證碼 function createCode(len) { // var code = ’’; var codeLength = parseInt(len); //驗證碼的長度 var checkCode = document.getElementById(’checkCode’); //獲取畫布 // 設(shè)置驗證碼 var codeArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ’z’, ’x’, ’c’, ’v’, ’b’, ’n’, ’m’, ’l’, ’k’, ’j’, ’h’, ’g’, ’f’, ’d’, ’s’, ’a’, ’p’, ’o’, ’i’, ’u’, ’y’, ’t’, ’r’, ’r’, ’e’, ’w’, ’q’, 'Z', ’X’, ’C’, 'V', 'B', 'N', 'M', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'L', 'K', 'P', 'O', 'I', 'U', 'Y', 'T', 'R', 'E', 'W', 'Q') //設(shè)置驗證碼顏色 // var num= Math.floor(Math.random() * 8) var color = ’#’; var bgcolor = ’#’; var fontcolor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, ’a’, ’b’, ’c’, ’d’, ’e’, ’f’); // 循環(huán)數(shù)組，隨機獲取 for (var i = 0; i < codeLength; i++) {//獲取數(shù)組下標(biāo)var charNum = Math.floor(Math.random() * 62);// 存儲數(shù)組code = code + codeArray[charNum]; } if (checkCode && code.length == codeLength) {checkCode.innerHTML = code; } // 設(shè)置驗證碼顏色 for (var i = 0; i < 6; i++) {var colorNum = Math.floor(Math.random() * 15);color += fontcolor[colorNum]; } console.log(color) checkCode.style.color = color; // 設(shè)置畫布背景顏色 for (var i = 0; i < 6; i++) {var colorNum = Math.floor(Math.random() * 15);bgcolor += fontcolor[colorNum]; } checkCode.style.backgroundColor = bgcolor; } // 檢驗驗證碼是否正確 function validateCode() { // 獲取畫布的驗證碼 var checkCode = document.getElementById('checkCode').innerHTML; // 獲取用戶輸入的驗證碼，并且去掉空格 var inputCode = document.getElementById(’inputCode’).value.trim(); console.log(checkCode) console.log(inputCode) // 判斷是否相等 if (inputCode.length < 4) {alert(’驗證碼長度為四位’);createCode(4); } else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) {alert(’輸入驗證碼不正確！’);createCode(4); } else {alert(’正確’) }}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 詳解Android studio 動態(tài)fragment的用法2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 編程語言PHP在Web開發(fā)領(lǐng)域的優(yōu)勢在哪？4. 解決Android studio xml界面無法預(yù)覽問題5. 什么是python的自省6. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)7. 圖文詳解vue中proto文件的函數(shù)調(diào)用8. Android如何加載Base64編碼格式圖片9. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)
網(wǎng)公網(wǎng)安備