使用H5+css3+js實(shí)現(xiàn)帶驗(yàn)證碼的登錄頁(yè)面

發(fā)布時(shí)間：2020-10-28 19:51:18 來(lái)源：億速云閱讀：452 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章為大家展示了使用H5+css3+js實(shí)現(xiàn)帶驗(yàn)證碼的登錄頁(yè)面，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

<!DOCTYPE HTML>
<html>
 <head>
 <title>EasyBuy后臺(tái)管理系統(tǒng)</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;/*設(shè)置為獨(dú)立塊（換行）*/
 width:70%;
 margin:0 auto;
 height:35px;
 font-size:15pt;
 border-radius:5px;/*設(shè)置圓角樣式*/
 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;
 }
 /*層級(jí)選擇器*/
 #search_pass_link a{
 color:#000000;
 text-decoration:none; 
 }
 /*偽類(lèi)*/
 #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;/*設(shè)置指針鼠標(biāo)的樣式*/
 border-radius:20px;/*設(shè)置圓角樣式*/
 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系統(tǒng)登錄  
 </div> 
 <form action="main.html" οnsubmit="return check()">
 <div id="form_widget">
  <br>
  <input type="text" placeholder="請(qǐng)輸入賬號(hào)" id="box_name" class="txt" value="用戶(hù)名" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='用戶(hù)名'"/>
  <br>
  <input type="password" placeholder="請(qǐng)輸入密碼" 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="驗(yàn)證碼" value="驗(yàn)證碼" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='驗(yàn)證碼'"/><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 &copy;CopyRight 2016
  </div>
 </div>
 </form>
 </div>
 </div> 
 </body> 
 <script type="text/javascript">
 var code;//聲明一個(gè)變量用于存儲(chǔ)生成的驗(yàn)證碼
 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='';//重新初始化驗(yàn)證碼
 //alert(arrays.length);
 //隨機(jī)從數(shù)組中獲取四個(gè)元素組成驗(yàn)證碼
 for(var i=0;i<4;i++){
 //隨機(jī)獲取一個(gè)數(shù)組的下標(biāo)
 var r=parseInt(Math.random()*arrays.length);
 code+=arrays[r];
 //alert(arrays[r]);
 }
 //alert(code);
 document.getElementById('code').innerHTML=code;//將驗(yàn)證碼寫(xiě)入指定區(qū)域
 } 
 
 //效驗(yàn)驗(yàn)證碼(表單被提交時(shí)觸發(fā))
 function check(){
 //獲取用戶(hù)輸入的驗(yàn)證碼
 var input_code=document.getElementById('vcode').value;
 //alert(input_code+"----"+code);
 if(input_code.toLowerCase()==code.toLowerCase())
 {
 //驗(yàn)證碼正確(表單提交)
 return true;
 }
 alert("請(qǐng)輸入正確的驗(yàn)證碼!");
 //驗(yàn)證碼不正確,表單不允許提交
 return false;
 }
 </script> 
</html>

上述內(nèi)容就是使用H5+css3+js實(shí)現(xiàn)帶驗(yàn)證碼的登錄頁(yè)面，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

使用H5+css3+js實(shí)現(xiàn)帶驗(yàn)證碼的登錄頁(yè)面

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽