一篇文章彻底学会BOM

程序员文章站 2022-04-11 16:51:40

...

一篇文章彻底学会BOM

一、BOM

一篇文章彻底学会BOM

二、window对象

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>

  //window对象是*对象
  //document

  //window.document.getElementById("box");
  //alert()
  //prompt
  //confirm()

  //window.alert("哈哈");
  //window.console.log("呵呵");

  //定义的全局变量，函数也是window的
  //var a = 11;
  //console.log(a);
  //console.log(window.a);

  //  function fn() {
  //    console.log("哈哈");
  //  }
  //
  //  window.fn();



  //关于this
  //函数内部的this是window
  //方法内部的this，指向当前的对象
  //构造函数内部的this，新创建的对象
  //事件里面的this，当前对象
  //  function fn() {
  //    console.log(this);
  //  }
  //
  //  window.fn();

  var num = 11;
  function fn() {
    var num = 22;
    console.log(num);//22
    this.num = 33;//window.num = 33;
    console.log(num);//22
  }

  fn();
  console.log(num);//33

</script>

</body>
</html>

1.window.onload（掌握）

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>


    //作用：等待页面加载完成后，才会开始执行。会等待页面所有的资源都加载完成，才会执行。
    //    window.onload = function () {
    //      var box = document.querySelector("#box");
    //      console.log(box);
    //    }

  </script>
</head>
<body>

<div id="box"></div>
<img id="img" src="15.jpg" alt="">

<script>

  //on:当..时候  load:加载
  //加载完成的时候，会触发这个onload事件
  //  window.onload = function () {
  //    console.log("哈哈");
  //  }


  //等页面加载完成，所有的资源都加载完成
  window.onload = function () {
    var img = document.querySelector("#img");
    console.log(img.width);
    console.log(img.height);
  }



</script>

</body>
</html>

2.window.open与window.close(了解)

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>打开</button>
<button>关闭</button>

<script>


  //window.open:开启一个新的窗口
  //window.close:关闭一个窗口
  var button1 = document.querySelectorAll("button")[0];
  var button2 = document.querySelectorAll("button")[1];

  var newWin;
  button1.onclick = function () {
    //打开一个新的窗口
    //参数1：新窗口载入的地址。
    newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
  }

  button2.onclick = function () {
    newWin.close();
  }

</script>

</body>
</html>

三、延时器与定时器

1.setTimeout

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>开启</button>
<button>关闭</button>
<script>


  var btn1 = document.querySelectorAll("button")[0];
  var btn2 = document.querySelectorAll("button")[1];

  var timeId;

  btn1.onclick = function () {

    //设置了延时器，能让一个函数延迟一段时间才执行。
    //第一个参数：函数的名字
    //第二个参数：延迟的时间,单位毫秒
    //返回一个唯一的number类型的数值，定时器的id
    timeId = setTimeout(function() {
      console.log("boom shakalaka")
    }, 5000);
    console.log(timeId)
  }

  btn2.onclick = function () {
    //清除延时器
    clearTimeout(timeId);
  }


</script>

</body>
</html>

2.setInterval

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>开启</button>
<button>关闭</button>
<script>


  var btn1 = document.querySelectorAll("button")[0];
  var btn2 = document.querySelectorAll("button")[1];

  var timeId;

  btn1.onclick = function () {

    //开启定时器
    //参数1：需要重复执行的函数
    //参数2；间隔的事件
    //返回值：定时器的id
    timeId = setInterval(function(){
      console.log("我没病，我真的没病");
    }, 1000);
  }

  btn2.onclick = function () {
    //清除定时器
    console.log("吃药了")
    clearInterval(timeId);
  }


</script>

</body>
</html>





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #box {
      width: 400px;
      height: 50px;
      background-color: #acffc2;
      border: 5px solid black;
      margin: 100px auto;
      font: bold 24px/50px 楷体;
      text-align: center;
      color: red;
    }
  </style>
</head>
<body>
<div id="box"></div>
<script>


  //把时间显示到box中
  var box = document.querySelector("#box");

  function setTime() {
    var date = new Date();
    box.innerText = date.toLocaleString();
  }

  setTime();//手动调用一次

  setInterval(setTime, 1000);



  //倒计时案例


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>

  //开启了一个定时器，每秒中执行一次function
  var timeId = setInterval(function () {
    console.log("1111");
  }, 1000);

</script>

</body>
</html>

四、location对象

location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>

  console.log(window.location);
  console.log(location);


  console.log(navigator.userAgent);
</script>

</body>
</html>

1.常用属性和方法

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">注册成功，3秒后跳转到首页</a>


<script>

  //location.href:页面跳转
  var count = 3;
  var link = document.querySelector("a");

  //使用定时器，修改a标签的内容
  var timeId = setInterval(function () {

    count--;
    link.innerText = "注册成功，" + count + "秒后跳转到首页";

    if(count == 0) {
      //清除定时器
      clearInterval(timeId);
      location.href = link.href;
    }

  }, 1000);

</script>
</body>
</html>

五、其他对象

一篇文章彻底学会BOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<a href="24-history对象-1.html">跳转</a>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div>哈哈哈</div>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  //获取屏幕分辨率
  console.log(screen.width);//屏幕的宽度
  console.log(screen.height);//屏幕的高度
  console.log(screen.availWidth);//浏览器可占用的宽度
  console.log(screen.availHeight);//浏览器可占用的高度

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<input type="button" value="点击发送短信">

<script>


  //1. 给按钮注册点击事件
  //2. 禁用按钮
  //3. 开始定时器，一秒钟修改一次按钮的内容

  //4. 当时间变成0了，清除定时器， 启用按钮，  恢复按钮的内容

  var btn = document.querySelector("input");


  btn.onclick = function () {
    var count = 5;
    //禁用按钮
    btn.disabled = true;

    //开启定时器
    var timeId = setInterval(function () {
      //修改按钮的内容  5秒后在次发送
      count--;
      btn.value = count+"秒后在次发送";

      //判断count是否是0
      if(count == 0) {
        //清除定时器
        clearInterval(timeId);
        //恢复按钮
        btn.disabled = false;
        btn.value = "点击发送短信";
      }
    }, 1000);

  };





</script>

</body>
</html>

相关标签： # JavaScript笔记 javascript BOM

上一篇： Python中的字符编码的使用

下一篇：深入理解Python的字符编码

一篇文章彻底学会BOM

一篇文章彻底学会BOM

一、BOM

二、window对象

1.window.onload（掌握）

2.window.open与window.close(了解)

三、延时器与定时器

1.setTimeout

2.setInterval

四、location对象

1.常用属性和方法

五、其他对象

一篇文章彻底搞清楚c#中的委托与事件

一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生

一篇文章，教你学会Vue CLI 插件开发

一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念

【面试】一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生

一篇文章让你彻底理解java中抽象类和接口

一篇文章就能彻底明白python装饰器

一篇文章学会Git

一篇文章学会Docker命令小结