DOM、BOM

• Web APIs
• • Web APIs和JS基础关联性
  • API和Web API
  • DOM
  • • DOM树
    • 获取元素
    • 事件基础
    • 操作元素
    • • 改变元素内容
      • 修改元素属性
      • 表单属性设置
      • • 案例，password可见隐藏，多次改变恢复的方法
      • 修改样式属性
      • 循环精灵图
      • 表单onfocus/onblur/显示隐藏文本框内容
      • className更改元素样式
      • 排他思想
      • 表格隔行变色
      • 自定义属性操作
      • H5自定义属性
    • 节点操作
    • • 节点层级
      • • 父节点 子节点
        • 兄弟节点
      • 创建和添加节点
      • 删除节点
      • 阻止链接跳转
      • 复制节点
      • 三种创建元素的方式
    • 事件高级
    • • 注册事件（绑定事件）
      • 删除事件（解绑）
      • DOM事件流
      • 事件对象
      • 常见的事件对象属性和方法
      • 事件委托
      • 常见的鼠标事件
      • 鼠标事件对象
      • 键盘事件
      • 键盘事件对象
  • BOM
  • • 常见事件
    • • 页面加载事件
      • 调整窗口大小事件
    • 定时器
    • this指向谁
    • JS执行机制
    • location对象
    • • url
    • navigator对象
    • history对象
  • PC端网页特效
  • • offset系列属性
    • offset和style的区别
    • 如何获取鼠标在盒子内的距离
    • 元素可视区client系列
    • flexible.js解析
    • scroll系列
  • mouseover和mousenter事件
  • 动画函数封装
  • • 缓动动画
    • 轮播图

Web APIs

Web APIs和JS基础关联性

API和Web API

API:应用程序编程接口
Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）

DOM

DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时…

DOM树

DOM把以上内容都看作对象。

获取元素

ID、标签名、H5新方法、特殊

getElementByld()返回一个匹配的ID元素
getElementsByTagName(） 返回标签的集合

<ol id="ol">
    <li>hi</li>
    <li>hi</li>
</ol>
<ul>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
</ul>
<div id="time">2019-9-9</div>
<script>
    // 因为文档页面从上往下加载，所以现有标签
    // 驼峰命名法
    //id是字符串 ()里面是字符串
    // 返回的timer类型是对象
    var timer = document.getElementById('time');
    console.log(timer);//2019-9-9
    console.dir(timer);//可以查看各种属性

    var lis = document.getElementsByTagName('li')
    console.log(lis);//返回的是 获取过来元素对象的集合 以伪数组的形式储存 
    console.log(typeof lis);//object
    console.log(lis[0]);
    // 依次打印
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 如果页面中仅有一个li返回的还是伪数组的形式
    // 如果页面中没有li返回的是空的伪数组的形式
    // element.getElementsByTagName('标签名')父元素必须是指定的单个元素
    var ol = document.getElementById('ol')
    var lis = ol.getElementsByTagName('li')
    console.log(lis);

getElementsByClassName和H5新方法：

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul id="name">
    <li>1</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var boxs = document.getElementsByClassName('box')//根据类名返回元素对象集合 伪数组形式存储
    console.log(boxs);
    console.log(document.querySelector('.box'));//返回指定选择器的第一个元素对象 里面要加符号
    console.log(document.querySelector('#name'));//返回ul
    console.log(document.querySelector('li'));
    var allBoxs = document.querySelectorAll('.box')//返回指定选择器的所有元素对象的集合 为数组形式储存
    console.log(allBoxs);
</script>

获取特殊元素对象：

<script>
    var bodyEle = document.body;
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.dir(htmlEle);
</script>

事件基础

事件三要素和执行步骤：


1.获取事件源 2.注册事件 3.事件处理程序

操作元素

js的DOM操作可以改变网页的内容、结构和样式，我们可以利用DOM操作元素改变元素里面的内容、属性等，注意以下都是属性。

改变元素内容

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
    //获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //注册事件
    btn.onclick = function fn() {
        div.innerText = getDate();
    }
    function getDate() {
        //格式化日期 年月日
        var date = new Date();
        var year = date.getFullYear();//返回当前日期的年
        var month = date.getMonth() + 1;//返回的要少一
        var dates = date.getDate();//返回几号
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
    }
    //我们元素可以不用添加事件,这叫做操作DOM
    var p = document.querySelector('p');
    p.innerText = getDate();
</script>

innerText和innerHTML的区别：
1.innerText不识别html标签 非标准 去除空格和换行
1.innerHTML识别html标签 W3C标准 保留空格和换行
两者都可以读写：

<div></div>
<p>你好
    <span>我是刘德华</span>
</p>
<script>
    var p = document.querySelector('p');
    var div = document.querySelector('div')
    console.log(p.innerHTML);
    console.log(p.innerText);
    div.innerText = '<em>今天</em>';//无法识别em会直接显示出来
    // div.innerHTML = '<em>今天</em>';//会把今天变成斜体
</script>

修改元素属性

实例为修改图片的src属性

表单属性设置

案例，password可见隐藏，多次改变恢复的方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            right: 2px;
            top: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        //获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //注册事件 处理程序
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

</html>

修改样式属性

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var box = document.querySelector('div');
        box.onclick = function () {
            //注意style里的属性和css里的写法不一样，是驼峰命名法
            this.style.backgroundColor = 'blue';
            this.style.width = '250px';
        }
    </script>
</body>

修改完样式属性后新的样式是以行内样式插入的

循环精灵图

适用于精灵图中的小图标排列有规律的情况

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
            //注意写法 0后面有空格和负号
        }
    </script>

表单onfocus/onblur/显示隐藏文本框内容

<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            // console.log('得到了焦点');
            if (this.value === '手机') {
                this.value = '';
            }
            //获得焦点把文本框文字颜色变深
            this.style.color = '#333';
        }
        text.onblur = function () {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            //获得焦点把文本框文字颜色变灰
            this.style.color = '#666';
        }
    </script>
</body>

className更改元素样式

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        .change {
            width: 300px;
            height: 300px;
            background-color: bisque;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div>盒子</div>
    <script>
        var box = document.querySelector('div');
        box.onclick = function () {
            this.className = 'change';
            //如果原来的div有类名，且想保留它，则可以this.className='change 原来的类名';
        }
    </script>
</body>

排他思想

如轮播图…就要用到，先排除所有的样式，然后再给当前元素添加样式。如：

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.querySelectorAll('button');
        //btns得到的是伪数组，里面的每一个元素用btns[i]得到
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //先把所有背景颜色去掉，然后让当前的元素背景颜色改变
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

按某个按钮后，它变成粉色

表格隔行变色

    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
    //注意选择的是tbody里的tr
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            //鼠标经过事件onmouseover
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            //鼠标离开事件onmouseout
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>

自定义属性操作

element.属性 内置属性
element.getAttribute(‘属性’) 我们定义的属性

element.setAttribute('属性‘，’值‘）
注意修改属性时：
1） element.className=‘属性’;
2)element.setAttribute(class，’值‘）
移除属性
element.removeAttribute(‘属性’)

H5自定义属性

或者用setAttribute设置

获取属性：getAttribute（无兼容性问题）
还有： element.dataset.data-后面的属性名字；还要注意自定义属性里面有多个短横线连接的单词，用dataset获取时要用驼峰命名法

节点操作

所有的都是节点，节点一般有节点类型 名称 值


实际开发主要操作的是元素节点

节点层级

父节点 子节点

想获得某个元素的父节点：element.parentNode

childNodes获得所有的子节点，包括元素节点、文本节点…（空格换行）
我们可以用nodeType来判断是不是元素节点：如我们想要ul里面的li

element.children
获得所有子元素节点（html元素）

获取第一个和最后一个孩子：
注意：firtsChild lastChild获取的是第一个(最后一个）子节点，包括文本节点、元素节点…
以下两种方法只支持IE9以上
要获取第一个子元素节点：

要获取最后一个子元素节点：
parentNode.lastElementChild

另一种方法：（实际开发都用这样的）
获取第i个子元素节点
parentNode.children[i]
获取最后一个：
parentNode.children[parentNode.children.length-1]

兄弟节点

下面两方法只支持IE9以上：
node.nextElementSibling
node.previousElementSibling
解决兼容性问题：

创建和添加节点

document.createElement(‘li’)
node.appendChild(element）
添加到指定父节点的子节点后面

node.insertBefore(child,指定元素）
node为父元素，指定元素为指定的子元素，插到它前面

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //创建节点
        var li = document.createElement('li')
        //添加节点
        var ul = document.querySelector('ul')
        ul.appendChild(li);
        //在123前面插入一个li
        var lili = document.createElement('li')
        ul.insertBefore(lili, ul.children[0])
    </script>
</body>

删除节点

node.removeChild(child)
从node中删除某个子节点，返回删除的节点

阻止链接跳转

javascript:void(0);或者javascript:;

复制节点

node.cloneNode()
node为要克隆的节点；如果括号为空或里面是false，则只是浅拷贝，只复制标签不复制里面的内容，则克隆完以后要添加appendChild；括号里有true，就是把节点本身以及里面所有的子节点都拷贝。

三种创建元素的方式

document.write()
文档流执行完毕后，会导致页面全部重绘。

innerHTML用拼接字符串的方式，效率很低，但用数组的方式传给他会效率很高。creatElement效率会低一点，但结构更清晰。

事件高级

注册事件（绑定事件）

    <button>传统注册事件</button>
    <button>方法监听注册方式</button>
    <script>
        //click不需要加on 要引号 listener就是function 可以注册多个，传统的不可以
        var btns = document.querySelectorAll('button')
        btns[1] = addEventListener('click', function () {
            alert(22);
        })
        btns[1] = addEventListener('click', function () {
            alert(33);
        })
    </script>

注：attachEvent要IE9以前的支持

删除事件（解绑）

传统，如：
element.οnclick=null;
监听：
element.removeEventListener

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播。当addEventListener第三个参数为true，则是捕获阶段，当我们给父元素添加相同的事件如鼠标点击，则点击子元素时，son father body html document依次执行；冒泡就是第三个参数设置为false，son事件处理程序执行，然后父元素的事件处理程序执行，然后…body、html、document

事件对象

<div>123</div>
<script>
    // 事件对象
    var div = document.querySelector('div');
    div.onclick = function(e) {
            // console.log(e);
            // console.log(window.event);
            // e = e || window.event;
            console.log(e);


        }
        // div.addEventListener('click', function(e) {
        //         console.log(e);

    //     })
    // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
    // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
    // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
    // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
</script>

常见的事件对象属性和方法

    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识

事件委托

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';


        })
    </script>

常见的鼠标事件

禁止鼠标右键菜单和禁止选择（不让复制）

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

鼠标事件对象

这种黄色框框跟随鼠标走可以参照下面的案例：

    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位,元素默认是贴着左上角对其的，所以让鼠标刚好在图片中心就好
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });

键盘事件

keydown会比keypress先执行，最后是keyup
注意：传统的才需要加on，addEventListener不用

键盘事件对象

e.keycode获得按到的键对应的ascII码

BOM

浏览器对象模型，独立于内容而与浏览器窗口做交互效果。

BOM比DOM大。window对象是JS访问浏览器窗口的一个接口，它是全局对象，全局变量都是window的一个属性，函数都是它的方法。（可以省略）

常见事件

页面加载事件

传统：window.οnlοad=function(){}
监听：window.addEventListener(‘load’,function(){})
这样就可以把script写到页面任何一个地方，意思是页面内容全部加载完毕再执行里面的代码。（包括图像、脚本文件、css）
注意，传统的方式只能最后一个起作用。

DOMContentLoaded 仅当DOM元素加载完毕，不包括样式表，图片，flash等。只适合IE9以上。

调整窗口大小事件

windo.innerWidth当前屏幕的宽度（浏览器）

定时器

setTimeout()
setInterval()

<button>点击停止</button>
<script>

    // setTimeout(function () {},毫秒)
    // setTimeout(function () {
    //     console.log('hi');
    // }, 3000)

    // 也可以这样写,setTimeout(函数名，毫秒数)
    //setTimeout(函数名，毫秒数)里面的函数也叫做：callbcak也叫做回调函数
    //要点击完才执行的函数这种也叫做回调函数
    function callback() {
        alert('炸了')
    }
    var time1 = setTimeout(callback, 2000)

    // 也可以这样写,setTimeout('函数名（）'，毫秒数)
    //一般要给定时器加上标识符，免得很多定时器

    //停止定时器
    // window.clearTimeout(timeoutID) window可以省略
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        clearTimeout(time1)
    })
</script>

setInterval()的区别就是它可以重复调用函数，每隔一段时间就调用一次；
倒计时效果：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            display: flex;
            width: 600px;
            margin: 100px auto;
            justify-content: center;
            align-items: center;
        }

        .father div {
            height: 100px;
            width: 100px;
            background-color: blue;
            margin: 0 10px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="hour">1</div>
        <div class="minute">2</div>
        <div class="second">3</div>
    </div>
    <script>
        //获取元素
        var hour = document.querySelector('.hour')
        var minute = document.querySelector('.minute')
        var second = document.querySelector('.second')
        var inputTime = +new Date('2021-3-20 19:00:00');//返回用户输入的时间的总毫秒数
        //倒计时函数
        function countDown() {
            var nowTime = +new Date();//返回当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//返回剩余时间的秒数
            var h = parseInt(times / 60 / 60);//当前剩余的hour
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);//当前剩余的minutes
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);//当前剩余的seconds
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
        countDown();
        setInterval(countDown, 1000);
    </script>
</body>

</html>

案例：点击发送验证码

    <input type="number" name="" id="">
    <button>发送验证码</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var timer = setInterval(function () {
                if (time !== 0) {
                    btn.innerHTML = '请' + time + '秒后再试';
                    time--;
                }
                else if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '点击发送验证码';
                    time = 3;
                }
            }, 1000)
        })
    </script>

this指向谁

1.全局作用域或调用普通函数指向window
如setInterval()指向的就是window

2.谁调用方法就指向谁
btn.addEventListener(‘click’, function () {
this.disabled = true;}
指向btn

3.构造函数指向实例化对象
如：
function fn(){
this.age=18;
}
var fn1=new fn()
指向fn1

JS执行机制

js是单线操作；
但现在可以同步和异步；

location对象

url

统一资源定位符

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            // location.assign('http://www.baidu')//记录浏览器历史，可以后退
            // location.replace('http://www.baidu')//不记录不后退
            location.reload();//相当于刷新，当有参数时为强制刷新，这样就不存在缓存的问题（之前有的网站打开后已经被缓存了，这时候需要强制刷新）
        })
    </script>
</body>

navigator对象

history对象

history.pushState({},’’,‘home’) 也可以改变url且不发生刷新(入栈操作，back(),go(-1)相当于出栈操作）

在OA系统中用的比较多

PC端网页特效

offset系列属性

注意：parentNode返回的是最近一级的父亲；offsetParent返回的是带有定位的父亲；

offset和style的区别

style只能得到行内样式表里的样式值，不能获得内嵌的（就是写在< style></ style>里的不行。

如何获取鼠标在盒子内的距离

元素可视区client系列

client返回的不包含border值，其余和offset一样。

flexible.js解析

立即执行函数 (function(a){})(1) 或(function(a){}(1)) 第二个小括号可以看作在调用函数，里面可以放实参，传给第一个小括号里的形参；它是不需要调用就可以执行的函数；立即执行函数创建了一个独立的作用域，里所有的变量都是局部变量，不会有冲突。

scroll系列

scrollTOP(Left)不针对document

scroll高度宽度是真正的内容大小，Top Left：滚动条拖动时，文字往上走了，scrollTop指的是边框的下沿到文字上沿距离。

scroll滚动事件，即我们的滚动条滚动时触发的事件。

注意页面document被卷曲的头部可以用：
window.pageYOffset获得（左侧Y改成X）

mouseover和mousenter事件

mouseover:当鼠标移动到自身盒子及其子盒子都会触发一次事件；因为它会冒泡。
mousenter:当鼠标移动到自身盒子会触发一次事件；

动画函数封装

核心原理：通过定时器setInterval()不断移动盒子的位置。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        // var obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 300);
        btn.addEventListener('click', function() {
            animate(span, 200);
        })
    </script>
</body>

</html>

缓动动画

就是让它慢慢停下来。

轮播图

一些细节：当链接里面是#时，点击就会自动回到页面顶部，我们要把#换成javascript:;

手动调用事件；