本篇文章為大家展示了使用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>上述內容就是使用H5+css3+js實現帶驗證碼的登錄頁面，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
