39、BOM

最新推荐文章于 2024-09-16 08:47:17 发布

雪花酥01

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量151

点赞数 1

分类专栏：大前端 # JavaScript 文章标签： javascript 前端 html 笔记

本文链接：https://blog.csdn.net/shuozai1204/article/details/141527923

版权

大前端同时被 2 个专栏收录

164 篇文章 0 订阅

订阅专栏

JavaScript

43 篇文章 0 订阅

订阅专栏

一、认识BOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>认识BOM</title>
  </head>
  <body>
    <button onclick="handleOpen()">打开新页面</button>
    <button onclick="handleClose()">关闭当前页面</button>
  </body>
</html>
<script>
  /*
        BOM：浏览器对象 操作浏览器相关对象
        BOM：文档对象 操作元素标签

        什么是window对象？
            window对象就是BOM，也就是浏览器对象。window对象封装了窗口标题、工具栏、地址栏等都是window的成员对象。（window对象也就是BOM也就是浏览器）
        什么是document对象？
            document对象就是DOM，代表的是html整个文档，可以用来访问网页中所有的元素，其中，dom属于window对象的一部分。（document就是DOM也就是网页）
    */
  /*
        window.open()：打开浏览器窗口
            语法：window.open(url,target,features)
                url：文件地址
                target：打开窗口的目标位置，他可以是一个字符串，指定新窗口的名称，也可以是以下值：
                    _blank：在新窗口打开
                    _self：在当前窗口打开
                features：新窗口的特性
                    width：新窗口的宽度
                    height：新窗口的高度
                    left：新窗口距离屏幕左侧的距离
                    top：新窗口距离屏幕顶侧的距离

        window.close()：关闭当前浏览器窗口
    */
  function handleOpen() {
    window.open(
      "要打开的内容的相对路径",
      "width=300,height=400,left=0,top=100"
    );
  }
  function handleClose() {
    // 关闭浏览器窗口
    window.close();
  }
</script>

二、加载事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>加载事件</title>
    <script type="text/javascript">
      // var box = document.getElementById('box')
      // console.log(box)
      /*
            因为浏览器加载页面顺序是从上往下的，如果先加载js会导致dom元素获取不到，所以一般不放到head里面。
            如果非要放到head里面，需要进行特殊处理：
                window.onload   页面加载完成之后再执行这个函数里面的代码
        */
      // 页面遇到这个函数就跳过 开始执行html和css 当html和css加载完成之后，再去执行这里面的逻辑
      window.onload = function () {
        // js逻辑
        var box = document.getElementById("box");
        console.log(box);
      };
    </script>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

三、history

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>history</title>
  </head>
  <body>
    <a href="跳转.html">跳转</a>
    <button onclick="history.forward()">前进</button>
    <button onclick="history.go(1)">前进</button>
    <button onclick="history.back()">后退</button>
  </body>
</html>
<script type="text/javascript">
  /*
        history 历史记录
        必须要产生历史记录才能使用
        前进：
            history.forward()
            history.go(1)
        后退：
            history.go(-1)
            history.back()
    */
</script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>我是p标签</p>
    <button onclick="fn()">后退</button>
  </body>
</html>
<script type="text/javascript">
  function fn() {
    history.go(-1);
  }
</script>

四、navigator

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>navigator</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  /*
        navigator是一个表示浏览器环境的内置对象，它提供了与浏览器相关的信息和功能。
        navigator.userAgent：返回浏览器的用户代理字符串，其中包含有关浏览器名称、版本和操作系统的信息
        navigator.appName：返回浏览器的名称
        natigator.appVersion：返回浏览器版本
        natigator.platform：返回操作系统平台的信息
        navigator.language：返回浏览器当前使用的语言
    */
  console.log(navigator.userAgent);
  console.log(navigator.platform);
  console.log(navigator.language);
</script>

五、location

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>location</title>
  </head>
  <body>
    <button onclick="location.assign('http://www.baidu.com')">assign</button>
    <button onclick="location.replace('http://www.baidu.com')">replace</button>
    <button onclick="location.reload">reload</button>
  </body>
</html>
<script type="text/javascript">
  /*
        location    地址：
            location.assign('地址') 在当前窗口进行跳转  产生历史记录
            location.replace('地址')    替换当前窗口地址    达到跳转的作用  不产生历史记录
            location.reload()   刷新当前窗口    重新加载
    */
</script>

六、location.href

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>location</title>
  </head>
  <body>
    <button>跳转</button>
  </body>
</html>
<script type="text/javascript">
  /*
        location.href：可用于获取地址栏信息或者跳转页面

        可以将上一个页面的数据通过地址栏参数传递给下一个页面去使用
    */
  // console.log(location.href) // 地址栏信息
  var btn = document.querySelector("button");
  btn.onclick = function () {
    var userName = "哈哈哈哈";
    var passWard = "123456";

    // 跳转传参用?将跳转地址和传递的参数隔开 多个参数用&拼接
    // location.href = "地址?参数名称" + 参数 + "&参数名称" + 参数
    location.href =
      "07解决地址栏中文传参乱码问题.html?name=" +
      userName +
      "&password=" +
      passWard;
  };
</script>

七、解决地址栏中文传参乱码问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解决地址栏中文传参乱码问题</title>
  </head>
  <body>
    <button onclick="history.back()">后退</button>
    <button onclick="history.go(-1)">后退</button>
  </body>
</html>
<script type="text/javascript">
  var href = decodeURI(location.href);
  console.log(href);
  /*
        将乱码转为汉字  decodeURI
            decodeURI('要转换的乱码值')
    */
  if (href.split("?")[1]) {
    var str = href.split("?")[1].split("&")[0].split("=")[1];
    console.log(str);
    document.write("你好" + str + "！");
  } else {
    // 不存在参数
    document.write("参数有误！");
  }
</script>

八、获取window的宽高

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取window的宽高</title>
    <style type="text/css">
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>获取</button>
    <div class="box"></div>
  </body>
</html>
<script type="text/javascript">
  var btn = document.querySelector("button");
  btn.onclick = function () {
    // 获取浏览器可视区的宽高
    // 兼容性写法
    var h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    var w =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    console.log(h, w);
  };
  // 窗口发生改变的时候
  window.onresize = function () {
    var h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    var w =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    console.log(h, w);
    var oDiv = document.querySelector(".box");
    // 判断可视区的宽度 如果小于900 就隐藏这个div 否则显示
    if (w < 900) {
      oDiv.style.display = "none";
    } else {
      oDiv.style.display = "block";
    }
  };
</script>

九、定时器延时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时器延时器</title>
  </head>
  <body>
    <button>清除定时器</button>
  </body>
</html>
<script type="text/javascript">
  /*
        1.定时器：以固定的时间间隔重复调用同一个函数（无限次执行）
            setInterval(函数名，毫秒)
            setInterval(function(){},毫秒)
        清除定时器：
            clearInterval(清除哪一个定时器)

        2.延时器：延迟一段时间再去进行某个操作(只执行一次)
            setTimeout(函数，毫秒)
            setTimeout(function(){},毫秒)
        清除延时器：
            clearTimeout(清除哪一个延时器)
    */
  // timer    存储定时器
  // var timer = setInterval(function(){
  //     console.log('我是定时器')
  // },1000)

  // var btn = document.getElementsByTagName('button')[0]
  // btn.onclick = function(){
  //     // 清除名为timer的定时器
  //     clearInterval(timer)
  // }

  // 延时器   延迟1秒再去执行 只执行一次
  setTimeout(function () {
    console.log("我是延时器");
  }, 1000);

  // 1-10的循环
  var a = 1;
  function fn() {
    console.log(a);
    a++;
    if (a == 11) {
      a = 1;
    }
  }
  setInterval(fn, 1000);
</script>

十、轮播图2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>轮播图2</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 900px;
        height: 350px;
        margin: auto;
        background: url(图片相对路径) no-repeat center;
        background-size: 100% 100%;
        position: relative;
      }
      .dot {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .dot span {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-left: 10px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        cursor: pointer;
      }
      .dot .active {
        background-color: orangered;
        box-shadow: 0px 0px 10px 3px #d4d0d0;
      }
      .left,
      .right {
        width: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translate(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color-scheme: #fff;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
      }
      .left {
        left: 10px;
      }
      .right {
        right: -10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">&lt;</div>
      <div class="right">&gt;</div>
      <div class="dot">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  /*
		轮播图实现思想：
			点击分页器显示对应的图片
			1.点击事件
			2.点击的时候实现背景图的切换
	 */
  var spans = document.querySelectorAll(".dot span");
  // 获取类名为box的div
  var odiv = document.querySelector(".box");

  function changeImg() {
    for (var i = 0; i < spans.length; i++) {
      spans[i].onclick = function () {
        console.log(this.innerText); // 获取的是每一个span的文本内容
        var currentIndex = this.innerText;
        /*
					为什么不用i？
						用for循环添加的点击事件内部的i是最后一次执行的i
						因为页面加载立刻执行for循环，循环结束后才点击的点击事件，会导致i变成最后一次点击的结果
				 */
        odiv.style[
          "background"
        ] = `url(图片相对路径（动态）) no-repeat center 100%`;
        console.log(this);
        // 先给其他项移除类名
        document.querySelector(".active").className = "";
        // 再给当前点击项添加类名
        this.classList.add("active");
      };
    }
  }
  changeImg();
  // 左侧按钮
  var left = document.querySelector(".left");
  left.onclick = function () {
    // 获取具有active类名的标签
    var spanActive = document.querySelector(".active");
    // 获取的是具有active类名的标签的上一个兄弟节点
    console.log(spanActive.previousElementSibling);
    if (spanActive.previousElementSibling != null) {
      // 为当前具有active类名的上一个兄弟节点执行点击事件
      spanActive.previousElementSibling.onclick();
    } else {
      // 当前具有active类名的标签没有上一个兄弟节点 为最后一个span执行点击事件
      // spans.length-1 最后一个兄弟节点
      spans[spans.length - 1].onclick();
    }
  };

  // 右侧按钮
  var right = document.querySelector(".right");
  right.onclick = function () {
    // 获取具有active类名的标签
    var spanActive = document.querySelector(".active");
    // 获取的是具有active类名的标签的下一个兄弟节点
    console.log(spanActive.nextElementSibling);
    if (spanActive.nextElementSibling != null) {
      // 为当前具有active类名的下一个兄弟节点执行点击事件
      spanActive.nextElementSibling.onclick();
    } else {
      // 当前具有active类名的标签没有下一个兄弟节点 为最后一个span执行点击事件
      spans[0].onclick();
    }
  };

  // 每两秒向右滚动
  var timer = setInterval(right.onclick, 2000);
  // 当鼠标移入的时候 清除定时器
  odiv.onmouseover = function () {
    clearInterval(timer);
  };
  // 当鼠标移除的时候 定时器继续
  odiv.onmouseout = function () {
    timer = setInterval(right.onclick, 2000);
  };
</script>

十一、点名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点名</title>
    <style>
      body {
        background-color: #000;
      }
      #start {
        text-align: center;
        font-size: 100px;
        color: #fff;
        margin-top: 150px;
        font-weight: bold;
        cursor: pointer;
      }
      #txt {
        text-align: center;
        font-size: 100px;
        color: #fff;
        margin-top: 120px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="start">开始</div>
    <div id="txt">[name]</div>
  </body>
</html>
<script type="text/javascript">
  var arr = ["name", "name1", "name2", "……"];
  console.log(arr.length);
  // 获取开始按钮
  var start = document.querySelector("#start");
  // 获取内容
  var txt = document.querySelector("#txt");
  // 设置一个定时器
  var timer = null;
  // 累加器
  var sum = 1;
  var index;

  start.onclick = function () {
    sum += 1;
    if (sum % 2 == 0) {
      start.innerText = "结束";
      timer = setInterval(function () {
        index = parseInt(Math.random() * arr.length);
        txt.innerText = arr[index];
      }, 1);
    } else {
      start.innerText = "开始";
      clearInterval(timer);
      arr.splice(index, 1);
    }
  };
</script>

十二、点名修改

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .header {
        text-align: center;
      }
      button {
        width: 200px;
        height: 40px;
        margin-bottom: 40px;
      }
      .box {
        width: 1000px;
        margin: auto;
      }
      .item {
        float: left;
        width: 100px;
        height: 75px;
        border: 1px solid red;
        text-align: center;
        line-height: 75px;
      }
      .active {
        background: orange;
      }
    </style>
  </head>
  <body>
    <p id="final"></p>
    <div class="header">
      <button>开始</button>
    </div>
    <div class="box"></div>
  </body>
</html>
<script type="text/javascript">
  var arr = ["name1", "name2", "name3", "……"];
  /*
		1.动态添加节点 
		2.点击开始的时候 开始随机跳动 开始的按钮文字变为结束 点击结束的时候 停止跳动 并且文字变成开始
		3.当我再一次点击开始的时候 要将上次选中的人删掉 避免重复选中
			点击第一次：开始动态跳动
			点击第二次： 结束跳动 给选中的添加类名
			点击第三次：将选中的人删掉， 按钮继续跳动
	 */
  // 获取按钮
  var btn = document.querySelector("button");
  // 获取盒子
  var box = document.querySelector(".box");
  // 定义定时器
  var timer = null;
  // 判断条件
  var flag = true;
  // 累加器
  var sum = 0;

  // 将数据渲染到页面上
  function getNode() {
    for (var i = 0; i < arr.length; i++) {
      // 1.创建节点
      var item = document.createElement("div");
      // 2.设置内容
      item.innerHTML = arr[i];
      // 3.添加
      box.appendChild(item);
      // 4.给节点添加类名
      item.className = "item";
      // 给每个节点添加一个自定义属性
      item.setAttribute("data-index", i);
    }
    var itemArr = document.querySelectorAll(".item");
    // 默认让第一项选中
    itemArr[0].className = "item active";
  }
  getNode();

  // 开始点名
  function getName() {
    // 获取所有的点名人员
    var oDiv = document.querySelectorAll(".item");
    // 条件判断
    if (flag) {
      flag = false;
      btn.innerHTML = "结束";
      timer = setInterval(function () {
        // 清空类名
        document.querySelector(".active").className = "item";
        // 随机添加类名
        oDiv[parseInt(Math.random() * arr.length)].className = "item active";
      }, 50);
    } else {
      flag = true;
      btn.innerHTML = "开始";
      // 点击结束清空定时器
      clearInterval(timer);
      // 获取当前选中的人的姓名
      var active = document.querySelector(".active").innerText;
      var op = document.querySelector("#final");
      op.innerText = "恭喜" + active + "!";
    }
  }

  // 按钮点击事件
  btn.onclick = function () {
    sum += 1;
    // 点击第一下 开始  第二下 结束--选中了一个人
    // 点击第三下的时候 开始 将选中的人删除    点第四下的时候 结束--选中了一个人
    // 点击第五下的时候 开始 将选中的人删除...
    // 3 5 7 9...删除
    // 是奇数 但是 不包括1
    if (sum % 2 != 0 && sum != 1) {
      // 获取到当前选中的这一项
      var divActive = document.querySelector(".active");
      // 获取当前选中项的自定义属性
      var delIndex = divActive.getAttribute("data-index");
      // 删除当前选中的人
      arr.splice(delIndex, 1);
      // 删除之后 需要重新渲染数据
      box.innerHTML = "";
      getNode();
      // 点名
      getName();
    } else {
      getName();
    }
  };
</script>

十三、轮播例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下无缝轮播</title>
    <style>
      .box {
        width: 480px;
        height: 290px;
        overflow: hidden;
        background-color: #ccc;
      }
      .box div {
        float: left;
        width: 100px;
        height: 90px;
        text-align: center;
        margin: 0 10px 10px;
        background: pink;
      }
      .box div.anim {
        transition: all 0.5s;
        margin-left: -100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
<script type="text/javascript">
  var list = [
    {
      name: 1,
    },
    {
      name: 2,
    },
    {
      name: 3,
    },
    {
      name: 4,
    },
    {
      name: 5,
    },
    {
      name: 6,
    },
    {
      name: 7,
    },
    {
      name: 8,
    },
    {
      name: 9,
    },
    {
      name: 10,
    },
    {
      name: 11,
    },
    {
      name: 12,
    },
    {
      name: 13,
    },
    {
      name: 14,
    },
    {
      name: 15,
    },
    {
      name: 16,
    },
    {
      name: 17,
    },
    {
      name: 18,
    },
    {
      name: 19,
    },
    {
      name: 20,
    },
  ];
  // 获取盒子
  var box = document.querySelector(".box");
  // 渲染数据
  function handleDate() {
    // 遍历数组
    for (var i = 0; i < list.length; i++) {
      box.innerHTML += `
                <div>${list[i].name}</div>
            `;
    }
  }
  // 默认调用一次这个函数 把数组中的数据渲染到页面上
  handleDate();

  // 定时器
  var timer = null;
  // 定时轮播
  function fn() {
    // 添加定时器 每两秒执行一次
    timer = setInterval(function () {
      // 首先 我要将数组的前四个元素添加到数组的最后
      for (var i = 0; i < 1; i++) {
        // i：0 1 2 3
        list.push(list[i]);
      }
      // 删除数组的前四个元素
      list.splice(0, 1);
      // 获取所有创建的div
      var oDiv = document.querySelectorAll(".box div");
      // 给前四个添加一个过渡效果 也就是添加anim这个类名
      for (var i = 0; i < 1; i++) {
        oDiv[i].className = "anim";
      }

      // 延时器 延迟一秒钟清空盒子内容 重新渲染数据
      setTimeout(function () {
        box.innerHTML = "";
        handleDate();
      }, 1000);
    }, 2000);
  }
  fn();

  // 鼠标移入的时候 清空定时器 暂停轮播
  box.onmouseover = function () {
    clearInterval(timer);
  };
  // 鼠标移除的时候 继续轮播
  box.onmouseout = function () {
    fn();
  };
</script>

BOM 浏览器对象模型

window.onload = function(){
    页面加载完毕之后再去执行
}
window.open() 打开新页面
window.close()  关闭页面

前进：
    history.go(1)
    history.forward()
后退：
    history.go(-1)
    history.back()

navigator：返回浏览器的基本信息

location：
    获取当前页面的地址栏信息    location.href
    跳转页面    location.href = '跳转地址'
    跳转页面传递参数用?将url和参数隔开，多个参数用&拼接

location.href和window.open()打开新页面的区别
    location.href 改变的是当前页面的地址栏信息
    window.open() 打开新页面

获取盒子的宽高：
    offsetWidth  offsetHeight

获取window(浏览器可视区)宽高
    var h = window.innerHeight || document.documentElementHeight || document.body.clientHeight
    var w = window.innerWidth || document.documentElementWidth || document.body.clientWidth
    因为不同的浏览器对js的兼容有区别，以上几种方法基本可以兼容所有的浏览器。

定时器：无限次执行
setInterval(function(){
    执行的代码
},时间)

延时器：只执行一次
setTimeout(function(){
    执行的代码
},时间)

清除定时器
clearInterval(要清除的定时器)

清除延时器
clearTimeout(要清除的延时器)