<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
fieldset{
border-radius: 10px;
350px;
height: 500px;
margin: 0px auto;
background: darkgray;
}
.text{
height: 30px;
250px;
border-radius: 8px;
}
#code{
font-family: Arial;
font-style: italic;
border:0;
letter-spacing: 2px;
color:blue;
}
span{
position: relative;
top: 10px;
left: 30px;
}
input{
position: relative;
top: 10px;
left: 30px;
}
input:hover{
transform: scale(1.05);
transition: all 0.5s ease-in-out;
}
#user{
margin: 30px auto;
}
#verifyCode{
margin: 30px auto;
200px;
}
#login{
margin: 40px 40px;
200px;
height: 30px;
}
#send{
margin-left: 15px;
}
</style>
</head>
<body>
<div id="div">
<fieldset>
<span>账号：</span> <input type="text" class="text" placeholder="请输入用户名" id="user"><br>
<span>密码：</span><input type="password" class="text" placeholder="请输入密码" id="password"><br>
<input type="text" placeholder="请输入验证码" class="text" id="verifyCode">
<input type="button" value="发送验证码" id="code" onclick="createCode()">
<input type="submit" value="登录" id="login" onclick="validCode()">
</fieldset>
</div>
</body>
<script>
var code;//code 代表验证码
function createCode(){
code='';
var codeLength = 4;//验证码长度
var checkCode = document.getElementById('code');
var random = 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++){//执行次数？ 4 0 1 2 3
var index = Math.floor(Math.random()*36);//[0,35]
code += random[index];//code = code + random[index] + 连接符
}
//alert(code);//四位?
checkCode.value = code;
}
function validCode(){
var inputCode = document.getElementById('verifyCode').value.toUpperCase();
var user = document.getElementById("user");
var password = document.getElementById("password");
if(user.valueOf() == "" || password.value == ""){
alert("用户名或密码不能为空");
}else if(user.value != 'user' || password.value != 123456){
alert('用户名或密码错误');
}else if(inputCode.length <=0){
alert('请输入验证码');
}else if(inputCode != code){
alert('@_@验证码输入错误');
document.getElementById('verifyCode').value = '';
createCode();
}else{
alert('登录成功');
}
}
</script>
</html>
