使用JavaScriptjQuery实现页面特效第二章-实践.pptVIP

* 实践二 JavaScript函数和事件 实践目标 切换页面背景色 实现登录的功能 根据在下拉列表框中选择的内容，决定页面效果。 用户在下拉列表框中选择页面将要使用的背景颜色。当用户选择橙色时，浏览效果如下图： 任务一：使用onchange事件实现交互 （1）用表单元素select列出可以选择的背景颜色。 （2）声明函数，设置页面背景色是所选择的颜色。 （3）关联select标签的onchange事件和函数。 （4）使用浏览器预览效果。 任务一：使用onchange事件实现交互 任务一：使用onchange事件实现交互 请选择背景色：select id=selColor onchange=setBg(this) option请选择/option option value=purple紫色/option option value=orange橙色/option option value=gray灰色/option option value=yellow黄色/option /select ...... function setBg(obj){ if(obj.value!=请选择){ document.bgColor=obj.value; } } 任务一：使用onchange事件实现交互 function keyFun(){ var key=event.keyCode; //判断是否单击esc按键(取消键) if(key==27){ window.close(); //利用window对象的close方法关闭窗口 } //判断是否单击enter按键(回车键) if(key==13){ checkLogin(); } } 制作登录页面 完成登录的静态页面login.html。 按键盘的“Esc”键时，页面关闭。 点击键盘的“Enter”键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确。 任务二：制作登录页面 制作登录页面。 （1）准备登录的静态页面login.html。 （2）在login.html页面嵌入脚本，自定义函数checkLogin验证登录，判断用户输入的邮箱和密码是否正确。 （3）自定义函数keyFun，实现快捷键的操作，如果用户单击“Esc”，则关闭页面，如果用户单击“Enter”，则验证登录。 （4）事件和处理程序的绑定。按钮的“onclick”事件绑定“checkLogin()”函数，页面的“onkeypress”事件绑定“keyFun()”函数。 任务二：制作登录页面 任务二：制作登录页面 function checkLogin(){ var userEmail=document.loginForm.txtEmail.value; //用户输入的邮箱 var userPwd=document.loginForm.txtPwd.value; //用户输入的密码 if(userEmail=userPwd==1234567){ alert(登录成功); }else{ alert(登录失败); } } 在文本框中输入两个操作数和选择运算符后，在页面上显示输出结果。 （1）单击“计算”按钮后，修剪两个文本框左右两边的空格，修剪空格后，判断是否都输入了内容，只要其中一个文本框没有输入，则提示“请输入两个操作数”。 （2）在输入了数据的前提下，验证输入的是否都是数值字符串，只要其中一个输入错误，则提示“请输入正确的数值”。 任务二：制作登录页面 （3）单击“计算”按钮，在判断输入的数据格式都是正确的前提下，根据用户选择的运算符号（可以选择+、-、*、\）计算结果，并把结果显示在最后一个文本框中。 任务二：制作登录页面 End 谢谢观看 *