JavaScript 第二章 使用window对象

 

JavaScript 第一章 基本语法

JavaScript 第三章 DOM编程基础 使用document对象

JavaScript 第二章 使用window对象

1、技术目标

• window对象的open()方法打开并定制窗口
• Date对象处理日期
• window对象的setInterval()函数设置定时器
• window对象的setTimeout()函数设置延时器
• history、location对象的使用

2、window对象的常用属性、方法、事件

常用属性：

名称	说明
screen	有关客户端的屏幕和显示性能的信息
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

常用方法：

名称	说明
prompt	显示可提示用户输入的对话框
alert	显示带有一个提示信息和一个确定按钮的警示框
confirm	显示一个带有提示信息、确定和取消按钮的对话框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout	在指定的毫秒数后调用函数或计算表达式
setInterval	按照指定的周期（以毫秒计）来调用函数或表达式

常用事件：

名称	说明
onload	一个页面或一幅图像完成加载
onmouseover	鼠标移到某元素之上
onclick	当用户单击某个对象时调用的事件句柄
onkeydown	某个键盘按键被按下时
onchange	域的内容被改

3、使用confirm()方法

confirm方法的返回值为true或者false，当你点"确定"按钮时返回true，
否则false

示例代码：


4、使用open()方法

open方法可打开一个浏览器窗口并在窗口中加载你指定的页面，语法为：
window.open("弹出窗口的url","窗口名称","窗口特征“)

窗口特征有如下可选设置：

名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的x坐标、y坐标，以像素计
toolbar=yes | no  |1 | 0	是否显示浏览器的工具栏，黙认是yes
scrollbars=yes | no  |1 | 0	是否显示滚动条，黙认是yes
location=yes | no  |1 | 0	是否显示地址地段，黙认是yes
status=yes | no  |1 | 0	是否添加状态栏，黙认是yes
menubar=yes | no  |1 | 0	是否显示菜单栏，黙认是yes
resizable=yes | no  |1 | 0	窗口是否可调节尺寸，黙认是yes
titlebar=yes | no  |1 | 0	是否显示标题栏，黙认是yes
fullscreen=yes | no  |1 | 0	是否使用全屏模式显示浏览器，黙认是no，处于全屏模式的窗口必须同时处于剧院模式

5、window对象的属性、方法综合应用

• 使用winow对象完成如下功能：
• 弹出窗口
• 弹出固定大小且无菜单栏的窗口
• 当前页面全屏显示，使用快捷键Alt + F4退出全屏
• 弹出确认消息框
• 关闭窗口

示例代码：

 

          οnclick="open_adv()" />

 

          οnclick="open_fix_adv()"/>

 

          οnclick="fullscreen()"/>

 

          οnclick="confirm_msg()"/>

 

          οnclick="close_plan()"/>

6、关于匿名函数

顾名思义，匿名函数就是没有函数名的函数，其语法如下：

语法1， 直接定义：
    (function(){JavaScript代码;}())
语法1，示例：
οnclick="(function(){alert('Test');}()); " />

语法2， 事件处理中使用匿名函数：
    事件名 = function(){…};
语法2，示例：



7、window对象的onload事件

onload事件在HTML文档加载完成后触发 ，如，
...
或者


8、Date对象

Date 对象存储的日期为自 1970年1月1日00:00:00 以来的毫秒数
创建Date对象有如下语法，

语法1： var 对象名 = new Date("日期字符串");
语法1说明：
    日期字符串的格式为，"MM DD, YYYY, hh:mm:ss"，
    无日期字符串表示当前日期

语法2： var 对象名 = new Date(毫秒数);
语法2说明：
    参数为自1970年1月1日00:00:00以来的毫秒数
   
语法3： var 对象名 = new Date(年, 月, 日, 时, 分, 秒, 毫秒);
语法3说明：时、分、秒、毫秒可选

Date对象的常用方法有get开头的方法和set开头的方法，
get方法用于获取日期中的时间信息，set方法用于设置，如下：

Date方法分组    说 明
setXxx             这些方法用于设置时间和日期值
getXxx             这些方法用于获取时间和日期值

部分get或set方法说明：

值(指上表中的Xxx)	整数
Seconds 和 Minutes	0 至 59
Hours	0 至 23
Day	0 至 6（星期几）
Date	1 至 31（月份中的天数）
Months	0 至 11（一月至十二月）

比如：getDay()，返回值为0 ~ 6，0表示星期天

9、延时器与定时器

设置延时器： var 延时器对象 = setTimeout("函数()", 间隔时间);
延时器说明：
时间间隔的单位是毫秒，在一定的时间间隔后执行函数，执行后
延时器停止执行(只执行1次)，好比是空调的"定时关闭"功能

设置定时器： var 定时器对象 = setInterval("函数()", 间隔时间);
定时器说明：
时间间隔的单位是毫秒，按时间间隔定时执行函数(反复执行)

关闭定时器或延时器：
clearTimeout(定时器/延时器对象);

10、使用Date对象与定时器制作动态时钟效果

示例代码：

 




12、制作12小时制时钟

• 使用Date对象以及定时器，实现步骤如下：
• getFullYear()获得当前年份
• getMonth() + 1 获得当前月份
• getDate()获得当前日期
• 根据getHours()获得的小时，使用if语句判断当前时间是否大于12
• getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几

示例代码：

13、history对象

history对象提供最近浏览过的URL列表以及逐个返回访问过的页面的方法

history对象的方法：
    back()                 加载前一个URL
    forward()             加载下一个URL
    go(URL顺序号)      按顺序号加载URL，比如，go(-1)和back效果一样，
                              go(1)和forward效果一样

14、location对象

location对象提供当前页面的URL信息，还可刷新(重新加载)当前页面或指定加载
新的也没

location对象的属性：
    host            设置或返回主机名和当前URL的端口号
    hostname    设置或返回当前URL的主机名
    href            设置或返回完整的URL，通过该属性可指定当前窗口
                      加载新的页面

location对象的方法：
    reload()              刷新(重新加载)当前页面
    replace("URL")    用新的页面替换当前页面

15、location和history对象的使用

功能描述：

• 主页面使用href实现跳转和刷新本页
• 详情页面实现返回主页面功能

主页面，示例代码：










javascript:location.href='flower.html' ">查看鲜花详情 
javascript:location.reload() ">刷新本页



详情页面，示例代码

javascript:history.back() ">返回主页面

服务提示：

非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。

配送范围：

　　 鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。

　　 蛋糕、果篮配送范围：全国大中城市。

　　 绿植配送范围：仅限于直辖市，省会城市市区。

　　 更多详细的配送区域与相应配送费率请点击这里！

配送方式：

　　 专业鲜花、蛋糕礼品速递机构，送货上门。

服务时间：

　　 全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。

　　 其它时间送花酌情加收10-30服务费用。

替换原则：
由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。




16、总结：

• window对象有哪些常用的方法及其含义？
• Date对象有哪些方法？
• setTimeout()方法与setInterval()方法的区别？
• 事件onload和onclick的用法
• location和history在什么情况下使用？
  

17、浏览器对象模型

window对象是根对象，其下属还有很多其他对象，如下图：

JavaScript 第一章 基本语法

JavaScript 第三章 DOM编程基础 使用document对象