javascript 写一个登录界面

最新推荐文章于 2024-07-27 11:58:54 发布

yanguicehn

最新推荐文章于 2024-07-27 11:58:54 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/yanguicehn/article/details/115453492

版权

3.7.2 登录 login.html
登录：

在这里插入代码片

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<style>
				div{
					margin: 20px;
					width: 300px;
				}
				
				#msg{
					background-color: #C7254E;
					color: white;
					padding: 20px;
					border: 10px solid black;
					border-radius: 20px;
					font-size: 30px;
					display: none; //默认隐藏
				}
		</style>
		<script>
			//展示登录成功信息
			function doLogin(){
				var msg = document.getElementById("msg");
				var username = document.getElementById("username");
								var password = document.getElementById("password");
								
								alert( "用户名："+username.value+"，密码："+password.value );

				
				msg.innerHTML = "<font color='red'>登录成功</font><div>欢迎："+username.value+"</div>";
				msg.style = "display: block;"  //展示隐藏的div
			}
			
			//获取页面所有的input框，是text和password框，内容=空串
			function doClear(){
				var inputs = document.getElementsByTagName("input");
				for(var i=0; i<inputs.length; i++){
					if(inputs[i].type=='text' || inputs[i].type=='password'){
						inputs[i].value = '';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="msg"></div>

			<section>
				<fieldset>
					<legend>登录</legend>
						<div>
							<label for="username">用户名：</label>
							<input type="text" class="form-control"
							 autocomplete="off" 
							 autofocus="autofocus"
							 placeholder="请输入用户名..."
							 id="username" name="username"/>
						</div>
						
						<div>
							<label for="password">密码：</label>
							<input type="password" class="form-control"
							 autocomplete="off"
							 placeholder="请输入密码..."
							 id="password" name="password"/>
						</div>
						
						<div>
							<input type="submit" class="btn btn-primary" id="btnLogin" value="登录" onclick="doLogin()"/>
							<input type="button" class="btn btn-danger" id="btnClear" value="清除" onclick="doClear()"/>
						</div>
					</div>
				</fieldset>
			</section>
		</div>
	</body>
	<script>
		//后期绑定，给按钮增加onclick事件
		var btnLogin = document.getElementById('btnLogin');
		btnLogin.addEventListener('click', function(){
			doLogin();
		});
		
		var btnClear = document.getElementById('btnClear');
		btnClear.addEventListener('click', function(){
			doClear();
		})
	</script>
</html>

3.7.3 后期绑定 postbind-login.html
事件绑定有两种方式：
 前期绑定：上面的案例在按钮上直接调用onclick事件属于前期绑定
 后期绑定：按钮上没有事件，而是在页面最后addEventListener实现事件绑定
目前主流开发方式习惯后期绑定方式，一定要掌握。
去掉按钮上的onclick事件，在body标签后增加下面js脚本


```java
<script>
		//后期绑定，给按钮增加onclick事件
	var btnLogin = document.getElementById('btnLogin');
	btnLogin.addEventListener('click', function(){
		doLogin();
	});
	
	var btnClear = document.getElementById('btnClear');
	btnClear.addEventListener('click', function(){
		doClear();
	})
</script>


注：增加事件侦听：addEventListener（js事件名称，匿名函数），在js中大量使用匿名函数。

yanguicehn

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫