<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>
</title>
<script type="text/javascript" src="../../js/jquery1.7.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#login {
border: 1px solid red;
margin: 10% 25% 25%;
width: auto;
height: 400px;
}
#loginInput {
float: right;
overflow: hidden;
margin: 100px 80px auto;
padding: 20px;
line-height: 35px;
}
#loginInput #submit {
text-align: center;
margin: 0 auto;
display: block;
}
#showValue {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="login">
<div id="loginInput">
name:
<input type="text" id="name"></input>
<br>
p w d:
<input type="password" id="name"></input>
<br>
<div id="yanzhengma"></div>
<input type="text" id="inputValue" maxlength="8" οnkeyup="yanzheng(event)"></input>
<label id="showValue" οnclick="changeValue()" style="display: inline-block; height: 25px; width: auto; margin-left: 7px; ">我是可爱的验证码</label>
<div id="return" style="display: inline-block; color: red; font-weight: bold;"></div>
<br>
<input type="submit" id="submit" value="login" οnclick="yanzheng(event)"></input>
</div>
</div>
<script type="text/javascript">
var yanzhengma = "";
var length = 4;
var flag = 0;
$(function(){
changeValue();
});
function changeValue() {
yanzhengma = "";
var code = 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 < length; i++) {
var oneCode = Math.round(Math.random()*35);
yanzhengma += code[oneCode];
}
//console.log(yanzhengma);
$('#showValue').html(yanzhengma);
}
function yanzheng(event) {
if(event.keyCode == 13) {
flag++;
}
if(flag == 2 || event.target.id == "submit") {
console.log(typeof($('#inputValue').val().toLowerCase()));
if(yanzhengma == $('#inputValue').val().toLowerCase()) {
//alert("success");
$('#return').html("√");
}
else {
$('#return').html("×");
}
flag = 0;
}
else {
return false;
}
}
</script>
</body>
</html>
JavaScript验证码
最新推荐文章于 2022-11-03 10:45:22 发布