1.新建05.html,输入代码模板
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>menu_filter</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
2.在body中添加div
标签,div中input
是输入框,type="text"
文本类型,type="password"
密码类型
<div>
<label class="txt">用户</label><input type="text" name="user"><br>
<label class="txt">密码</label><input type="password" name="pass"><br>
<label class="btn">重置</label><label class="btn">登录</label><br>
<span id="result"></span>
</div>
3.添加css样式, .txt {...}
文本样式,.btn {...}
按钮样式
div {
width: 300px;
margin: 0 auto;
}
label,
input {
display: inline-block;
width: auto;
line-height: 20px;
padding: 5px 10px;
margin: 10px 5px;
}
.txt {
width: 50px;
text-align: right;
}
.btn {
width: 110px;
text-align: center;
border: solid 1px #666;
background: linear-gradient(#555, #333);
color: #eee;
border-radius: 4px;
user-select: none;
cursor: pointer;
}
4.编写交互脚本,定义用户的文本框user,密码的密码框pass,重置按钮reset,登录按钮login,显示结果result。
var user = document.getElementsByName('user')[0]//通过name获取元素
var pass = document.getElementsByName('pass')[0]
var reset = document.getElementsByClassName('btn')[0]//通过class获取元素
var login = document.getElementsByClassName('btn')[1]
var result = document.getElementById('result')//通过id获取元素
5.添加reset按钮的鼠标点击事件,点击后清空user、pass、result的内容。
reset.onclick = function () {
user.value = ''
pass.value = ''
result.innerHTML = ''
}
6.添加login登录按钮的鼠标点击事件,点击后结果显示在result中。
login.onclick = function () {
result.innerHTML = '你的输入信息<br>用户:' + user.value + '<br>密码:' + pass.value
}
7.添加按钮样式.btn {...}
的伪类,:hover是鼠标移动到上方,:active是鼠标左键按下
.btn:hover {
background: linear-gradient(#5c5, #3c3);
}
.btn:active {
background: linear-gradient(#393, #393);
}
最终效果
------------完--------------