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对象的讲解。

原文地址:https://www.cnblogs.com/limits/p/2360739.html