O 浏览器对象与特效

JavaScript中的浏览器对象与特效2回顾使用Date对象使用定时器理解事件机制掌握表单验证3目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象：windowdocumentHistoryJavascript特效4目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象：windowdocumentHistoryJavascript特效5浏览器对象简介对象Window的属性名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。screen包含有关客户端的屏幕和显示性能的信息。8Window对象名称说明alert(“m提示信息)显示包含消息的对话框。confirm(”提示信息”)显示一个确认对话框，包含一个确定取消按钮prompt(”提示信息”)弹出提示信息框open(url,name)打开具有指定名称的新窗口，并加载给定URL所指定的文档；close()关闭当前窗口setTimeout(”函数”,毫秒数)设置定时器：经过指定毫秒值后执行某个函数setInterval(“函数”,毫秒数)每经过指定毫秒值后计算一个表达式。clearTimeout(定时器对象)9Window对象htmlheadscriptfunctionopenwindow(){window.open(google.htm);}functionclosewindow(){window.close();}/script/headbodyforminputtype=buttonvalue=打开窗口onClick=openwindow()inputtype=buttonvalue=关闭窗口onClick=closewindow()/formbody使用Open方法打开新窗口使用Close方法关闭窗口添加单击事件10Open(“打开窗口的url”，”窗口名”，”窗口特征”)窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar：表示是否包含菜单栏scrollbars：表示是否包含滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；Window对象11htmlheadscriptlanguage=JavaScriptfunctionopenwindow(){open(adv.html,,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);}/script/headbodyonLoad=openwindow()h2看看和我一起打开的广告窗口/h2/body/htmlWindow对象使用Open方法打开广告新窗口添加页面加载事件12Window对象131.插入一个层Layer1，z-index=1；2.层中插入一幅图片。3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：varmyclock＝setTimeout（”move()”,500）;if(…)clearTimeout（myclock）;；Window对象14headscriptlanguage=JavaScriptfunctionmove(){document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);}/script/headbodyonload=move()divid=Layer1style=position:absolute;left:14px;top:44px;width:150px;height:102px;z-index:1ahref==piaofu.jpgwidth=150height=100border=0/a/divh2随机漂浮的广告/h2/bodyWindow对象定义层图片移动的函数move()每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果15Document对象Document的常用属性名称说明alinkColor设置或检索文档中所有活动链接的颜色bgColor设置或检索Document对象的背景色body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前URL的信息title包含文档的标题url设置或检索当前文档的URLvlinkColor设置或检索用户访问过的链接的颜色16Document对象Document的常用方法名称说明clear()清除当前文档close()关闭输出流并强制显示发送的数据write(text)将文本写入文档17Document对象htmlheadtitle无标题文档/titlescriptlanguage=JavaScriptfunctionchange(color){document.bgColor=color;}/script/headbodyh2移过来我变色给你看看！/h2fontsize=4spanonMouseOver=change('red')变红色/spanspanonMouseOver=change('blue')变蓝色/spanspanonMouseOver=change('yellow')变黄色/sapn/font/body/html利用document对象的bgColor属性改变背景色添加鼠标悬停事件18History对象history对象的常用方法名称说明back()加载History列表中的上一个URLforward()加载History列表中的下一个URLgo(urlornumber)加载History列表中的一个URL，或要求浏览器移动指定的页面数。19Location对象Location对象的常用属性名称说明host设置或检索位置或URL的主机名和端口号hostname设置或检索位置或URL的主机名部分href设置或检索完整的URL字符串名称说明assign(url)加载URL指定的新的HTML文档。reload()重新加载当前页replace(url)通过加载URL指定的文档来替换当前文档Location对象的常用方法20示例scriptlanguage=JavaScriptfunctionjump(){location.href=document.myform.menu1.value;}/script/headbodyformname=myform...selectname=menu1onChange=jump()option---请选择季节景色--/optionoptionvalue=spring.htm春天美景/optionoptionvalue=summer.htm夏天一色/option…根据用户的选择，修改跳转的网址添加选项改变事件21表单验证特效常用的表单验证效果信息弹出方式22表单验证特效常用的表单验证效果信息提示方式23浏览器对象简介scriptlanguage=“javascriptfunctioncheckname(){//验证用户名varuname=document.getElementById(uname);varunamel=document.getElementById(unamel);if(uname.value==||uname.value.length10){//alert(用户名长度不符合规范);unamel.innerHTML=用户名长度不符合规范;unamel.style.color=red;}else{unamel.innerHTML=用户名可用;unamel.style.color=green;}}/script24Div浮层的应用25Window对象单击登录显示div单击隐藏关闭div26html部分divid=mydivstyle=height:200;width:300;left:150;top:100;position:absolute;z-index:4;background-color:#fffffftablewidth=100%height=100%cellspacing=0cellpadding=0style=border-width:1;border-style:solid;border-color:#3333CCtrheight=30bgcolor=#3366CCstyle=color:#ffffff;font-weight:bold;font-size:14td div浮层登录/tdtdalign=rightahref=javascript:dispdiv()style=color:#ffffff;关闭/a /td/trtrtdcolspan=2/td/tr/table/divahref=javascript:showdiv()登录/a调用隐藏函数设置div的绝对定位调用显示函数27javascript部分scriptlanguage=“javascript”//div的显示函数functionshowdiv(){varmydiv=document.getElementById(mydiv);mydiv.style.display='inline';}//div的隐藏函数functiondispdiv(){varmydiv=document.getElementById(mydiv);mydiv.style.display='none';}/script更改div的样式为显示设置div的样式更改div的样式为隐藏28菜单栏标题栏选项栏29html部分tablewidth=160cellspacing=0cellpadding=0border=0trclass=monclick=changetd('ctd1')td科幻/td/trtrtdclass=distdid=ctd1tab;ewidth=100%height=100%cellspacing=0cellpadding=0border=0trtdclass=nonmouseover=this.className='cgbar'onmouseout=this.className='n'黑