《javascript对象及系统对象》由会员分享，可在线阅读，更多相关《javascript对象及系统对象（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是JavaSc
2、ript的最顶层对象，代表了客户端的一个浏览器窗口或一个框架，一个独立的浏览器窗口或一个框架就是一个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子对象，使用变
4、量pbody表示 设置窗口的背景色style.backgroundColor为红色 设置窗口的边框style.border为黑色实线1像素 设置窗口中的显示内容为“这是一个pop-up窗口！在pop-up外面点击即可关闭！“ 设置窗口在浏览器窗口中(50,80)坐标处显示，大小为200*50 当点击窗口中的按钮时调用上面函数 设置窗口显示的位置：以按钮对象为参照物，坐标值(50,80)处,复习与提高,请大家创建一个弹出式窗口，具体要求如下： 设置窗口背景色为浅灰色 设置窗口中显示的内容为“HTML用于在页面中插入各种元素” 设置窗口的显示位置为浏览器窗口中横坐标30，纵坐标20，显示大小为宽1
5、00，高30 在页面中添加一个段落“网页制作中要使用的基本知识包含三个模块，分别是html、css和javascript”，当光标悬停在”html”上方时，显示弹出窗口 上面窗口的显示位置有什么问题？如何解决,授课任务,1. window对象中的setInterval()方法的功能及应用方法 2. window对象中的setTimeout()方法的功能及应用方法 3.图片轮换特效的设计过程实现,3循环定时器,循环定时器方法格式： id=setInterval( code, millisec) setInterval()方法用于创建一个循环定时器，并按参数millisec指定的毫秒数为周期，循环
6、调用执行code指定的代码或函数，直到浏览器关闭或调用clearInterval()方法结束。 结束循环定时器的方法格式： clearInterval( id ),循环定时器举例,创建页面文件time.html，在其中创建id为time的文本框，宽度为40个字符 定义函数time1()，获取当前日期时间，并在文本框中显示该日期时间，使用循环定时器方法设置每间隔1000毫秒调用函数一次 观察文本框中时间秒数的变化 在文本框右侧增加按钮“结束定时器” 定义函数clear1()，使用clearInterval()结束上面定时器，点击按钮时调用函数clear1(),4延时定时器,延时定时器方法格式：
7、id=setTimeout ( code, millisec) setTimeout()方法用于创建一个延时定时器，仅在参数millisec指定的毫秒数之后调用执行一次code指定的代码，并返回所创建定时器的ID值作为取消延时定时方法的参数。 结束循环定时器的方法格式： clearTimeout ( id ) 举例 将上例中的setInterval()方法修改为setTimeout()方法，观察程序的执行结果；如何修改能让时间自动变化？,定时器应用小实例-图片轮换,图片轮换的关键点： 如何确定图像区域中的新图像 多长时间轮换一幅图 所有图片命名规则：共同名字+下标 设图像区域id为img1，则
8、在脚本中使用document. getElementById(img1).src即可设置新图片。 更换图片的规律： 若当前正在显示的是第n幅图，则接下来要显示的一定是第n+1幅图，若n+1值超出了最大下标，则从第一幅图重新开始； 每次函数调用时都要使用上次图片的下标值，所以表示下标的变量必须设置为什么变量？,页面中的元素,在页面中设置一个盒子divimg，盒子居中，宽度和高度根据要显示的图片确定 在盒子divimg中设置一个图片元素，要求如下： 元素设置name和id为img1 显示的图片文件为给定图片中的第一幅,定义函数imgswitch(),定义全局变量i,并设置初值为第一幅图的序号值1
9、函数定义： 全局变量i增值 判断i的值是否超过最后一幅图的序号值，若超过则将i值变换为1 设置序号为i的图片作为图片区域中的内容 使用循环定时器设置每间隔1秒钟调用函数一次 思考：如何使用延时定时器完成每间隔1秒钟调用函数一次？,图片轮换中滤镜的应用,网页中经常使用css中的滤镜设置一些特殊效果，例如在图片或网页轮换中可以设置每幅图或每个页面切换进来时采用的滤镜效果，如矩形从大到小，矩形从小到大，圆形大小等 滤镜filter:revealTrans： 两个主要参数：duration设置效果的持续时间(秒)；transition设置效果样式，取值范围023； 在图片区域中设置该滤镜样式 在轮换函
10、数中应用滤镜（使用apply()方法）和播放滤镜（使用play()方法）。 该滤镜主要支持有IE内核的浏览器，所以应用和播放之前先使用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盒子大小400x100，边距填充都是0，背景色随意设计 修改div2样式， 设置为相对定位，观察效果 #div2 position:r
12、elative; top:20px; left:50px; ,div1,div3,div2,左侧空出50px,上边空出20px,相对定位续,将第二个盒子设置为向左浮动，继续观察效果 去掉第二个盒子的向左浮动，再将三个盒子都设置居中，继续观察页面效果 将第二个盒子的定位坐标设置为0、0，再观察页面效果,相对定位应用及原理,总结 使用相对定位的元素，无论是否移动，都将占据原来的位置。 相对定位的元素不会影响其它元素。 计算偏移量top、left的参照物是元素移动前所在位置。 设置了相对定位的盒子，可以设置居中，也可以设置浮动,绝对定位应用（Absolute-1.html）,先设计3个普通流布局的盒
13、子，盒子大小400x100，边距填充都是0，背景色随意设计 修改div2样式，设置为绝对定位，观察效果 #div2 position:absolute; top:20px; left:50px; ,div1,div3,div2,距浏览器窗口左侧空出50px,距浏览器窗口上边空出20px,绝对定位续,设置div2居中，能否实现？ 修改div3盒子的宽度为500px，高度为200px；将绝对定位的div2盒子移动到未设置定位的div3盒子中，观察效果 继续修改div3盒子的定位方式为绝对定位，top为60px，left为100px，观察效果 继续修改div3盒子定位方式为相对定位，top为20，l
14、eft为100，观察效果 将div3设置为居中，观察效果 去掉div3的居中，设置left为20，向左浮动，观察效果,绝对定位的原理,绝对定位的元素会脱离文档流，不再占据位置。 元素被绝对定位后，后面的元素就会视它不存在，从而占据其位置。 上面的示例中，因为div2所在的容器是浏览器，所以 top:20px;是距离浏览器窗口的上端为20px； left:50px;是距离浏览器窗口的左端为50px。,div1,绝对定位的元素包含在容器中-1,div3,div2,距浏览器左边框50px,距浏览器上边框20px,修改absolute-1.html文件 修改div3盒子的宽度为500px，高度为200
15、px 将绝对定位的div2盒子移动到未设置定位的div3盒子中，观察效果,div3,绝对定位的元素包含在容器中-2,div1,div2,距包含框左侧50px,距包含框上边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类选择符.num的定义，样式要求： 宽25px,高25px,边距0,填充0,背景色#333,文本颜色#fff,字号10pt,加粗,文
