1. 程式人生 > >H5+css3+js搭建帶驗證碼的登入頁面

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" onload="changeImg()">
		<div class="main_bar"> 
			<div id="login_form">
				<div class="title">
					EasyBuy系統登入					
				</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" id="vcode" placeholder="驗證碼" value="驗證碼" onfocus="this.value=''" onblur="if(this.value=='')this.value='驗證碼'"/><span id="code" title="看不清,換一張"></span>
					<div id="search_pass_link">
						<a href="#">忘記密碼?</a>
					</div>					
					<input  type="submit" value="登入" class="btn" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="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;//宣告一個變數用於儲存生成的驗證碼
		document.getElementById("code").onclick=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>