I 浏览器对象与特效

回顾String字符串函数表单基本验证表单验证特效外部JS文件目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象：WindowLocationDocumentFormHistoryJavascript特效窗口对象location地址对象document文档对象form表单对象浏览器对象的分层结构window.document.myform.text1对象Window对象的常用属性名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。screen包含有关客户端的屏幕和显示性能的信息。(提示信息)显示包含消息的对话框。confirm(提示信息)显示一个确认对话框，包含一个确定取消按钮prompt(提示信息)弹出提示信息框open(url,name)打开具有指定名称的新窗口，并加载给定URL所指定的文档；close()关闭当前窗口setTimeout(函数,毫秒数)设置定时器：经过指定毫秒值后执行某个函数setInterval(函数,毫秒数)每经过指定毫秒值后计算一个表达式。clearTimeout(定时器对象)清除定时器Window对象的常用方法(){window.open(google.htm);}functionclosewindow(){window.close();}/script/headbodyforminputtype=buttonvalue=打开窗口onClick=openwindow()/inputtype=buttonvalue=关闭窗口onClick=closewindow()//formbody/html使用Open方法打开新窗口使用Close方法关闭当前窗口添加单击事件Window对象的方法示例(打开窗口的url，窗口名，窗口特征)窗口的特征如下，可以任意组合：height：窗口高度(number)width：窗口宽度(number)top：窗口距离屏幕上方的象素值(number)left：窗口距离屏幕左侧的象素值(number)toolbar：是否显示工具栏(yes|no或1|0)menubar：表示是否包含菜单栏(yes|no或1|0)scrollbars：表示是否包含滚动栏(yes|no或1|0)resizable：是否允许改变窗口大小(yes|no或1|0)location：是否显示地址栏(yes|no或1|0)status：是否显示状态栏内的信息(yes|no或1|0)Window对象=JavaScriptfunctionopenwindow(){window.open(a.html,,toolbar=0,scrollbar=0,location=0,status=0,menubar=0,resizable=0,width=650,height=150);}/script/headbodyonLoad=openwindow()h2看看和我一起打开的广告窗口/h2/body/htmlWindow对象使用Open方法打开广告新窗口添加页面加载事件{position:absolute;left:12;top:222;}/style/headbodyonMousemove=di.style.left=event.x;di.style.top=event.y;divclass=mystyleid=diimgsrc=car.jpg/div/body/html也可以用js自定义函数实现11实现图片随鼠标移动而移动Window对象对象History对象的常用方法名称说明back()加载History列表中的上一个URL指定的页面forward()加载History列表中的下一个URL指定的页面go(number)浏览器加载过的第number个页面对象Location的href属性设置或检索完整的URL字符串使用方法：window.location.href=示例：inputtype=buttonvalue=百度onclick=location='按钮单击事页面跳转=javascriptfunctionchangebg(pic){vartable=document.getElementById('tb');table.style.backgroundImage='url('+pic+')';}/scriptbodytablewidth=912height=78id=tbbackground=style1.jpgtrtdtableheight=10style=margin-top:40;margin-left:30;background-color:#FFFFCC;cursor:handcellspacing=1trtdwidth=10onclick=changebg('style1.jpg')bgcolor=#1E8AC8/tdtdwidth=10onclick=changebg('style2.png')bgcolor=#F35313/tdtdwidth=10onclick=changebg('style3.jpg')bgcolor=#93C724/tdtdwidth=10onclick=changebg('style4.jpg')bgcolor=#3D88AF/tdtdwidth=10onclick=changebg('style5.jpg')bgcolor=#B8BFC5/tdtdwidth=10onclick=changebg('style6.jpg')bgcolor=#8AB19F/td/tr/table/td/tr/table/body/html单击时更改背景图片设置表格样式背景变换图片div可以把变换分为几个部分：循环变换图片鼠标移动到图片，图片停止变换鼠标移动到图片外，图片重新开始变换单击按钮时切换按钮对应的图片考虑：在img中每隔一段时间更换img的src属性即可换图按钮在另一个悬浮在图片上的div当中页面加载变换即开始=width:250;height:250;id=imgdivimgstyle=border-style:solid;border-width:1;border-color:#A7A7A7width=100%height=100%id=mimgonmouseover=imgstop();onmouseout=imgstart();//divdivstyle=width:250;height:20;position:absolute;top:245;text-align:right;font-size:13;color:#ffffff;font-weight:boldid=btndiv/div图片框按钮部分注意：在图片上处理了鼠标移动事件imgstop()在图片上处理了鼠标移出事件imgstart()第一个div用来放置图片第二个div用来放置按钮，需要悬浮于第一个div之上=1;//图片序列开始varimgm=7;//图片序列结束varflag=1;//标记鼠标移动是否放在图片上vartm;//定时器//自动循环播放图片functioncgimg(){if(flag==0)return;varmimg=document.getElementById(mimg);mimg.src=+imgc+.jpg;imgc++;if(imgcimgm)imgc=1;tm=window.setTimeout(cgimg(),2000);}全局变量隔2秒自动调用一次0表示鼠标在图片上换另一张图片设置循环播放函数如果换到第八张重新从第一张开始鼠标移动到图片上functionimgstop(){flag=0;window.clearTimeout(tm);}//鼠标移动到图片外functionimgstart(){flag=1;tm=window.setTimeout(cgimg(),1000);}//鼠标移动到按钮时functionmoimg(imgurl){window.clearTimeout(tm);varmimg=document.getElementById(mimg);mimg.src=imgurl;}标记鼠标在图片上清除定时器清除定时器标记鼠标离开图片1秒侯启动变换图片函数Img设定为按钮指定的图片初始化按钮functioninitbtn(){varbtndiv=document.getElementById(btndiv);for(i=imgc,j=1;i=imgm;i++,j++){btndiv.innerHTML=btndiv.innerHTML+astyle=\cursor:hand\onmouseover=\moimg('+i+.jpg')\onmouseout=\imgstart()\+j+/a|;}}在按钮的浮层上加上按钮鼠标离开按钮时变换鼠标进入按钮时varimgc=1;//图片序列开始varimgm=7;//图片序列结束循环产生多个按钮(连接)同时加上按钮事件鼠标移动到按钮时显示按钮所对应的图片鼠标移开时，重新开始循环播放对象单击登录显示div单击隐藏