《javascript对象及系统对象课件.ppt》由会员分享，可在线阅读，更多相关《javascript对象及系统对象课件.ppt（38页珍藏版）》请在三一办公上搜索。
1、第9章 javascript对象与系统对象,学习目标,理解系统对象的分层结构掌握window对象的几个方法,浏览器对象简介 2-1,http:/,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,Window 窗口对象是所有页面内容的根对象，在编程时常常省略,浏览器对象简介 2-2,浏览器对象的分层结构,location 对象对应IE浏览器中的地址栏；history 对应IE浏览器中的前进/后退按钮,9.3 浏览器窗口对象window,window是JavaScript的
2、最顶层对象，代表了客户端的一个浏览器窗口或一个框架，一个独立的浏览器窗口或一个框架就是一个window对象。 对象名window在引用时可以省略，例如我们使用过的alert()方法是由window对象提供的，写全了应该是window.alert(),window对象的方法,创建弹出式窗口createPopup()弹出式pop-up窗口也是一个wondow对象，通过window对象的document子对象及其body对象可设置窗口中显示的内容，但弹出式窗口仅是一个没有边框及任何界面元素不可移动的空白区域，类似于漂浮在页面上的面板或画布，鼠标单击pop-up窗口外的任意位置即可关闭该窗口。,弹出式
3、窗口的应用说明,必须放在函数中使用，使用步骤如下：使用createPopup()方法创建窗口对象窗口中子对象document.body的获取必要时，使用子对象的style属性中的各种样式设置属性设置弹出窗口的外观使用子对象的innerHTML属性设置弹出窗口中要显示的文本信息使用窗口对象的show()方法设置窗口的显示位置和大小，show()方法的参数有5个，分别是：x坐标,y坐标, 宽度, 高度, 窗口位置所参照的页面中对象,弹出式窗口应用举例,课本例题h9-6.html，定义函数内容如下：创建窗口，使用变量p表示获取窗口中的document.body子对象，使用变量pbody表示设置窗口的
4、背景色style.backgroundColor为红色设置窗口的边框style.border为黑色实线1像素设置窗口中的显示内容为这是一个pop-up窗口！在pop-up外面点击即可关闭！设置窗口在浏览器窗口中(50,80)坐标处显示，大小为200*50当点击窗口中的按钮时调用上面函数设置窗口显示的位置：以按钮对象为参照物，坐标值(50,80)处,复习与提高,请大家创建一个弹出式窗口，具体要求如下：设置窗口背景色为浅灰色设置窗口中显示的内容为“HTML用于在页面中插入各种元素”设置窗口的显示位置为浏览器窗口中横坐标30，纵坐标20，显示大小为宽100，高30在页面中添加一个段落“网页制作中要使
5、用的基本知识包含三个模块，分别是html、css和javascript”，当光标悬停在”html”上方时，显示弹出窗口上面窗口的显示位置有什么问题？如何解决,授课任务,1. window对象中的setInterval()方法的功能及应用方法2. window对象中的setTimeout()方法的功能及应用方法3.图片轮换特效的设计过程实现,3循环定时器,循环定时器方法格式： id=setInterval( code, millisec) setInterval()方法用于创建一个循环定时器，并按参数millisec指定的毫秒数为周期，循环调用执行code指定的代码或函数，直到浏览器关闭或调用c
6、learInterval()方法结束。 结束循环定时器的方法格式： clearInterval( id ),循环定时器举例,创建页面文件time.html，在其中创建id为time的文本框，宽度为40个字符定义函数time1()，获取当前日期时间，并在文本框中显示该日期时间，使用循环定时器方法设置每间隔1000毫秒调用函数一次观察文本框中时间秒数的变化在文本框右侧增加按钮“结束定时器”定义函数clear1()，使用clearInterval()结束上面定时器，点击按钮时调用函数clear1(),4延时定时器,延时定时器方法格式： id=setTimeout ( code, millisec)
7、setTimeout()方法用于创建一个延时定时器，仅在参数millisec指定的毫秒数之后调用执行一次code指定的代码，并返回所创建定时器的ID值作为取消延时定时方法的参数。 结束循环定时器的方法格式： clearTimeout ( id )举例将上例中的setInterval()方法修改为setTimeout()方法，观察程序的执行结果；如何修改能让时间自动变化？,定时器应用小实例-图片轮换,图片轮换的关键点：如何确定图像区域中的新图像多长时间轮换一幅图所有图片命名规则：共同名字+下标设图像区域id为img1，则在脚本中使用document. getElementById(img1).s
8、rc即可设置新图片。更换图片的规律：若当前正在显示的是第n幅图，则接下来要显示的一定是第n+1幅图，若n+1值超出了最大下标，则从第一幅图重新开始；每次函数调用时都要使用上次图片的下标值，所以表示下标的变量必须设置为什么变量？,页面中的元素,在页面中设置一个盒子divimg，盒子居中，宽度和高度根据要显示的图片确定在盒子divimg中设置一个图片元素，要求如下：元素设置name和id为img1显示的图片文件为给定图片中的第一幅,定义函数imgswitch(),定义全局变量i,并设置初值为第一幅图的序号值1函数定义：全局变量i增值判断i的值是否超过最后一幅图的序号值，若超过则将i值变换为1设置序
9、号为i的图片作为图片区域中的内容使用循环定时器设置每间隔1秒钟调用函数一次思考：如何使用延时定时器完成每间隔1秒钟调用函数一次？,图片轮换中滤镜的应用,网页中经常使用css中的滤镜设置一些特殊效果，例如在图片或网页轮换中可以设置每幅图或每个页面切换进来时采用的滤镜效果，如矩形从大到小，矩形从小到大，圆形大小等滤镜filter:revealTrans：两个主要参数：duration设置效果的持续时间(秒)；transition设置效果样式，取值范围023；在图片区域中设置该滤镜样式在轮换函数中应用滤镜（使用apply()方法）和播放滤镜（使用play()方法）。该滤镜主要支持有IE内核的浏览器，
10、所以应用和播放之前先使用if(document.all)条件判断浏览器是否是IE内核的,滤镜应用页面及函数修改,页面图像区域增加样式filter:revealTrans(duration=2,transition=1)函数中，在更换图片之后判断浏览器是否是IE内核的，若是，则应用如下代码完成滤镜的应用和播放图像区域. filters.revealTrans.apply();图像区域.filters.revealTrans.play();,复习回顾,图片轮换中在脚本代码中要更换的是哪个元素的什么属性的取值？本页面中要换的图片文件由文件名中的哪一部分决定？如何得到这一部分的取值？图片切换的滤镜特效
11、需要在样式中使用哪个样式属性定义？需要定义的两个参数是什么，作用如何？取值范围如何？,盒子的定位,没有设置定位的盒子都按照普通流方式出现在浏览器窗口中，所谓普通流就是浏览器将层按照盒子在代码中的顺序和嵌套关系显示出来定位的应用,相对定位（Relative-1.html）,先设计3个普通流布局的盒子，id选择符分别是div1,div2,div3盒子大小400 x100，边距填充都是0，背景色随意设计修改div2样式， 设置为相对定位，观察效果#div2 position:relative; top:20px; left:50px; ,div1,div3,div2,左侧空出50px,上边空出20p
12、x,相对定位续,将第二个盒子设置为向左浮动，继续观察效果去掉第二个盒子的向左浮动，再将三个盒子都设置居中，继续观察页面效果将第二个盒子的定位坐标设置为0、0，再观察页面效果,相对定位应用及原理,总结使用相对定位的元素，无论是否移动，都将占据原来的位置。相对定位的元素不会影响其它元素。计算偏移量top、left的参照物是元素移动前所在位置。设置了相对定位的盒子，可以设置居中，也可以设置浮动,绝对定位应用（Absolute-1.html）,先设计3个普通流布局的盒子，盒子大小400 x100，边距填充都是0，背景色随意设计修改div2样式，设置为绝对定位，观察效果#div2 position:ab
13、solute; top:20px; left:50px; ,div1,div3,div2,距浏览器窗口左侧空出50px,距浏览器窗口上边空出20px,绝对定位续,设置div2居中，能否实现？修改div3盒子的宽度为500px，高度为200px；将绝对定位的div2盒子移动到未设置定位的div3盒子中，观察效果继续修改div3盒子的定位方式为绝对定位，top为60px，left为100px，观察效果继续修改div3盒子定位方式为相对定位，top为20，left为100，观察效果将div3设置为居中，观察效果去掉div3的居中，设置left为20，向左浮动，观察效果,绝对定位的原理,绝对定位的元素
14、会脱离文档流，不再占据位置。元素被绝对定位后，后面的元素就会视它不存在，从而占据其位置。上面的示例中，因为div2所在的容器是浏览器，所以 top:20px;是距离浏览器窗口的上端为20px； left:50px;是距离浏览器窗口的左端为50px。,div1,绝对定位的元素包含在容器中-1,div3,div2,距浏览器左边框50px,距浏览器上边框20px,修改absolute-1.html文件修改div3盒子的宽度为500px，高度为200px将绝对定位的div2盒子移动到未设置定位的div3盒子中，观察效果,div3,绝对定位的元素包含在容器中-2,div1,div2,距包含框左侧50px
15、,距包含框上边20px,修改absolute-1.html文件修改div3盒子定位方式为相对定位，top和left为0观察效果,div3,绝对定位的元素包含在容器中-3,div1,div2,距包含框左侧50px,距包含框上边20px,修改absolute-1.html文件修改div3盒子的定位方式为绝对定位，top为60px，left为100px观察效果,绝对定位的原理说明,计算绝对定位元素的偏移量，有以下三种情况：当绝对定位元素没有包含的元素时，参照物是浏览器窗口；当绝对定位元素包含在普通流的父容器时，参照物是浏览器窗口；当绝对定位元素包含在绝对定位或相对定位的父容器时，参照物是父容器。当页
16、面中需要存在绝对定位的元素时，往往不是将其直接在浏览器窗口中绝对定位，这种做法会因为窗口大小的变化而出现问题。最常用的做法是将绝对定位的元素包含在相对定位的元素中，相对定位的父元素坐标值设置为0、0即可。,根据用户选择的数字序号显示图片,打开图片特效1/image.html文件代码设置divimg居中，观察数字序号的位置是否发生变化去掉divimg居中，设置向右浮动，观察数字序号位置是否发生变化说明divimg使用了怎样的定位方式？里面的数字序号又使用了怎样的定位方式？,根据用户选择的数字序号显示图片,样式文件中需要做的修改：将divimg层定义为相对定位，默认坐标0增加class类选择符.n
17、um的定义，样式要求：宽25px,高25px,边距0,填充0,背景色#333,文本颜色#fff,字号10pt,加粗,文本行高25px,居中,鼠标手状,绝对定位,纵坐标160px增加id选择符#num1,#num2,#num3,#num4，设置横坐标分别是10px,40px,70px,100pximage.html文件中需要做的修改在层divimg中插入四个子层，id分别是num1,num2,num3,num4,同时引用class类选择符num,脚本代码要做的修改,修改函数imageswitch()的代码在设置图片之后设置当前显示图片的序号层背景色为#f33,其它图片序号层背景色为#333定义带
18、参数的函数cleartm(num)，函数体功能：将参数num的值设置为全局变量index的值，同时设置为当前要显示的图片通过循环设置当前显示图片的序号层背景色为#f33,其它图片序号层背景色为#333通过clearTimeout()方法终止延时定时器设置的函数imgchange()的调用过程修改image.html当鼠标移动到图片序号层上时调用函数cleartm(),同时传递参数当鼠标移走时，调用函数imageswitch()，继续进行图片轮换显示,漂浮广告的制作,制作漂浮广告的几个要点：漂浮广告总是使用盒子设置的，盒子的初始位置及高度和宽度根据页面具体要求设置，漂浮是指盒子在页面中的移动盒子
19、的移动是通过改变其左上角顶点坐标值进行的，横坐标和纵坐标都可以改变盒子的移动方向可通过两个方向变量控制，两个变量分别控制水平和垂直方向的移动，如果向右或向下移动，则相应的横坐标和纵坐标值增大，需要两个变量为+1，向左或向上移动，两个变量为-1两个方向变量值的更改是当层的边框移动到窗口可见范围之外时程序开始运行时必须获取当前窗口的宽度和高度当页面打开时广告就出现即函数是在页面的onload事件发生时执行的。,此处盒子需要使用哪种定位形式？为什么？,漂浮广告函数定义,定义全局变量gox=1;goy=1;设置移动的方向函数定义使用document.documentElement.clientWidt
20、h/clientHeight分别获取窗口的宽度和高度;获取盒子元素后，使用元素.offsetWidth/offsetHeight分别获取盒子的左上角顶点坐标值在条件判断之后设置盒子的移动方向使用元素.style.top/left重新设置盒子的左上角顶点坐标值，要有单位px设置每间隔多长时间调用函数一次使用window.onload完成函数的初次调用,获取页面或窗口高度和宽度说明,document.documentElement.clientWidth：获取窗口宽度document.documentElement.clientHeight：获取窗口高度document.body.clientWi
21、dth：获取的宽度值是浏览器窗口宽度-页面默认的左右边距值-页面左右边框宽度，若页面边距和边框设置为0，同document.body.clientHeight：获取页面内容的高度document.documentElement.offsetWidth同，都是针对整个窗口的document.documentElement.offsetHeight同,若页面内容没有边框，则document.body.offsetWidth同clientWidthdocument.body.offsetHeight同clientHeight若页面内容有边框，则document.body.offsetWidth-左右
22、边框宽=clientWidthdocument.body.offsetHeight-上下边框宽=clientHeight总结documentElement下的offsetWidth和clientWidth结果中包含页面的边距和边框所占的宽度值；而body下的offsetWidth只包含页面边框所占的宽度值，不包含页面边距所占的宽度值；body下的clientWidth不包含页面边距和边框所占宽度值,document.body.scrollWidth，获取的是滚动条可滚动的区域的宽度document.body.scrollHeight，获取的是滚动条可滚动的区域的高度将sysy.html页面窗口缩小后观察漂浮广告的效果注意：documentElement.scrollWidth/scrollHeight容易失去控制，不建议使用，演示效果进行说明,
