<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#text{
margin-left: 50px;
}
#btn{
60px;
height: 30px;
margin-top: 50px;
border: 0;
outline: none;
}
</style>
</head>
<body onload="creatCode();">
<input type="text" id="text"/>
<input type="button" id="btn" onclick="creatCode()" value=""/>
<a href="###" onclick="creatCode()">看不清楚？？？</a>
<input type="button" name="" id="btn1" value="提交" onclick="validate()"/>
</body>
<script type="text/javascript">
var oText = document.getElementById("text");
var oBtn = document.getElementById("btn");
var val = "";
creatCode()
function creatCode(){
var arr = ['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']
val = "";
for (var i=0;i<4;i++) {
var index = Math.floor(Math.random()*62)
val += arr[index];
}
oBtn.value = val;
}
function validate(){
var inputcode = document.getElementById("text").value;
if(val.length == 0){
alert("请输入验证码")
}else if(inputcode != val){
alert("验证码错误")
creatCode();
return false;
}else{
alert("成功！")
return true;
}
}
</script>
</html>