一.js實(shí)現(xiàn)驗(yàn)證碼：
第一步：建一個(gè)login.htm，一個(gè)code.js文件，一個(gè)code.css文件，準(zhǔn)備一張圖片code.jpg
第二步：編寫login.htm文件，內(nèi)容為：
01.<html>
02.<head>
03.<script language = "javascript" src = "code.js"></script>
04.<link rel="stylesheet" type="text/css" href="code.css">
05.</head>
06.<body onload="createCode();">
07.<form>
08. <center>驗(yàn)證碼：<input type="text" id="input1" />
09.<input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a>
10.<input id="Button1" onclick="validate();" type="button" value="確定" /></center>
11.</form>
12.</body>
13.</html>
第三步：編寫code.css文件，內(nèi)容為：
01..code{
02.background-image:url(code.jpg);
03.font-family:Arial;
04.font-style:italic;
05.color:Red;
06.border:0;
07.padding:2px 3px;
08.letter-spacing:3px;
09.font-weight:bolder;
10.}
第四步：編寫code.js文件，內(nèi)容為：
var code ; //在全局 定義驗(yàn)證碼
function createCode(){
code = "";
var codeLength = 4;//驗(yàn)證碼的長度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','j','k','l','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*60);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
checkCode.value = code;
}
function validate () {
var inputCode = document.getElementById("input1").value.toUpperCase();
if(inputCode.length <=0) {
alert("請(qǐng)輸入驗(yàn)證碼！");
return false;
}
else if(inputCode != code ){
alert("驗(yàn)證碼輸入錯(cuò)誤！");
createCode();
return false;
}
else {
alert("輸入正確，輸入的驗(yàn)證碼為："+inputCode);
return true;
}
}
第五步：把四個(gè)文件放到一個(gè)文件夾中，運(yùn)行l(wèi)ogin.htm文件，顯示結(jié)果為：
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
