JavaScript学习之二JavaScript浏览器对象模型详解---window对象（下）

　　接上一篇

 　　　　3.    系统提示框
    • window.alert   显示消息提示框，用法 window.alert([Message]); （注：一般都省略window对象，直接使用alert）
    •  window.confirm   显示一个确认对话框，其中包括“确定”和“取消”按钮。         

                        小示例：用户单击"确定"按钮时，window.confirm返回true，用户单击"取消"按钮时，window.confirm返回false。　　　　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>confirm示例</title>
 6     <script type="text/javascript">
 7 　　　　if(window.confirm("确定关闭窗口？"))
 8             alert("true");    
 9 　　　　else
10             alert("false");
11 　　</script>
12 </head>
13 <body>
14 </body>
15 </html>
    • window.prompt   显示一个消息提示框，其中包含一个文本输入框。                

                        用法：window.prompt([Message],[default]);      Message是显示在提示框上的文本，default是设置文本框的默认值。如图：

　　　　　　　　　　

            4.    状态栏控制

                    通过window.status属性进行控制。如：window.status="错误提示";    这样做会影响用户体验，所以不建议对状态栏信息进行修改。  

 

 　　　　5.    定时操作   

                    定时操作是web开发中常用功能，在基于Ajax技术的开发中，有一类应用需要定时的访问后台服务器并且更新前台页面，这类应用实现通常依赖于定时操作函数。

                    定时操作函数有四个：window.setInterval、window.clearInterval、window.setTimeout、window.clearTimeout，这四个函数都是window对象的方法，这说明浏览器中的定时操作是有浏览器窗口完成的。下面对这四种方法的用法详细介绍

      •    window.setInterval     设置定时器，每隔一段时间执行指定的代码    window.setInterval(code,time);

                                 说明： code参数可以是一个函数，也可以是一个字符串形式的JavaScript代码

                                            time参数是执行代码的时间间隔，单位是ms。

 

                                示例：　　　　　　　　　　　

1 <script type="text/javascript">
2     window.setInterval(function(){
3         alert("定时器");
4     },5000);
5 </script>
      •    window.clearInterval    清除setInterval函数设置的定时器    window. clearInterval(time); 、                       

　　　　　　　　　　　　示例：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6 　　　　//定时器
 7 　　　　var timer;
 8 　　　　//开始计数
 9 　　　　function startCount() {
10 　　　　　　　//timer将保存计数器的ID
11             timer = window.setInterval(function () {
12 　　　　　　　　　//从div中取得当前计数值
13 　　　　　　　　　var divid = document.getElementById("counter");
14 　　　　　　 　　 var num = Number(divid.innerHTML);
15 　　　　　　 　　//计数值加1，更新页面
16                 divid.innerHTML = String(num + 1);
17             },1000);
18         }
19 
20 　　　　　//停止计数
21 　　　　　function pause() {
22             window.clearInterval(timer);
23         }
24 </script>
25 </head>
26 <body>
27     <div id="counter">0</div>
28     <input type="button" onclick="startCount()" value="开始计数" />
29     <input type="button" onclick="pause()" value="停止计数" />
30 </body>
31 </html>
      •    window.setTiimeout    设置定时器，每隔一段时间执行指定的代码    window.setTiimeout(code,time);

                                 说明： code参数可以是一个函数，也可以是一个字符串形式的JavaScript代码，setTiimeout与setInterval区别在于setTiimeout对指定的代码只执行一次。

                                            time参数是执行代码的时间间隔，单位是ms。

                                示例：

1 <script type="text/javascript">
2      window.setTimeoutl(function(){
3          alert("setTimeout");
4      },5000);
5  </script>
      •    window.clearTimeout     清除 setTiimeout 函数设置的定时器    window. clearTimeout(time);    

　　　　　　　　　　　　示例：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6 　　　　//定时器
 7 　　　　var timer;
 8 　　　　//开始计数
 9 　　　　function startCount() {
10 　　　　　　//从div中取得当前计数值
11 　　　　　　var divid = document.getElementById("counter");
12　　　　　　 var num = Number(divid.innerHTML);
13 　　　　　　//计数值加1，更新页面
14             divid.innerHTML = String(num + 1);
15 　　　　　　//为了让setTimeout在执行一次后继续执行
16             timer = window.setTimeout(startCount, 1000);
17         }
18 
19 　　　　//停止计数
20 　　　　function pause() {
21             window.clearTimeout(timer);
22         }
23 </script>
24 </head>
25 <body>
26     <div id="counter">0</div>
27     <input type="button" onclick="startCount()" value="开始计数" />
28     <input type="button" onclick="pause()" value="停止计数" />
29 </body>
30 </html>

　　到这里window对象就写完了，接下来我们将继续document、location、screen、navigation、history对象的讲解。

posted @ 2012-02-21 00:15  程序老炮儿清道夫  阅读(1840)  评论(9)  编辑  收藏  举报