轉載改進版:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="javascript">
var code; //在全局 定義驗證碼
window.onload=createCode; //頁面加載完執行,生成第一次驗證碼
//建立驗證碼函數
function createCode() {
code = "";
var codeLength =5;//驗證碼的長度
var selectChar = new Array(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<codeLength;i++) {
var charIndex =Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
// 設定驗證碼的顯示樣式，并顯示
document.getElementById("discode").style.fontFamily="Fixedsys"; //設定字型
document.getElementById("discode").style.letterSpacing="5px"; //字型間距
document.getElementById("discode").style.color="#0ab000"; //字型顔色
document.getElementById("discode").innerHTML=code; // 顯示
}
//驗證驗證碼輸入是否正确
function but() {
var val1=document.getElementById("t1").value;
var val2=code;
if(val1!=val2){
alert("驗證碼錯誤!");
document.getElementById('t1').value="";
}else if(val1==val2){
alert("驗證碼成功!");
}
}
</script>
</head>
<body>
<div class="input">
<input id="t1" type="text" name="u" placeholder="驗證碼" /> <!-- οnblur="but()" -->
<span id="discode"></span>
<input type="button" value="換一換" class="c" style="height:20px;" onClick="createCode()">
<input type="button" value="驗證" class="c" style="height:20px;" onClick="but()">
</div>
</body>
</html>
效果:
出處:https://www.cnblogs.com/tk55/p/7519134.html
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)