<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄界面</title>
<style type="text/css">
*{margin:0; padding:0;}
a{text-decoration: none;}
.main_bar{width: 100%;height: 450px;margin-top: 200px;}
.login_form{width: 30%;height: 80%;margin: auto;border-radius: 15px;padding: 10px;background: #ECF0F1;
}.name,.pwd,.sbm_btn{
display: block;
width: 70%;
margin: auto;
height: 35px;
font-size: 16px;
border: 0;
border-color: transparent;
border-radius: 5px;
padding-left: 8px;
}
.yzm{
height: 35px;
margin: auto;
width: 72%;
line-height: 35px;
position: relative;
margin-bottom: 10px;
}
.code{
width: 50%;
height: 35px;
border: 0;
border-color: transparent;
font-size: 16px;
border-radius: 5px;
padding-left: 8px;
}
.code_pic{
display: block;
width: 40%;
height: 35px;
background-color: #34495e;
color: #FFF;
position: absolute;
top: 0px;
left: 60%;
border-radius: 5px;
text-align: center;
}
.name{
margin-top: 20px;
}
.sbm_btn{
text-align: center;
background-color: #1abc9c;
color: #fff;
line-height: 35px;
}
.re_pwd{
width: 25%;margin: 10px auto 10px;
text-align: center;
}
.re_pwd a{
text-decoration: none;
font-size: 14px;
color: #000;
}
.re_pwd a:hover{
cursor: pointer;
color: #16A085;
}
.errorTips{
width: 70%;
color: red;
font-size: 14px;
margin:0 auto;
height: 20px;
line-height: 20px;
}
.title{
width: 100%;
height: 30px;
color: #000000;
font-size: 20pt;
font-family: "微軟雅黑";
line-height: 60px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body onload="changeImg()">
<div class="main_bar">
<div id="login_form" class="login_form">
<div class="title">
系統(tǒng)登錄界面
</div>
<div class="title"></div>
<form action="login.html">
<div id="form_widgt">
<input type="text" name="name" class="name" placeholder="請輸入賬號"><br>
<input type="password" name="pwd" class="pwd" placeholder="請輸入密碼"><br>
<p class="yzm"><input type="text" name="code"? id="codeInput" class="code" placeholder="驗證碼">
<span id="code" class="code_pic" title="看不清 換一張"></span>
</p>
<p class="errorTips" id="errorTips"></p>
<a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登錄</a>
</div>
</form>
<div class="re_pwd"> <a href="">忘記密碼了</a></div>
</div>
</div>
<script type="text/javascript">
document.getElementById('code').onclick=changeImg;
function changeImg(){
var arrays=new Array(
'1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','j','i','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 error;
var codeInput = document.getElementById('codeInput').value;
if(codeInput.toLowerCase()==code.toLowerCase()){
console.log('123');
return true;
}else{
error = '驗證碼錯誤，請重新輸入';
document.getElementById('errorTips').innerHTML=error;
return false;
}
}
</script>
</body>
</html>
