<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>
<span>用户名:</span>
<input type="text" placeholder="请输入用户名..." id="username">
<span>密码:</span>
<input type="password" placeholder="请输入用户名..." id="passwd">
<input type="button" value="登录" onclick="login()">
<input type="button" id="btnClear" value="清除" onclick="doClear()" />
</div>
<script type="text/javascript">
let accountAll = [{ // 存储账户json数据的数组
username: 123,
passwd: 'qwe'
},
{
username: 456,
passwd: 'asd'
},
{
username: 789,
passwd: 'zxc'
}
]
function login() { //登陆判断
let username = document.getElementById('username').value;
let passwd = document.getElementById('passwd').value;
let account = accountAll.filter(function(e) {
return e.username == username
})[0]; // 筛选账号返回数组，不存在则返回空数组
if (!account) {
alert('账户不存在');
} else {
if (account.username == username && account.passwd == passwd) {
alert('登陆成功');
} else {
alert('密码错误');
}
}
}
function doClear() { //获取页面所有的input框，是text和password框，内容=空串
let inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].value = '';
}
}
}
//给清除按钮增加onclick事件
let btnClear = document.getElementById('btnClear');
btnClear.addEventListener('click', function() {
doClear();
});
</script>
</body>
</html>
版权声明：本文为m0_67063430原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。