当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JavaScript 第二章 运用window对象

2012-10-07
JavaScript 第二章 使用window对象JavaScript 第一章 基本语法JavaScript 第三章 DOM编程基础 使用documen

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

示例代码：
<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是否显示浏览器的工具栏，黙认是yesscrollbars=yes | no? |1 | 0是否显示滚动条，黙认是yeslocation=yes | no? |1 | 0是否显示地址地段，黙认是yesstatus=yes | no? |1 | 0是否添加状态栏，黙认是yesmenubar=yes | no? |1 | 0是否显示菜单栏，黙认是yesresizable=yes | no? |1 | 0窗口是否可调节尺寸，黙认是yestitlebar=yes | no? |1 | 0是否显示标题栏，黙认是yesfullscreen=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 和 Minutes0 至 59Hours0 至 23Day0 至 6（星期几）Date1 至 31（月份中的天数）Months0 至 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();" />&nbsp;
<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+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+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="JavaScript 第二章 运用window对象" /><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 第二章 运用window对象


JavaScript 第一章 基本语法

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

阅读人气排行