H5+css3+js搭建帶驗證碼的登入頁面
阿新 • • 發佈：2020-10-13
本文例項為大家分享了H5+css3+js搭建帶驗證碼的登入頁面，供大家參考，具體內容如下
login.html
<!DOCTYPE HTML>
<html>
<head>
<title>EasyBuy後臺管理系統</title>
<meta charset="utf-8">
<style>
.main_bar{
width:1350px;
height:350px;
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;
font-size:20pt;
font-family:"微軟雅黑";
line-height:55px;
text-align:center;
}
#form_widget{
width:100%;
height:295px;
background-color:#808080;
}
.txt{
display:block;/*設定為獨立塊（換行）*/
width:70%;
margin:0 auto;
height:35px;
font-size:15pt;
border-radius:5px;/*設定圓角樣式*/
border:0;
padding-left:8px;
}
#vcode{
height:35px;
width:40%;
font-size:15pt;
margin-left:15%;
border-radius:5px;
border:0;
padding-left:8px;
}
#code{
color:#ffffff;/*字型顏色白色*/
background-color:#000000;
font-size:20pt;
font-family:"華康娃娃體W5";
padding:5px 35px 10px 35px;
margin-left:5%;
cursor:pointer;
}
#search_pass_link{
width:70%;
text-align:right;
margin:0 auto;
padding:5px;
}
/*層級選擇器*/
#search_pass_link a{
color:#000000;
text-decoration:none;
}
/*偽類*/
#search_pass_link a:hover{
color:#ff0000;
text-decoration:underline;
}
.btn{
width:70%;
margin-left:15%;
height:40px;
border:0;
font-size:14pt;
font-family;"微軟雅黑";
background-color:#FC5628;
color:#ffffff;
cursor:pointer;/*設定指標滑鼠的樣式*/
border-radius:20px;/*設定圓角樣式*/
border:0;
}
#copyright{
width:100%;
text-align:center;
padding-top:20px;
font-family:"微軟雅黑";
color:#e0e0e0;
}
</style>
</head>
<body leftmargin="0" οnlοad="changeImg()">
<div class="main_bar">
<div id="login_form">
<div class="title">
EasyBuy系統登入
</div>
<form action="main.html" οnsubmit="return check()">
<div id="form_widget">
<br>
<input type="text" placeholder="請輸入賬號" id="box_name" class="txt" value="使用者名稱" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='使用者名稱'"/>
<br>
<input type="password" placeholder="請輸入密碼" id="box_pass" class="txt" value="password" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='password'"/>
<br>
<input type="text" id="vcode" placeholder="驗證碼" value="驗證碼" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='驗證碼'"/><span id="code" title="看不清，換一張"></span>
<div id="search_pass_link">
<a href="#" rel="external nofollow" >忘記密碼？</a>
</div>
<input type="submit" value="登入" class="btn" οnmοuseοver="this.style.backgroundColor='#FF8D00'" οnmοuseοut="this.style.backgroundColor='#FC5628'">
<br>
<div id="copyright">
Power By WXH ©CopyRight 2016
</div>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var code;//宣告一個變數用於儲存生成的驗證碼
document.getElementById("code").οnclick=changeImg;
function changeImg(){
//alert("換圖片");
var arrays=new Array(
'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='';//重新初始化驗證碼
//alert(arrays.length);
//隨機從陣列中獲取四個元素組成驗證碼
for(var i=0;i<4;i++){
//隨機獲取一個數組的下標
var r=parseInt(Math.random()*arrays.length);
code+=arrays[r];
//alert(arrays[r]);
}
//alert(code);
document.getElementById('code').innerHTML=code;//將驗證碼寫入指定區域
}
//效驗驗證碼(表單被提交時觸發)
function check(){
//獲取使用者輸入的驗證碼
var input_code=document.getElementById('vcode').value;
//alert(input_code+"----"+code);
if(input_code.toLowerCase()==code.toLowerCase())
{
//驗證碼正確(表單提交)
return true;
}
alert("請輸入正確的驗證碼!");
//驗證碼不正確,表單不允許提交
return false;
}
</script>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。