Day 27 27.2 JS进阶之window对象

JS-Function对象之window对象

  • window 是客户端浏览器对象模型的基类，
  • window 对象是客户端 JavaScript 的全局对象。
  • 一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

（1）全局作用域

  • 在客户端浏览器中，window 对象是访问 BOM 的接口，如
    • 引用 document 对象的 document 属性，
    • 引用自身的 window 和 self 属性等。
    • 同时 window 也为客户端 JavaScript 提供全局作用域。
  • 由于 window 是全局对象，因此所有的全局变量都被解析为该对象的属性。
<script>

    var username = "dream";  //全局变量
    function f() {  //全局函数
        console.log(username);
    }

    console.log(window.username);  //返回字符串"dream"
    window.f();  //返回字符串"dream"

</script>

（2）使用系统对话框

window 对象定义了 3 个人机交互的方法，主要方便对 JavaScript 代码进行调试。

  • alert()：确定提示框。

    • 由浏览器向用户弹出提示性信息。
      • 该方法包含一个可选的提示信息参数。
      • 如果没有指定参数，则弹出一个空的对话框。

  • confirm()：选择提示框。。

    • 由浏览器向用户弹出提示性信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”按钮。
      • 如果点击“确定”按钮，则该方法将返回 true；
      • 单击“取消”按钮，则返回 false。
      • confirm() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。

  • prompt()：

    • 输入提示框。可以接收用户输入的信息，并返回输入的信息。
      • prompt() 方法也包含一个可选的提示信息参数，
      • 如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。

（3）访问客户端对象

使用 window 对象可以访问客户端其他对象，这种关系构成浏览器对象模型，window 对象代表根节点，浏览器对象关系的关系如图所示，每个对象说明如下。

  • window：客户端 JavaScript 顶层对象。每当 或 标签出现时，window 对象就会被自动创建。
  • navigator：包含客户端有关浏览器信息。
  • screen：包含客户端屏幕的信息。
  • history：包含浏览器窗口访问过的 URL 信息。
  • location：包含当前网页文档的 URL 信息。
  • document：包含整个 HTML 文档，可被用来访问文档内容及其所有页面元素。

（4）使用定时器

  • window 对象包含 4 个定时器专用方法，说明如下表所示，
    • 使用它们可以实现代码定时执行，或者延迟执行，
    • 使用定时器可以设计演示动画。
方法 说明
setInterval() 按照执行的周期（单位为毫秒）调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 方法生成的定时器
clearTimeout() 取消由 setTimeout() 方法生成的定时器

  • setTimeout() 方法能够在指定的时间段后执行特定代码。用法如下：

    • var o = setTimeout(code, delay)

  • 参数 code 表示要延迟执行的字符串型代码，将在 Windows 环境中执行，如果包含多个语句，应该使用分号进行分隔。

    • delay 表示延迟时间，以毫秒为单位。

  • 该方法返回值是一个 Timer ID，这个 ID 编号指向延迟执行的代码控制句柄。

    • 如果把这个句柄传递给 clearTimeout() 方法，则会取消代码的延迟执行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>

<input id="ID1" type="text" >
<button onclick="begin()">开始</button>
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }

</script>

</body>
</html>
posted @ 2023-04-27 16:04  Chimengmeng  阅读(34)  评论(0)    收藏  举报