Javascript4-Window对象,对话框,定时器

JavaScript

第4章:JavaScript常用DHTML对象：

Window对象,对话框,定时器回顾JavaScript内置对象的分类JavaScriptString对象JavaScriptArray对象JavaScriptDate对象本章内容JavaScriptDHTML概述JavaScriptDHTMLWindow对象JavaScript对话框JavaScript定时器DHTML介绍DHTML的定义使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTMLDHTML是一种浏览器端的动态网页技术DHTML介绍DHTML的功能动态改变字体大小和字体颜色动态设定文档元素的位置、内容，甚至隐藏和显示元素可以通过事件响应机制制作动态折叠的树形结构和菜单可以通过定时器制作时钟、日历可以弹出对话框与用户进行交互可以通过表单提交用户填写的信息通过动态样式表可以设定更多的显示效果...DHTML对象模型DHTML对象模型将HTML标记、属性和CSS样式都对象化可以动态存取HTML文档中的所有元素可以使用属性name或id来存取或标记对象改变元素内容或样式后浏览器中显示效果即时更新DHTML对象模型包括浏览器对象模型和Document对象模型DHTML对象模型WindowFramesHistoryNavigatorDocumentLocationEventFormTableAnchorImageIframeTableRowTableCellInputSelectTextarea...DHTML对象模型DHTMLDOM与W3CDOM的比较比较项目DHTMLDOMW3CDOM概念DHTML中的Document对象模型标准的树形结构文档操作接口浏览器支持IE4.0以上IE5.0以上实现方法对象数组Document.all树形节点对象Node.Element操作语言JavaScriptJavaScript、Java、C++等文档对象HTMLHTML、XMLWindow对象常用属性名称功能说明document对象，代表窗口中显示的HTML文档frames窗口中框架对象的数组history对象，代表浏览过窗口的历史记录location对象，代表窗口文件地址，修改属性可以调入新的网页defaultStatus,status窗口的状态栏信息closed窗口是否关闭，关闭时该值为truename窗口名称，用于标识该窗口对象Window对象常用属性名称功能说明opener对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为nullparent对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口top对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口self对象，指当前Window对象window对象，指当前Window对象，同selfWindow对象常用方法名称功能说明alert(),confirm,prompt()弹出简单对话框close(),open()关闭、打开窗口print()打印窗口中网页的内容focus(),blur()请求或放弃窗口为当前操作窗口moveBy(),moveTo()移动窗口resizeBy(),resizeTo()调整窗口大小scrollBy(),scrollTo()滚动窗口中网页的内容setInterval(),clearInterval()设置或取消周期执行的定时器setTimeout(),clearTimeout()设置或取消一次性执行的定时器Window对象主要功能窗口的打开和关闭对话框状态栏定时器内容滚动调整窗口大小和位置Screen对象History对象Navigator对象Location对象窗口的打开和关闭书写格式功能说明window.open(url,name,config)打开新窗口url为打开的超链接name为窗口的名称config为窗口的配置参数返回新窗口对象window.close()关闭窗口窗口的打开和关闭config参数具体元素menubar菜单条toolbar工具条location地址栏directories链接status状态栏scrollbars滚动条resizeable可调整大小width窗口宽，以像素为单位height窗口高，以像素为单位参数值为yes或no参数值为数字值窗口的打开和关闭程序示范：打开google搜索窗口varconfig='menubar=yes,toolbar=no,location=no,';config+='directories=no,status=yes,';config+='scrollbars=yes,resizable=yes,';

config+='width=500,height=300';varopenurl="";window.open(openurl,"popwin",config);//仅仅打开窗口varmywin=window.open(openurl,"popwin",config);mywin.close();//关闭打开的窗口内容滚动书写格式功能说明window.scroll(x,y)滚动窗口到指定位置单位为像素window.scrollTo(x,y)同scroll方法window.scrollBy(ax,ay)从当前位置开始，向右滚动ax像素，向下滚动ay像素内容滚动程序示范：自动滚屏阅读...vartimmerID=null;functionupdateScroll(){//更新滚动位置

window.scrollBy(0,1);}functionmystart(){//启动定时器

timmerID=window.setInterval("updateScroll

()",100);}functionmystop(){//停止定时器

window.clearInterval(timmerID);}...mystartmystopupdateScroll状态栏书写格式功能说明window.status状态栏中的字符串信息允许进行设置或读取window.status="hello";varstr="您好！今天是"+(newDate()).toLocaleString();window.status=str;对话框分类对话框简单对话框窗口对话框alert

提示框confirm

确认框prompt

输入框showModalDialog

(IE4.0)showModelessDialog

(IE5.0)简单对话框书写格式功能说明alert(str)提示对话框，显示str字符串的内容按[确定]关闭对话框confirm(str)确认对话框，显示str字符串的内容按[确定]按钮返回true，[取消]返回falseprompt(str,value)输入对话框，采用文本框输入信息按[确定]按钮返回输入值，[取消]关闭简单对话框显示效果比较：alert("您好！");confirm("您好吗？");prompt("您贵姓？","陈");简单对话框返回值比较：varfirstname=prompt("您贵姓？","陈");if(confirm("您确定？")==true){ alert(firstname+"先生，您好！");}不返回值返回值为输入字符串返回值为true或false窗口对话框书写格式功能说明showModalDialog(url,arguments,config)IE4或更高版本支持该方法showModelessDialog(url,arguments,config)IE5或更高版本支持该方法参数说明url打开链接arguments传入参数config窗口配置参数窗口对话框config外观配置参数status状态栏resizable可调整大小help是否显示标题栏中的按钮center是否显示在桌面正中间dialogWidth对话框宽dialogHeight对话框高dialogTop对话框左上角的y坐标dialogLeft对话框左上角的x坐标参数值为yes或no值为数字

单位为像素...<scriptlanguage="javascript">functionshowDialog(){ varconfig='dialogWidth:320px;dialogHeight:180px;'; config+='dialogTop:140px;dialogLeft:250px;'; config+='center:no;help:no;resizable:no;status:no'; showModalDialog("test4-1a.htm",input1,config);}</script><inputtype="text"id="input1"value=""readonly><inputtype="button"id="selectBtn"onclick="showDialog()"value="选择日期">...窗口对话框程序示范：调用窗口对话框的方法传入input1对象<scriptlanguage="javascript">//确定按钮事件，更新输入框中的值functionok(){ vartheInput=dialogArguments; ... theInput.value=theYear+"-"+theMonth+"-"+theDate; window.close();}</script><inputtype="button"name="okbtn"value="确定"onclick="ok()">窗口对话框程序示范：窗口对话框页面的编写设置传入对象input1的值窗口对话框运行结果：选择日期对话框调用页被调用对话框定时器书写格式功能说明tID=setInterval(exp,time)周期性触发执行代码expexp为字符串格式的执行语句time为时间周期，单位为毫秒返回已经启动的定时器clearInterval(tID)停止启动的定时器tID=setTimeout(exp,time)一次性触发执行代码expexp为字符串格式的执行语句time为间隔时间，单位为毫秒返回已经启动的定时器clearTimeout(tID)停止启动的定时器定时器定时器的实际运用网页动态时钟制作倒计时跑马灯效果幻灯片效果自动滚屏阅读制作网页小游戏……...vartimmerID=null;functionupdateTime(){//更新状态栏显示当前时间

varnow=(newDate()).toLocaleString();window.status="当前时间："+now;}functionmystart(){//启动定时器

timmerID=window.setInterval("updateTime()",1000);}functionmystop(){//停止定时器

window.clearInterval(timmerID);}...定时器程序示范：网页动态时钟(采用setInterval)mystartmystopupdateTime定时器程序示范：网页动态时钟(采用setTimeout)...vartimmerID=null;functionupdateTime(){//更新状态栏显示当前时间

varnow=(newDate()).toLocaleString();window.status="当前时间："+now;mystart();}functionmystart(){//启动定时器

ti