(9)--4.8 JS Web设计与应用网页特效.ppt

WebWeb设计与应用设计与应用4.8 JS应用 网页特效Web设计与应用JavaScript可以实现各种网页特效，本讲将结合前面介绍的JavaScript基本知识，通过综合案例来详细介绍JavaScript网页特效的实现过程。本案例包括以下三个部分：l改变网页背景颜色l查看当前页面停留时间l弹出式密码保护页面功能说明功能说明代码说明：ldocument.bgColor 设置页面的背景色。linput type=button onClick=changebg(xx)用来触发用户的单击按钮事件，当事件触发时，调用changebg()函数，并传递对应的参数用以设置背景色。lchangebg(type)函数用于改变页面背景颜色改变网页背景颜色改变网页背景颜色代码说明：lpageOpen=new Date();创建一个时间对象,用于存储浏览页面的开始时间；lfunction stay()函数用于计算在本页面的停留时间;lpageNow=new Date();创建一个时间对象,用于存储页面的当前时间；lminutes=pageNow.getMinutes()-pageOpen.getMinutes();当前时间的分钟数减去开始时间的分钟数，得出停留的分钟数。lseconds=pageNow.getSeconds()-pageOpen.getSeconds();计算出停留的秒数差；ltime=seconds+minutes*60;总停留的秒数；lalert(“你在本页面停留了”+time+“秒钟！);弹出提示框，提示浏览者停留的时间；查看当前页面停留时间查看当前页面停留时间代码说明：lpassword()函数，用来进行密码保护的程序。lvar trytime=1;trytime变量记录密码输入次数。lvar correct=“123456”，correct变量用于存储正确密码lprompt(请输入密码(密码是123456):,);使用prompt方法提示用户输入一个密码（一个字符串），并赋给pass变量。lwhile(trytime 3)用于限制用户输入错误密码的次数。输入次数小于三次，判断是否与设定的密码相同，输入大于三次则返回上一页。lif(pass=correct)break;trytime+=1;var pass=prompt(密码错误,请重新输入!);判断输入的密码和设定的密码是否相同，如果相同，则执行break语句退出循环；如果不相同，trytime加1，并使用 prompt方法提示用户再次输入密码，重复上述while操作。lif(pass=correct&trytime=3)，用来判断最后一次输入的密码是否正确。如果密码正确，此条件为假，跳过if语句后面的代码，直接加载页面，就达到了通过密码验证的效果；如果密码不正确，同时输入错误次数也达到了3,则执行if后面的语句，弹出出错提示，并用history.go（-1）跳回此前的链接，达到了保护页面的作用。弹出式密码保护页面弹出式密码保护页面