js进阶（BOM-网页坐标，窗口偏移实现案例）

最新推荐文章于 2022-03-05 17:20:40 发布

Isco也是O型腿

最新推荐文章于 2022-03-05 17:20:40 发布

阅读量366

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_53926719/article/details/115483109

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

BOM

BOM概述

bom即为浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是windows，windows是最大的，所以BOM包含DOM
在这里插入图片描述

常见事件

窗口加载事件

等页面加载完再执行的事件，包含页面dom元素，即整个dom树加载完毕。所以不存在命名调用的顺序。
在这里插入图片描述
DOMConteneLoaded是DOM元素加载完毕，不包含图片，flash等就可以执行，速度更快

调整窗口大小事件

窗口大小发生像素变化，就会触发该事件，即有些页面放大缩小就会改变样式。
一般用来完成响应式布局。windo.innerWidth获取当前屏幕的宽度

案例：缩小窗口隐藏ul

      var ul = document.querySelector('ul');
      window.addEventListener('resize',function(){
          if(window.innerWidth<1000){
              ul.style.display = 'none';
          }else{
              ul.style.display = 'block';
          }
      })

定时器

有多个定时器要其不同的名字，做不同的标识符
setTimeout()和setInterval()的用法与区别：

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout()方法只调用一次函数。

视情况而用不同定时器。

案例1：倒计时效果。在3个span中显示倒计时。（用到了之前的时间戳）

      var span = document.querySelectorAll('span');             
      var inputTime = +new Date('2021-4-7 14:10:00');//目标时间         
      countDown();//先调用一次函数，避免调用定时器前出现的间隙，因为调用定时器也需要时间。
      setInterval(countDown,1000);
      function countDown(){
             var nowTime = +new Date();

             var times = (inputTime - nowTime) / 1000;//倒计时的秒数   h
             var h = parseInt(times / 60 /60%24);//时 
             h = h < 10? '0' + h : h;    
             span[0].innerHTML = h;
             var m = parseInt(times / 60 %60);//分 
             m = m < 10? '0' + m : m;  
             span[1].innerHTML = m; 
             var s = parseInt(times %60);//秒 
             s = s < 10? '0' + s : s;     
             span[2].innerHTML = s; 
         }

案例2：模拟显示短时间内不能再次发送短信。如60s内发送验证码则需要倒计时60s。
在这里插入图片描述

      var btn = document.querySelector('button')
      var time = 10//定义剩下的秒数
      btn.addEventListener('click',function(){
          btn.disabled = true;
          var timer= setInterval(function(){
              if(time ==0){
                  clearInterval(timer)
                  btn.disabled = false;
                  btn.innerHTML = '发送验证码'
                  time=10//重置倒计时
              }else{
                btn.innerHTML = '还剩下'+ time +'s';
                time--
              }
          },1000);  
      })

这里很巧妙地让秒数递减，再用定时器逐秒显示，就不用将整个倒计时用定时器做。

this指向问题： 定时器里的this指向的是window，定时器算window地一个属性，其他的都指向调用者。

js队列

在这里插入图片描述

同步与异步

在这里插入图片描述
执行机制：
先执行同步任务，异步任务（回调函数）放入任务队列，再执行在任务队列中任务，回调函数都属于异步任务，因为回调函数需要时间，如果时间较长，会影响后面的任务

      console.log(1);
      setTimeout(function(){
         console.log(3);
      },0)
      console.log(2);

//输出为1 2 3

location对象

URL

location属性

在这里插入图片描述
案例：按键定时跳转其他页面，综合运用了前面刚学的倒计时配合location

  <body>
    <button>跳转</button>
    <div></div>
  </body>
  <script>
    var btn = document.querySelector("button");
    var div = document.querySelector("div");
    var time = 5;
    btn.addEventListener("click", function () {
      setInterval(function () {
        if (time == 0) {
          location.href = "http://www.baidu.com";
        } else {
          div.innerHTML = "还剩" + time + "s进入新页面";
          time--;
        }
      }, 1000);
    });
  </script>

案例2：提交表单跳转页面，输入英文名，跳转另一个欢迎界面

      <form action="index.html">
      <input type="text" name="uname" id="">
    <button>跳转</button>

      </form>
//👆主页面


//跳转后的页面👇
    <div></div>
    <script>
        //location.search得到的是？uname=...，要先用substr去掉问好
        var params = location.search.substr(1)
        //再利用=把字符串分割为数组
        var arr = params.split('=');
        var div = document.querySelector('div')
        div.innerHTML = arr[1] + ',欢迎你'
    </script>

表单form中的action属性，是向何处提交数据，即数据去向的地址

location对象方法

括号内加地址
在这里插入图片描述

history对象

在这里插入图片描述

PC端网页特效

offset元素偏移量

概述：

  <script>
      var fa = document.querySelector('.fa')
      var son = document.querySelector('.son')
      console.log(fa.offsetTop);

      console.log(son.offsetLeft);
      //这个显示的是距离网页边框的距离，因为这个已带定位的父亲为准，如果父亲没有定位，则以浏览器为准

      console.log(son.offsetWeight)
      //得到元素大小，包含内外边距和边框，height同理

       console.log(son.offsetParent)
       //返回带有定位的父亲，否则返回body

offset与style区别

案例：获取鼠标在盒子内的坐标
用鼠标在页面中的坐标减去盒子的在页面中的距离

      var fa = document.querySelector('.fa')
      fa.addEventListener('mousemove',function(e){
          
        var x = e.pageX - this.offsetLeft
        var y = e.pageY - this.offsetTop

        this.innerHTML = '这个点坐标为'+x+y;
      })

案例：模拟拖动模态框，点击相应按键才显示，且可拖拽

  <body>
    <div class="btn">
      <p>点击出现拖拽框</p>

    </div>            
     <div class="login">
          <input type="text" />
          <input type="text" />
          <button>关闭</button>
    </div> 
    <div class="bg"></div>
  </body>
  
    var btn = document.querySelector(".btn");
    var login = document.querySelector(".login");
    var bg = document.querySelector(".bg");
    var close = document.querySelector("button");
    btn.addEventListener("click", function () {
      bg.style.display = "block";
      login.style.display = "block";
    });
    close.addEventListener("click", function () {
      bg.style.display = "none";
      login.style.display = "none";
    });
    login.addEventListener('mousedown',function(e){
        // 获取鼠标在框内的坐标
        var x = e.pageX - this.offsetLeft
        var y = e.pageY - this.offsetTop +60//使得鼠标在login盒子中间

         //鼠标移动到的距离减去距离盒子的距离，就是盒子的坐标
        document.addEventListener('mousemove',move)
        function move (e){
            login.style.left =e.pageX - x +'px' 
            login.style.top =e.pageY - y +'px' 
        }
        // 鼠标弹起，移除移动事件
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })
    })
  </script>

该案例比较综合，用了偏移量结合之前的随鼠标移动实现拖曳，还有很多细节，比如控制拖曳时鼠标应对应哪个板块，即目标框不会突然闪烁跳动。

今日经典案例：模拟京东图片放大镜，即鼠标移动会形成一个放大镜，在隔壁放大显示图形。

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .old,
      .old img {
        width: 300px;
        height: 300px;
      }
      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: rgb(184, 184, 92);
        opacity: 0.5;
        cursor: move;
        pointer-events: none;
      }
      .show {
        display: none;
        position: relative;
        overflow: hidden;
        left: 300px;
        top: -200px;
        z-index: 999;
        width: 450px;
        height: 450px;
      }
      .showImg{
          position: absolute;
          top: 0;
          left: 0%;
          width: 750px;
          height: 750px;
      }
    </style>
  </head>
  <body>
    <div class="old">
      <img src="微信图片_20200831202623.jpg" alt="" />
    </div>
    <div class="mask"></div>
    <div class="show">
      <img
        src="微信图片_20200831202623.jpg" alt="" class="showImg"/>
    </div>
  </body>
  <script>
    var old = document.querySelector(".old");
    var mask = document.querySelector(".mask");
    var show = document.querySelector(".show");
    var bigPic = show.querySelector('img') 
    //   显示隐藏
    old.addEventListener("mouseover", function () {
      mask.style.display = "block";
      show.style.display = "block";
    });
    old.addEventListener("mouseout", function () {
      mask.style.display = "none";
      show.style.display = "none";
    });

    //   遮挡层拖动
    old.addEventListener("mousemove", function (e) {
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;

      // 超出框则停在边上
      var maskX = x - mask.offsetWidth / 2;
      var maskY = y - mask.offsetHeight / 2;
      if (maskX < 0) {
        maskX = 0;
      } else if (maskX>=old.offsetWidth - mask.offsetWidth) {
        maskX = old.offsetWidth - mask.offsetWidth;
      }
      if (maskY < 0) {
        maskY = 0;
      } else if (maskY>=old.offsetHeight - mask.offsetHeight) {
        maskY = 200;
      }
      // else if是为了判断在右侧和下侧时的停止条件，因为只能以左上为参照，所以要算停止距离
      // 最大移动距离：盒子宽度减去遮挡层宽度

      mask.style.left = maskX + "px";
      mask.style.top = maskY + "px";

      //大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离
      //大图片最大移动距离
      var bigMax = bigPic.offsetWidth - show.offsetWidth;
      var bigX = maskX * bigMax/(old.offsetHeight - mask.offsetHeight)
      var bigY = maskY * bigMax/(old.offsetHeight - mask.offsetHeight)
    //   镜像移动，所以要负号
      bigPic.style.left = -bigX + 'px'
      bigPic.style.top = -bigY + 'px'
    });
  </script>

整个案例细节很多

通过拖曳“放大镜”，在另一个盒子中移动放大过的照片，达到放大镜的效果
大图移动距离与遮挡层移动距离的关系
pointer-events: none;关键点。说白了就是不接受鼠标事件。一开始一拖曳放大镜图片会一直闪烁，加了这个才解决问题。因为设置的是old触发事件，但目的是mask移动，但是mask移动同时也会触发old事件，所以要让mask不接受鼠标事件，即：即使鼠标在mask上，也与mask没关系，只是坐标刚好重叠而已。不会重复触发事件。

Isco也是O型腿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js进阶（BOM-网页坐标，窗口偏移实现案例）

BOMBOM概述bom即为浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是windows，windows是最大的，所以BOM包含DOM常见事件窗口加载事件等页面加载完再执行的事件，包含页面dom元素，即整个dom树加载完毕。所以不存在命名调用的顺序。DOMConteneLoaded是DOM元素加载完毕，不包含图片，flash等就可以执行，速度更快调整窗口大小事件窗口大小发生像素变化，就会触发该事件，即有些页面放大缩小就会改变样式。一般用来完成响应式布局。wind
复制链接

扫一扫