<!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>