【js】day05_BOM

最新推荐文章于 2025-02-19 19:48:36 发布

龙腾四海365

最新推荐文章于 2025-02-19 19:48:36 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/u011637069/article/details/48982723

JS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了浏览器对象模型(BOM)，包括window对象及其属性和方法，如定时器、screen对象等，并通过实例展示了如何使用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.BOM

Browser Object Model：浏览器对象模型，用来访问和操作浏览器窗口.

1)window对象

-window表示浏览器窗口

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员.
-常用属性
document：窗口中显示的HTML文档对象
history：浏览过窗口的历史记录对象
location：窗口文件地址对象
screen：当前屏幕对象
navigator：浏览器相关信息
-常用方法
alert(),confirm(),setTimeout,clearTimeout()

2)定时器

-周期性定时器
setInterval(exp,time);
clearInterval(tID);
eg:

day06.demo1.html;

<!doctype html>
<html>
  <head>
    <title>时钟</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript">
      var id; //启用的定时器的id
       //启动时钟
      function start(){
        id = setInterval(function(){
          var date = new Date().toLocaleTimeString();
          var span = document.getElementById("time");
          span.innerHTML = date;
         },1000);
       }
       //停止时钟
      function stop(){
        clearInterval(id);
       }
    </script>
  </head>
  <body>
    <h1>电子时钟</h1>
    <p>
       当前时间:<span id="time"></span>
    </p>
    <p>
      <button onclick="start();">启动</button>
      <button onclick="stop();">停止</button>
    </p>
  </body>
</html>

-一次性定时器
setTimeout(exp,time);
clearTimeout(tID);
eg:

day06.demo2.html;

<!doctype html>
<html>
  <head>
    <title>动态提示信息</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
      .hide{
        display:none;
      }
      .show{
        display:block;
        border:1px solid red;
        width:100px;
        margin:50px auto;
      }
    </style>
    <script type="text/javascript">
      function del(){
        //console.log(123);
         //删除成功，给予动态提示
         //1-先将提示信息显示出来
        var p = document.getElementById("msg");
        p.className="show";
         //2-然后过2秒再给隐藏
        var id = setTimeout(function(){
            p.className = "hide";
            clearTimeout(id);
         },2000);
      }
    </script>
  </head>
  <body>
    <p>
      <button onclick="del();">删除</button>
    </p>
    <p class="hide" id="msg">操作成功！</p>
  </body>
</html>