JavaScript–Web APIs

最新推荐文章于 2024-06-14 09:24:52 发布

bfbshs_ddd

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量41

点赞数

分类专栏： # 语言学习记录文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/bfbshs_ddd/article/details/134000322

版权

语言学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript–Web APIs

文章目录

JavaScript--Web APIs

API应用程序编程接口：一些预先定义的函数，让应用程序和开发人员可以实现一些功能但无需访问实现功能的源码

Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

1.概念

Web API主要是针对浏览器提供的接口，主要针对于浏览器做交互效果
Web API一般都有输入（传参）和输出（返回），大部分Web API是方法/函数

2.DOM

2.1DOM介绍

概念：DOM文档对象模型，处理可扩展标记语言（HTML、XML）的标准编程接口
DOM树
- document：一个页面就是一个文档，是根元素
- element：页面中所有标签是元素
- node：网页中所有内容（标签、属性、文本、注释）

2.2获取页面元素

根据ID获取：getElemnetById()返回元素对象

<body>
  <div id="mytest">first</div>
  <!-- 文档页面从上往下加载，因此script写在下面 -->
  <script>
    //参数是一个字符串
    var test = document.getElementById('mytest');
    //返回的是一个元素对象
    console.log(typeof test);
    //查看元素对象里的属性和方法
    console.dir(test);
  </script>
</body>

在这里插入图片描述

根据标签名获取：getElemnetByTagName()返回指定标签名的对象集合，无论元素多少有无都会是伪数组形式

<body>
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
  <script>
    //传入参数为字符串的形式
    var lis = document.getElementsByTagName('li');
    //获取到元素的集合，以伪数组（无pop、push等方法）的形式存储
    console.log(lis);
    //得到元素是动态的，改变html代码内容，JS执行结果也会自动改变
    console.log(lis[1]);
  </script>
</body>

在这里插入图片描述

通过HTML5新增的方法获取，IE9以上版本和移动端实现
- document.getElementsByClassName('类名')根据类名获得某些元素集合
- document.querySelector('CSS选择器')根据指定选择器返回第一个元素对象
- document.querySelectorAll('CSS选择器')根据指定选择器返回所有元素对象集合
特殊元素获取，body、html
- document.body返回body元素对象
- document.documentElement返回html元素对象

2.3事件基础

概念：事件是可以被JavaScript侦测到的行为，理解为触发–响应机制
事件三要素
- 事件源：事件被触发的对象
- 事件类型：如何触发，什么事件，比如鼠标经过鼠标点击
- 事件处理程序：通过一个函数赋值（将事件对象作为实参传递进响应函数）完成响应 ,在IE8及以下浏览器中不传递事件对象，事件对象作为window对象的属性保存

执行事件步骤

获取事件源
注册（绑定）事件
添加事件处理程序（采用函数赋值形式）

解决事件对象兼容性问题：event = event || window.event;

//点击唐伯虎按钮弹出点秋香
<button id="btn">唐伯虎</button>
<script>
    //通过获取元素的放法获得事件源
    var btn=document.getElementById('btn');
    //绑定事件 btn.onclick点击触发 
    //添加事件处理程序 function中赋值
    btn.onclick=function(){
        event =event || window.event;//解决兼容性
        alert('点秋香');
    }
</script>

鼠标事件
- onclick鼠标点击左键触发
- onmouseover鼠标经过触发，不能阻止冒泡
- onmouseout鼠标离开触发，不能阻止冒泡
- onmouseenter鼠标移至元素上触发，可以阻止冒泡
- onmouseleave鼠标移出元素触发，可以阻止冒泡
- onfoucus获得鼠标焦点触发
- onblur失去鼠标焦点触发
- onmousemove鼠标移动触发
- onmouseup鼠标弹起触发
- onmousedown鼠标按下触发
- onmousewheel转动鼠标滚轮触发
- onscroll滚动元素滚动条触发
窗口事件
- onblur当窗口失去焦点时触发
- onfocus当窗口获得焦点时触发
- onload当文档加载后触发
- onresize当调整窗口大小时触发
- onstorage当Web Storage区域更新时（存储空间数据发生变化）触发
表单事件（元素在form表单内）
- onblur当元素失去焦点时触发
- onfocus元素获得焦点时触发
- onchange元素改变时触发
- oninput元素获得用户输入时触发
- oninvalid元素无效时触发
- onselect选取元素时触发
- onsubmit提交表单时触发
键盘事件
- onkeydown按下按键触发
- onkeyup松开按键触发
- onkeypress按下并松开案件触发
键鼠属性：
- ctrlKey 当事件被触发时，“CTRL” 键是否被按下。
- altKey 当事件被触发时，“ALT” 是否被按下。
- shiftKey 当事件被触发时，“SHIFT” 键是否被按下。
- clientX 当事件被触发时，鼠标指针的水平坐标。
- clientY 当事件被触发时，鼠标指针的垂直坐标。
- screenX 某个事件被触发时，鼠标指针的水平坐标。
- screenY 某个事件被触发时，鼠标指针的垂直坐标。
媒体事件：通过视频（videos），图像（images）或音频(audio)触发事件
- onabort发生中止事件触发
- oncanplay媒介能够开始播放但可能因缓冲而需要停止触发
- oncanplaythrough无需因缓冲而停止即可播放至结尾触发
- ondurationchange媒介长度改变时触发
- onemptied媒介资源为空（网络错误、加载错误）触发
- onended媒介抵达结尾触发
- onerror元素加载期间发生错误触发
- onloadeddata加载媒介数据时触发
- onloadedmetadata媒介元素的持续时间以及其它媒介数据已加载完触发
- onloadstart浏览器开始加载媒介数据时触发
- onpause媒介数据暂停时触发
- onplay媒介数据将要开始播放时触发
- onplaying媒介数据已开始播放时触发
- onprogress浏览器正在取媒介数据时触发
- onratechange当媒介数据播放速率改变时触发
- onseeked媒介元素的定位属性不再为真且定位已结束触发
- onseeking媒介元素的定位属性为真且定位已开始触发
- onstalled取回媒介数据过程中（延迟）存在错误触发
- onsuspend浏览器已在取媒介数据中停止触发
- ontimeupdate媒介改变其播放位置触发
- onvolumechange媒介改变音量亦或当音量被设置为静音触发
- onwaiting媒介已停止播放但打算继续播放触发
其他事件
- onshow当menu元素在上下文显示触发
- ontoggle当用户打开或关闭details元素时触发

事件冒泡

事件的向上传导，当后代元素上的时间被触发，则祖先元素的相同事件也被触发，如果不希望发生事件冒泡可以通过事件对象取消冒泡

消除冒泡

//冒泡事件：创建两个div，叠放在一起，分别绑定单击事件，点击最里面的div，会触发两个单击事件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bubble</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #div1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    #div2 {
      width: 100px;
      height: 100px;
      background-color: coral;
    }
  </style>
</head>

<body>
  <div id="div1">
    我是DIV1
    <div id="div2">
      我是DIV2
    </div>
  </div>
  <!-- JS从上到下执行,所以写在这里 -->
  <script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    //div1绑定事件
    div1.onclick = function () {
      console.log("div1的单击事件触发")
    }
    //div2绑定事件
    div2.onclick = function () {
      console.log("div2的单击事件触发")
    }
  </script>
</body>

</html>

//创建两个叠放到一起的盒子分别绑定一个单击事件，消除事件冒泡
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消除事件冒泡</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #div1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    #div2 {
      width: 100px;
      height: 100px;
      background-color: coral;
    }
  </style>
</head>

<body>
  <div id="div1">
    我是DIV1
    <div id="div2">
      我是DIV2
    </div>
  </div>
  <!-- JS从上到下执行,所以写在这里 -->
  <script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    //div1绑定事件
    div1.onclick = function () {
      console.log("div1的单击事件触发");
      stopBubble();
    };
    //div2绑定事件
    div2.onclick = function () {
      console.log("div2的单击事件触发");
      stopBubble();
    };
    //取消事件冒泡
    function stopBubble(event) {
      //如果提供事件对象，则是一个非IE浏览器
      if (event && event.stopPropagation) {
        //支持W3C的stopPropagation()方法
        event.stopPropagation();
      } else {
        //否则使用IE的方法消除事件冒泡
        window.event.cancelBubble = true;
      }
    }
  </script>
</body>

</html>

//阻止点击a标签的默认跳转事件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #div1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    #div2 {
      width: 100px;
      height: 100px;
      background-color: coral;
    }
  </style>
</head>

<body>
  <a href="http://www.baidu.com" id="a">打开百度，你就知道！</a>

  <script>
    var a = document.getElementById("a");

    //为a绑定事件
    a.onclick = function () {
      stopDefault();
    };

    //阻止浏览器的默认行为
    function stopDefault() {
      if (event && event.preventDefault) {
        //阻止默认浏览器动作（W3C）
        event.preventDefault();
      } else {
        //IE中阻止函数默认动作的方式
        window.event.returnValue = false;
      }
      return false;
    }
  </script>
</body>

</html>

事件委派：利用事件的冒泡，可以只绑定一次事件（绑定到共同的祖先元素），应用到多个元素（后代元素上的事件触发会一直冒泡到祖先元素）。

//为所有a标签绑定单击事件
<!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>
  <ul id="ul">
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
  </ul>

  <script>
    var ul = document.getElementById("ul");

    //为ul绑定一个单击响应函数
    ul.onclick = function (event) {
      event = event || window.event;
      //如果触发事件的对象是我们期望的元素则执行，否则不执行
      if (event.target.className == "link") {
        console.log("我是ul的单击响应函数");
      }
    };
  </script>
</body>

</html>

事件绑定（符合DOM2级别的事件绑定方式：（不兼容））

addEventListener("eventType",callback,use-capture);
- eventType：事件名称。click省略on
- callback：事件处理方法
- use-capture：false–>冒泡阶段/true–>捕获阶段
  
  大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度兼容各种浏览器
事件传播
- 捕获阶段：先捕获最外层的祖先元素再向内，默认此时不触发事件
- 目标阶段：捕获到目标元素，触发事件
- 冒泡阶段：事件依次朝外向祖先元素传递
  
  如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，并且注意，IE8及以下的浏览器中没有捕获阶段，我们可以使用event.stopPropagation();取消事件传播。

2.4 操作元素

获得元素内容
- element.innerText获得HTML元素的inner Text
- element.innerHTML获得HTML元素的inner HTML
- element.属性获得HTML元素的属性值
- elemnet.getAttribute(attribute)获得HTML元素的属性值
- element.style.样式获取HTML元素的行内样式值
改变元素内容
- element.innerText=new text content从起始位置到终止位置的内容，去除html标签，空格和换行也会去掉，非标准
```
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
	//点击按钮，div里文字发生变化
	//1.获取元素
	var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function(){
        //3.添加事件处理程序
        div.innerText = '2019-6-6';
    }
```
- element.innerHTML= new html content识别起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行，W3School标准
- element.属性= new value改变HTML元素的属性值
- element.setAttribute(attribute,value)改变HTML元素的属性值
- element.style.样式= new style改变HTML元素的行内样式值
- object.insertAdjacentHTML(where,html);``object.insertAdjacentText(where,text);在指定位置插入HTML代码/文本内容，只适用于双标签元素
  - where:
    - beforeBegin：插入到开始标签的前面
    - beforeEnd：插入到结束标签的前面
    - afterBegin：插入到开始标签的后面
    - afterEnd：插入到结束标签的后面

常用元素的属性操作

innerText、innerHTML改变元素内容
src、href

id、alt、title

<button id="ldh">ldh</button>
<button id="zxy">zxy</button><br>
<script>
    //修改元素属性 src
    //1.获取元素
    var ldh = document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    //2.注册事件 处理程序
    zxy.onclick = function(){
        img.src = 'images/zxy.jpg';
        img.title = 'zxy';
    }
    ldh.onclick = function(){
        img.src = 'images/ldh.jpg';
        img.title = 'ldh';
    }
</script>

表单元素的属性操作

利用DOM可以直接操作如下表单元素的属性：

type value checked selected disabled

//让按钮只能点击一次,点击一次后被禁用
<script>
    //1.获取元素
    var btn =document.querySelector('button');
    //2.注册事件 3.处理程序
    btn.onclick = function(){
        //btn.disabled=true;
        this.disabled=true;//this 指向的是事件函数的调用者
    }
</script>

2.5节点操作

查找节点
- elementNode.parentNode返回元素的父节点
- elementNode.childElement返回元素的父元素
- elementNode.childNodes返回一个元素的子节点数组（包含空白文本Text节点）
- elementNode.children返回元素的一个子元素的集合（不包含空白文本Text节点）
- elementNode.firstChild返回元素的第一个子节点（包含空白文本Text节点）
- elementNode.firstElementChild返回元素的第一个子元素（不包含空白文本Text节点）
- elementNode.lastChild返回元素最后一个子节点（包含空白文本Text节点）
- elementNode.lastElementChild返回元素最后一个子元素（不包含空白文本Text节点）
- elementNode.previousSibling返回元素紧接之前节点（包含空白文本Text节点）
- elementNode.previousElementSibiling返回指定元素前一个兄弟元素（相同节点树层中的前一个元素节点）
- elementNode.nextSibling返回某个元素紧接之后节点（包含空白文本Text节点）
- elementNode.nextElementSibling返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）

修改HTML元素节点

document.createElement(element)创建HTML元素节点
document.createAttribute(attribute)创建HTML属性节点
document.createTextNode(text)创建HTML文本节点
元素节点.removeChild(element)删除HTML元素
元素节点.appendChild(element)添加HTML元素
元素节点.replaceChild(new element,old element)替换HTML元素
元素节点.insertBefore(new element,old element)在指定的子节点前插入新的子节点

//创建一个ul列表，在该列表中追加4个li标签
<!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>
        <!-- 创建一个ul列表，然后在该列表中追加4个li标签 -->
        <script>
            //方法一  
            var ul = document.createElement("ul");

            var li1 = document.createElement("li");
            li1.innerHTML = "列表项1";
            ul.appendChild(li1);

            var li2 = document.createElement("li");
            li2.innerHTML = "列表项2";
            ul.appendChild(li2);

            var li3 = document.createElement("li");
            li3.innerHTML = "列表项3";
            ul.appendChild(li3);

            var li4 = document.createElement("li");
            li4.innerHTML = "列表项4";
            ul.appendChild(li4);

            document.getElementsByTagName("body")[0].appendChild(ul);

            // 方法二
            var ul = document.createElement("ul");

            var li1 = "<li>列表项1</li>";
            var li2 = "<li>列表项2</li>";
            var li3 = "<li>列表项3</li>";
            var li4 = "<li>列表项4</li>";

            ul.innerHTML = li1 + li2 + li3 + li4;

            document.getElementsByTagName("body")[1].appendChild(ul);
        </script>
    </body>

</html>

//创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li
<!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>
        <ul id="ul">
            <li id="first">列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li id="last">列表项4</li>
        </ul>

        <script>
            var ul = document.getElementById("ul");
            var first = document.getElementById("first");
            var last = document.getElementById("last");

            // 删除第一个
            ul.removeChild(first);

            // 替换最后一个
            var li5 = document.createElement("li");
            li5.innerHTML = "列表4的替换";
            ul.replaceChild(li5, last);
        </script>
    </body>

</html>

动态判断、添加、删除、切换样式，支持IE5-IE11，谷歌浏览器、火狐浏览器等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态判断</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .b1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .b2 {
      width: 300px;
      height: 300px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <button id="btn0">判断b2样式</button>
  <button id="btn1">添加b2样式</button>
  <button id="btn2">删除b2样式</button>
  <button id="btn3">切换b2样式</button>

  <br>
  <div id="box" class="b1"></div>

  <!-- 因为从上到下执行，后写js代码 -->
  <script>
    //1.获取元素
    var btn0 = document.getElementById("btn0");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var box = document.getElementById("box");

    //2.注册事件 3.处理程序
    btn0.onclick = function () {
      alert(hasClass(box, "b2"));
    };
    btn1.onclick = function () {
      addClass(box, "b2");
    };
    btn2.onclick = function () {
      removeClass(box, "b2");
    };
    btn3.onclick = function () {
      toggleClass(box, "b2");
    };

    //判断一个元素中是否含有指定的class属性  
    function hasClass(obj, cn) {
      var reg = new RegExp("\\b" + cn + "\\b");
      return reg.test(obj.className);
    }

    /**
     * 向一个元素中添加指定的class属性值
     * 参数：
     * obj：要添加class属性的元素
     * cn：要添加的class值
     */
    function addClass(obj, cn) {
      if (!hasClass(obj, cn)) {
        obj.className += " " + cn;
      }
    }

    /**
     * 删除一个元素中指定的class属性
     */
    function removeClass(obj, cn) {
      var reg = new RegExp("\\b" + cn + "\\b");
      obj.className = obj.className.replace(reg, "");
    }

    /**
     * 增删改查一个类
     */
    function toggleClass(obj, cn) {
      if (hasClass(obj, cn)) {
        removeClass(obj, cn);
      } else {
        addClass(obj, cn);
      }
    }
  </script>
</body>

</html>

3.BOM

3.1BOM介绍

浏览器对象模型 Browser Object Model 尚无正式标准提供一组可以用来操作浏览器的对象
常见BOM对象：
- Window 整个浏览器的窗口，网页的全局对象
- Navigator 当前浏览器的信息
- Location 当前浏览器的地址栏信息
- History 当前浏览器的历史记录只能前后翻页没有具体历史信息，只在当次访问有效
- Screen 用户屏幕的信息
BOM对象作为Window对象属性保存，可以通过Window对象或直接使用

3.2Window对象

弹出框
- 警告框：用户单击“确定”来继续
  
  window.alert("sometext");
  
  alert("sometext");
- 确认框：用户单击“确定”或“取消”继续，确定返回true，取消返回false
  
  window.confirm("sometext");
  
  confirm("sometext");
- 提示框：用户输入值后单击“确定”或“取消”继续，确定则返回输入值，取消则返回NULL
  
  window.prompt("sometext","defaultText");
  
  prompt("sometext","defaultText");
```
var person =prompt("请输入你的姓名","lihua");
if(person!=null){
    console.log(person);
}
```

定时事件

JS可以在时间间隔内执行，即定时事件，window对象有方法可以在指定时间间隔执行代码，可以不使用window前缀

setTimeout(function,milliseconds)延时器，在等待指定的毫秒数后执行函数

setInterval(function,milliseconds)定时器，等同setTimeout()，但持续重复执行

//通用移动函数实现方块移动效果
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通用移动函数实现小汽车移动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 控制器样式 */
    .controller {
      position: relative;
      width: 600px;
      height: 50px;
      line-height: 50px;
    }

    .controller button {
      outline: none;
      border: none;
      margin: 0px;
      padding: 0px;
      width: 200px;
      height: 50px;
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      background-color: #E9E9E9;
      cursor: pointer;
      float: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 2px solid #F0F0F0;
    }

    .controller button:hover {
      background-color: #F9F9F9;
    }

    /* 公路样式 */
    #road {
      /* 子绝父相 */
      position: relative;
      margin-top: 50px;
      width: 100%;
      height: 100px;
      background: #3DB1FF;
      opacity: .90;
    }

    .road800 {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 800px;
      height: 100px;
      background: pink;
      z-index: 1000;
      opacity: .75;

    }

    .road1200 {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 1200px;
      height: 100px;
      background: orange;
      z-index: 500;
    }

    /* 小汽车样式 */
    div#car {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1500;
      width: 135px;
      height: 100px;
      display: block;
      background: black;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

    }
  </style>
</head>

<body>
  <div class="controller">
    <button id="btn1">移动到800px</button>
    <button id="btn2">移动到1200px</button>
    <button id="btn3">回家</button>
  </div>

  <div id="road">
    <div class="road800"></div>
    <div class="road1200"></div>
    <div id="car"></div>
  </div>

  <!-- 先写HTML再写JavaScript -->
  <script>
    // 1.获取元素 2.事件绑定 3.处理程序
    document.getElementById("btn1").onclick = function () {
      move(document.getElementById("car"), 800);
    };

    document.getElementById("btn2").onclick = function () {
      move(document.getElementById("car"), 1200);
    };

    document.getElementById("btn3").onclick = function () {
      move(document.getElementById("car"), 0);
    };

    // 移动函数(事件处理程序)
    function move(element, target) {
      //首先清理定时器
      clearInterval(element.timeId);
      //产生一个定时器
      element.timeId = setInterval(function () {
        //获取对象当前位置
        var current = element.offsetLeft;
        //每次移动多少像素
        var step = 10;
        //判断往正方向走还是往相反方向走
        step = current < target ? step : -step;
        //每次移动后的距离
        current += step;
        //判断是否到达目标位置
        if (Math.abs(target - current) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定时器
          clearInterval(element.timeId);
          element.style.left = target + "px";
        }
      }, 20);

    }

  </script>
</body>

</html>

常用窗口属性

两个属性可以以像素返回浏览器窗口的尺寸

window.innerHeight -浏览器窗口的内高度
window.innerWidth -浏览器窗口的内宽度

注意：浏览器窗口不包括工具栏和滚动条

对于IE5-8：

document.documentElement.clientHeight
document.documentElement.clientWidth
document.body.clientHeight

document.body.clientWidth

//显示浏览器窗口的高度和宽度，考虑兼容所有浏览器
<!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>
  <script>
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    console.log(w);
    console.log(h);
  </script>

</body>

</html>

其他窗口方法
- window.open(URL,name,specs,replace);打开新的窗口
  
  URL：可选打开指定的页面，没有指定则默认打开一个新的空白窗口
  
  name：可选，指定target属性或窗口的名称
  
  specs：可选，一个逗号分隔的项目列表，可以写窗口宽高
  
  replace：true则替换浏览历史中的当前条目，false则在浏览器中创建新的条目
- window.close();关闭当前窗口
- window.moveTo(x,y);移动当前窗口
- window.resizeTo(width,height);调整当前窗口

3.3Navigator对象

用于识别不同的浏览器，大部分属性已经无用，一般只使用userAgent
```
var us = navigator.userAgent;
console.log(ua);
```
- 谷歌浏览器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
- 火狐浏览器：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0
- IE11浏览器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
- IE10浏览器：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
- IE9浏览器：Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
- IE8浏览器：Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
- IE7浏览器：Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

结合正则表达式实现对浏览器类型的判断

var ua =navigator.userAgent;
if(/firefox/i.test(ua)){
    alert("火狐浏览器");
}else if(/chrome/i.test(ua)){
    alert("谷歌浏览器");
}else if(/msie/i.teat(ua)){
    alert("IE5-10浏览器");
}else if("ActiveXObject" in window){
    alert("IE11浏览器");
}

3.4Location对象

封装浏览器的地址栏的信息，直接打印则可以获取到当前页面的完整路径
常用属性：
- console.log(location); 输出location对象
- console.log(location.href); 输出当前地址的全路径地址
- console.log(location.origin); 输出当前地址的来源
- console.log(location.protocol); 输出当前地址的协议
- console.log(location.hostname); 输出当前地址的主机名
- console.log(location.host); 输出当前地址的主机
- console.log(location.port); 输出当前地址的端口号
- console.log(location.pathname); 输出当前地址的路径部分
- console.log(location.search); 数传当前地址"?"后面的参数部分
  
  修改地址：location ="new url"; location.href="new url";
常用方法
- location.assign("new url");跳转到其他页面，作用等于直接修改location
- location.reload(true);重新加载当前页面，参数true强制清空缓存刷新页面
- location.replace("new url")使用新的页面替换当前页面，不会生成历史记录也不能使用回退按钮返回

3.5History对象

操作浏览器向前或向后翻页

常用属性：

console.log(history);//输出history对象
console.log(history.length);//获取到当前访问的链接数量

常用方法
- history.back();回退
- history.forward();前进
- history.go(一个整数);跳转到指定页面
  - 1 前进一页
  - 2 前进两页
  - -1 回退一页
  - -2 回退两页

3.6Screen对象

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。没有公开标准，并非所有浏览器支持该对象
Screen对象属性
- availHeight 显示屏幕的高度 (除 Windows 任务栏之外)
- availWidth 显示屏幕的宽度 (除 Windows 任务栏之外)
- bufferDepth 调色板的比特深度
- colorDepth 目标设备或缓冲器上的调色板的比特深度
- deviceXDPI 显示屏幕的每英寸水平点数
- deviceYDPI 显示屏幕的每英寸垂直点数
- fontSmoothingEnabled 用户是否在显示控制面板中启用了字体平滑
- height 显示屏幕的高度
- logicalXDPI 显示屏幕每英寸的水平方向的常规点数
- logicalYDPI 显示屏幕每英寸的垂直方向的常规点数
- pixelDepth 显示屏幕的颜色分辨率（比特每像素）
- updateInterval 屏幕的刷新率
- width 显示器屏幕的宽度

bfbshs_ddd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript–Web APIs

API应用程序编程接口：一些预先定义的函数，让应用程序和开发人员可以实现一些功能但无需访问实现功能的源码Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
复制链接

扫一扫