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="#">忘记密码?</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;//声明一个变量用于存储生成的验证码
		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>









  • 16
    点赞
  • 82
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
好的,以下是一个基本的搜索框下拉列表的实现步骤: 1. HTML结构:在HTML中创建一个输入框和一个下拉列表的容器,下拉列表的容器初始设置为隐藏状态。 ```html <div class="search-container"> <input type="text" placeholder="请输入搜索关键字"> <div class="search-list-container"> <ul class="search-list"></ul> </div> </div> ``` 2. CSS样式:设置输入框的样式和下拉列表容器的样式,下拉列表容器的初始状态设置为 `display:none` 。 ```css .search-container { position: relative; } input[type="text"] { width: 300px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .search-list-container { position: absolute; top: 35px; left: 0; z-index: 99; width: 300px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none; } ``` 3. JS交互:监听输入框的键盘输入事件,在输入框中输入内容时,向后台发送请求获取匹配的搜索结果,将结果渲染到下拉列表中,并将下拉列表容器设置为显示状态。 ```javascript const input = document.querySelector('input[type="text"]'); const searchListContainer = document.querySelector('.search-list-container'); const searchList = document.querySelector('.search-list'); input.addEventListener('input', function(e) { const keyword = e.target.value; if (keyword.trim()) { // 发送请求获取匹配的搜索结果 const searchResults = getSearchResults(keyword); renderSearchList(searchResults); searchListContainer.style.display = 'block'; } else { searchList.innerHTML = ''; searchListContainer.style.display = 'none'; } }); function getSearchResults(keyword) { // 向后台发送请求获取搜索结果 const results = ['搜索结果1', '搜索结果2', '搜索结果3']; return results; } function renderSearchList(results) { let html = ''; results.forEach(result => { html += `<li>${result}</li>`; }); searchList.innerHTML = html; } ``` 以上就是一个简单的搜索框下拉列表的实现方法,您可以根据自己的需求进行样式和交互的修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值