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
示例代码：
<script language="javascript" type="text/javascript">
var flag = confirm ("确认要删除此条信息吗？");
if(flag == true){
alert("删除成功！");
}else{
alert("你取消了删除");
}
</script>
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退出全屏
- 弹出确认消息框
- 关闭窗口
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window对象演示例子</title>
<script type="text/javascript">
/*弹出窗口*/
function open_adv(){
window.open("adv.html");
}
/*弹出固定大小窗口，并且无菜单栏等*/
function open_fix_adv(){
window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
/*全屏显示*/
function fullscreen(){
window.open("plan.html","","fullscreen=yes");
}
/*弹出确认消息框*/
function confirm_msg(){
if(confirm("你相信自己是最棒的吗？")){
alert("有信心必定会赢，没信心一定会输！");
}
}
/*关闭窗口*/
function close_plan(){
window.close();
}
</script>
</head>
<body>
<form action="" method="post">
<p><input name="open1" type="button" value="弹出窗口"
onclick="open_adv()" /></p>
<p><input name="open2" type="button" value="弹出固定大小窗口，且无菜单栏等"
onclick="open_fix_adv()"/></p>
<p><input name="full" type="button" value="全屏显示"
onclick="fullscreen()"/></p>
<p><input name="con" type="button" value="打开确认窗口"
onclick="confirm_msg()"/></p>
<p><input name="c" type="button" value="关闭窗口"
onclick="close_plan()"/></p>
</form>
</body>
</html>
6、关于匿名函数
顾名思义，匿名函数就是没有函数名的函数，其语法如下：
语法1， 直接定义：
(function(){JavaScript代码;}())
语法1，示例：
<input type="button" value="Test"
onclick="(function(){alert('Test');}()); " />
语法2， 事件处理中使用匿名函数：
事件名 = function(){…};
语法2，示例：
<input id="testId" type="button" value="Test" />
<script type="text/javascript">
document.getElementById("testId").onclick = function(){
alert("Test");
};
</script>
7、window对象的onload事件
onload事件在HTML文档加载完成后触发 ，如，
<body onload="事件处理函数();...">...</body>
或者
<script type="text/javascript">
//设置onload事件处理函数
window.onload = function(){
...
};
</script>
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对象与定时器制作动态时钟效果
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟特效</title>
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前日期
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML =
"<h1>现在是："+hh+":"+mm+":"+ss+"<h1>";
}
var myTime;
function startTime(){
//使用setInterval()每间隔指定毫秒后调用disptime()
myTime = setInterval("disptime()", 1000);
}
/*关闭定时器*/
function stopTime(){
clearTimeout(myTime);
}
</script>
</head>
<body onload="disptime();">
<div id="myclock"></div>
<input type="button" value=" 开始" onclick="startTime();" />
<input type="button" value=" 结束 " onclick="stopTime();" />
</body>
</html>
12、制作12小时制时钟
- 使用Date对象以及定时器，实现步骤如下：
- getFullYear()获得当前年份
- getMonth() + 1 获得当前月份
- getDate()获得当前日期
- 根据getHours()获得的小时，使用if语句判断当前时间是否大于12
- getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作12小时进制的时钟</title>
<script type="text/javascript">
function clock12h(){
var today = new Date(); //获得当前时间
//获得年、月、日，Date()函数中的月份是从0－11计算
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours(); //获得小时、分钟、秒
var minute = today.getMinutes();
var second = today.getSeconds();
var apm="AM"; //默认显示上午: AM
if (hour>12) { //按12小时制显示
hour=hour-12;
apm="PM" ;
}
var weekday = 0;
switch(today.getDay()){
case 0:
weekday = "星期日";
break;
case 1:
weekday = "星期一";
break;
case 2:
weekday = "星期二";
break;
case 3:
weekday = "星期三";
break;
case 4:
weekday = "星期四";
break;
case 5:
weekday = "星期五";
break;
case 6:
weekday = "星期六";
break;
}
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问本商城！</h2><h2>"+year+"年
"+month+"月"+date+"日 "+hour+":"+minute+":"+second+" "+apm+" "+weekday+"</h2>";
}
/*使用setInterval()每间隔指定毫秒后调用clock12h()*/
var myTime = setInterval("clock12h()",1000);
</script>
</head>
<body>
<div id="myclock"></div>
</body>
</html>
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实现跳转和刷新本页
- 详情页面实现返回主页面功能
主页面，示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
<style type="text/css">
body{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html' ">查看鲜花详情</a>
<a href="javascript:location.reload() ">刷新本页</a>
</body>
</html>
详情页面，示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鲜花详情页面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/flow.jpg" />
<p style="text-align:right;">
<a href="javascript:history.back() ">返回主页面</a>
</p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
蛋糕、果篮配送范围：全国大中城市。<br />
绿植配送范围：仅限于直辖市，省会城市市区。<br />
更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
</html>
16、总结：
- window对象有哪些常用的方法及其含义？
- Date对象有哪些方法？
- setTimeout()方法与setInterval()方法的区别？
- 事件onload和onclick的用法
- location和history在什么情况下使用？
17、浏览器对象模型
window对象是根对象，其下属还有很多其他对象，如下图：
JavaScript 第三章 DOM编程基础 使用document对象