zoukankan      html  css  js  c++  java
  • 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对象的讲解。

  • 相关阅读:
    JavaScript之DOM文档对象模型--对HTML元素的增删操作
    JavaScript之DOM文档对象模型--对HTML元素的访问操作
    JavaScript之BOM浏览器对象模型-history
    SpringBoot配置自定义日期参数转换器
    SpringMVC参数绑定(未完待续)
    一个简单的SpringBoot入门程序
    四种JavaEE架构简介
    浏览器禁用Cookie后的Session处理
    基础回顾: 关于Session的一些细节
    使用Cookie实现用户商品历史浏览记录
  • 原文地址:https://www.cnblogs.com/limits/p/2360739.html
Copyright © 2011-2022 走看看