需求说明：
制作登录页面
点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确
实现思路：
准备登录的静态页面
在页面中嵌入脚本，自定义函数 checkLogin 验证登录，判断用户输入的邮箱和密码是否
自定义函数 keyFun，实现快捷键的操作。如果用户点击 Enter 键，则验证登录
事件和处理程序的绑定。按钮的 onclick 事件绑定 checkLogin() 函数，页面的 onkeypress 事件绑定keyFun() 函数
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无标题文档</title> <style type="text/css"> body{ font-size: 12px; } div#login{ margin: 0px auto; width: 300px; } div#login fieldset{ border: 1px solid #ccc; width: 230px; height: 120px; padding: 20px; } div#login fieldset legend{ margin-left: 25px; } div#login fieldset input{ border: 1px solid #ccc; } div#login fieldset input.txt{ width: 180px; } </style> </head> <body onkeypress="keyFun()"> <div id="login"> <form name="loginForm"> <fieldset id=""> <legend>用户登录</legend> <p> <label>邮箱：</label> <input type="text" id="txtEmail" class="txt" /> </p> <p> <label>密码：</label> <input type="password" id="txtPwd" class="txt"/> </p> <p> <input type="button" value="登录" onClick="checkLogin()"/> <a href="#">忘记密码了？</a> </p> </fieldset> </form> </div> <script type="text/javascript"> function checkLogin(){ var userEmail=document.getElementById("txtEmail").value; var userPwd=document.getElementById("txtPwd").value; if (userEmail=="123456@qq.com"&&userPwd=="123456") { alert("登录成功"); } else{ alert("登录失败"); } } function keyFun(){ var key=event.keyCode; if (key==13) { checkLogin(); } } </script> </body> </html>
