javascript写⼀个登录界⾯
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 = ElementById("msg");
var username = ElementById("username");
var password = ElementById("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 = ElementsByTagName("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"
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 = ElementById('btnLogin');
btnLogin.addEventListener('click',function(){
doLogin();
});
var btnClear = ElementById('btnClear');
btnClear.addEventListener('click',function(){
doClear();
})
</script>
</html>
3.7.3 后期绑定 postbind-login.html
事件绑定有两种⽅式：
前期绑定：上⾯的案例在按钮上直接调⽤onclick事件属于前期绑定
后期绑定：按钮上没有事件，⽽是在页⾯最后addEventListener实现事件绑定
⽬前主流开发⽅式习惯后期绑定⽅式，⼀定要掌握。
去掉按钮上的onclick事件，在body标签后增加下⾯js脚本
```java
<script>
js脚本开发
//后期绑定，给按钮增加onclick事件
var btnLogin = ElementById('btnLogin');
btnLogin.addEventListener('click',function(){
doLogin();
});
var btnClear = ElementById('btnClear');
btnClear.addEventListener('click',function(){
doClear();
})
</script>
注：增加事件侦听：addEventListener（js事件名称，匿名函数），在js中⼤量使⽤匿名函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。