练手，做了一个登录框。用JS实现了验证码、以及检测验证码是否正确。
欢迎大家批评指正。最终结果如图所示:
深度截图20170705162952.png
HTML---：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/js.js" ></script>
</head>
<body onload="changeImg()">
<div class="main_bar">
<div id="login_form">
<div class="title">系统登录</div>
<form action="main.html" onsubmit="return check()">
<div id="form_widget">
<br>
<input type="text" placeholder="请输入账号～" id="box_name" class="txt" value="用户名" onfocus="this.value=''" onblur="if(this.value=='')this.value='用户名'"/>
<br>
<input type="password" placeholder="请输入密码～" id="box_pass" class="txt" value="passWord" onfocus="this.value=''" onblur="if(this.value=='')this.value='password'"/>
<br>
<input type="text" placeholder="验证码" id="vcode" value="验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'"/>
<span id="code" title="看不清？换一张～" onclick="changeImg()"></span>
<div id="forget_pass">
<a href="#">忘记密码？</a>
</div>
<input type="submit" value="登录" class="btn" onmouseover="this.style.background='#FF8D00'" onmouseout="this.style.background='#CCCCCC'">
<br>
<div id="copyright">
版权所有-©CopyRight 2017
</div>
</div>
</form>
</div>
</div>
</body>
</html>
CSS---：
.main_bar{
width: 100%;
height: 100%;
background-color: #6495ED;
margin-top: 10%;
}
#login_form{
width: 40%;
height: 100%;
background-color: #112435;
margin: 0 auto;
}
.title{
width: 100%;
height: 55px;
color: #ffffff;
border-bottom: 1px solid #ffffff;
}
#form_widget{
width:100%;
height: 300px;
background-color: #808080;
}
.txt{
display: block;
width: 70%;
height: 35px;
margin: 0 auto;
font-size: 16px;
border-radius: 5px;
border: 0;
padding-left: 10px;
}
#vcode{
width: 40%;
height: 35px;
margin-left: 15%;
font-size: 16px;
border-radius: 5px;
border: 0;
padding-left: 10px;
}
#code{
color: #ffffff;
background-color: #000000;
font-size: 20px;
padding: 5px 35px 10px 35px;
margin-left: 5%;
cursor: pointer;
}
#forget_pass{
width:70%;
text-align: right;
margin: 0 auto;
padding: 5px;
}
#forget_pass a{
color: #000000;
text-decoration: none;
}
#forget_pass a:hover{
color: #ff0000;
text-decoration: underline;
}
.btn{
width:70%;
margin-left: 15%;
height: 40px;
border: 0;
font-size: 14px;
background-color: #fc5628;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
}
#copyright{
width:100%;
text-align: center;
padding-top: 20px;
color: #e0e0e0;
}
JS---：
/**
* Created by young on 17-7-5.
*/
function changeImg() {
var arrays =['1','2','3','4','5','6','7','8','9','0',
'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'];
code='';
for(var i=0;i<4;i++){
var r=parseInt(Math.random()*arrays.length);
code+=arrays[r];
}
document.getElementById('code').innerHTML=code;
}
function check() {
var input_code=document.getElementById("vcode").value;
if(input_code.toLowerCase()===code.toLowerCase()){
return true;
}else {
alert("验证码不正确！");
changeImg();
return false;
}
}
如果您有更好的想法，欢迎交流……一只正在飞起的前段小菜鸟～～
网友评论