JS笔记

JavaScript

一、基础

推荐将所有的script标签尽可能放到body标签的底部，以尽量减少对整个页面下载的影响。

---

1.初见

1.1、入门（控制台调试JS代码）

1.2、断点调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLX4XcFg-1617881499411)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210330101120782.png)]

2.数据类型

2.1、严格检查模式

         //严格检查模式(必须写第一行)，预防JavaScript的随意性导致产生的一些问题
        // 局部变量建议都使用let去定义
		'use strict';
        //对象
        //注意逗号
        var person = {
            name:"Jerry",
            age:3,
            tags:["1","2","3"]
        }

网页调试

2.2、字符串

特性：字符串的不可变性

//字符串
        //1.长字符串tab上面的键
        let msg = `hello
            world
            你好
            ${person.name}
				`
        let wid = msg.indexOf('w');//18
        let str = msg.substr(1,3);//ell

2.3、数组

2.3.1、Java中的数组方法一致

1. 注意当sort是比较的字符串，不会按int大小排序

		//************ 数组1**************//
        let arr = [1,23,4,5,6];
        let arr0 = arr[0];
        let arr_length = arr.length;
        let arr_2 = arr.indexOf(6);
        console.log(arr0 + ":" +arr0 + ":" + arr_length + ":" + arr_2);//1:1:5:4
		
		
        //************ 数组1**************//			

2.3.2、slice()

截取Array的一部分，返回一个新数组，类似于String中的subString,返回的是一个新的数组

        //************ 数组2**************//
        let arr = [1,23,4,5,6];
        let arr1 = arr.slice(1,4);
        console.log(arr1);//[23, 4, 5]
        //************ 数组2**************//

2.3.3、push()、pop()

1. 尾部：push():添加元素 pop(): 删除元素
2. 头部：unshift():添加元素 shift():删除元素

		//************ 数组3**************//
        //2.push压入尾部、pop弹出尾部的一个元素（尾部）
        let arr = [1,23,4,5,6];
        arr.push("a","b");
        console.log(arr);//[1, 23, 4, 5, 6, "a", "b"]
        arr.pop();
        console.log(arr);// [1, 23, 4, 5, 6, "a"]
        //3.unshift()向头部添加一个元素、shift() 去掉头部一个元素 |（头部）
        arr.unshift("Jerry",66);
        console.log(arr);// ["Jerry", 66, 1, 23, 4, 5, 6, "a"]
        arr.shift();
        console.log(arr);//[66, 1, 23, 4, 5, 6, "a"]
        //************ 数组3**************//

2.3.4、reverse()

        //************ 数组4**************//
        let arr = [1,23,4,5,6];
        arr.reverse();
        console.log(arr);//[6, 5, 4, 23, 1]
        //************ 数组4**************//

2.3.5、concat()拼接字符串，并返回一个新的字符串

        //************ 数组5**************//
        let arr = [1,23,4,5,6];
        let arr1 = arr.concat("AA","BB","CC");
        console.log(arr);//[1, 23, 4, 5, 6]
        console.log(arr1);// [1, 23, 4, 5, 6, "AA", "BB", "CC"]
        //************ 数组5**************//

2.3.6、连接符join

        //************ 数组6**************//
        let arr = [1,23,4,5,6];
        let arr1 = arr.join("-");
        console.log(arr1);//1-23-4-5-6
        //************ 数组6**************//

2.3.7、多维数组

        //************ 多维数组**************//
        let arr = [[1,2],[3,4],[5,6]];
        console.log(arr[1][0]);
        //************ 多维数组**************//

2.4、对象

        // let 对象名 = {
        //     属性名:属性值,
        //     属性名:属性值,
        //     属性名:属性值
        // }
        let person = {
            name : "Jerry",
            age : 3,
            email:"1111@qq.com",
            score:0
        }
        //1.对象赋值
        person.name = "Tom";
        //2.动态的删减属性，通过delete删除对象的属性
        delete person.email;
        //3.动态的添加属性，直接给新的属性添加值即可
        person.haha = "haha"
        //{name: "Tom", age: 3, score: 0, haha: "haha"}
        

2.5、Map和Set

2.5.1、Map和Set

        //Map为例 Set 是无序的
        let map = new Map([['tom',100],['Jerry',20],["Jack",80]]);

        let tom = map.get('tom');
        console.log(tom);//100
        map.set('admin',123);
        let admin = map.get('admin');
        console.log(admin);//123
        map.delete('Jack');//删除

2.5.2、Iterator

let map = new Map([['tom',100],['Jerry',20],["Jack",80]]);
        //遍历
        for(var a of map){
            console.log(a);
        }

        let set = new Set([3,4,5]);
        for(let s of set){
            console.log(s);
        }

3.函数

3.1、定义函数

定义方式一：
function abs(x) {
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }
定义方式二：
var abs = function(x){
    if(x>=0){
                return x;
            }else {
                return -x;
        }
}

3.1.1 、抛出异常

    if(x>=0){
                return x;
            }else if(x<0){
                return -x;
            }else {
                throw "not a number";
            }
        }

3.1.2、arguments & rest

arguments （伪数组）代表，传递进行的所有的参数，是一个数组

1. 伪数组：并不是真正意义上的数组
   1. 具有数组的length属性
   2. 按照索引的方式进行存储的
   3. 它没有真正数组的一些方法pop()、push()等等
2. 只有函数采用

function fn(){
    console.log(arguments);//里面存储了所有传递过来的实参
    console.log(arguments.length);
    console.log(arguments[2]);
}
fn(1,2,3);

rest :获取除了已经定义的参数之外的所有参数

function a(a,b,...rest) {
            console.log(a);
            console.log(b);
            console.log(rest);
        }

3.2、变量的作用域

1. 建议let去定义局部做哦那个域的变量

2. 常量关键字const

   eg:

   const = '3.14';
   

3.3、自定义函数

<script>
        var myMath = {
            max1 : function(){

                var max = arguments[0];
                for(var i = 0; i < arguments.length;i++){
                    if(max < arguments[i]){
                        max = arguments[i];
                    }
                }
                return max;
            },
            min1 : function(){
                var min = arguments[0];
                for(var i = 0; i < arguments.length;i++){
                    if(min > arguments[i]){
                        min = arguments[i];
                    }
                }
                return min;
            }

        }
       console.log( myMath.max1(12123,12,1,23));//12123
       console.log( myMath.min1(12123,12,1,23));//1
    </script>

4.方法

1. apply():可以控制this的指向

var person = {
	name : 'Jerry',
    birth : 2020,
    age : function(){
        //今年-出生的年
        let now = new Date().getFullYear();
        return now - this.birth;
    }

}

 //方法一
    var person = {
        name : 'Jerry',
        birth : 2020,
        age : function(){
            //今年-出生的年
            let now = new Date().getFullYear();
            return now - this.birth;
        }
    }
    console.log(person.name);
    console.log(person.age());

    //方法二
    function getage() {
        let year = new Date().getFullYear() - this.birth;
        return year;

    }
    let kato = {
        name : "tom",
        birth : 2019,
        age : getage
    }
    
    let xiaoming = {
        name : "Jerry",
        birth : 2001,
        age : getage
    }

    console.log(kato.age());//2
    
        console.log(getage.apply(xiaoming, []));//20

5.内部对象

5.1、Date

	    let now = new Date();
        console.log(now);
        console.log(now.getFullYear());//2021年
        console.log(now.getMonth()+1);//3月 月份（0-11）
        console.log(now.getDate());//30日
        console.log(now.getHours());//19时
        console.log(now.getMinutes());//46分
        console.log(now.getSeconds());//37秒
        console.log(now.getDay());//2 表示这周第几天
        console.log(now.getTime());//时间戳

5.2、JSON

定义：早期，所有数据传输习惯使用XML，后JSON效率高。

 let person = {
            name:"Jerry",
            age:10,
            sex:"male"
        }
        // stringify(): Obj->JSON
        console.log(JSON.stringify(person));//{"name":"Jerry","age":10,"sex":"male"}


        // parse():JSON->Obj
       let obj = JSON.parse('{"name":"Jerry","age":10,"sex":"male"}');//格式必须单引号 大括号包起来
        console.log(obj);

6.面向对象编程

 let person = {
            name : "ren",
            run : function () {
                console.log(this.name + "run");
            }
        }
        let student = {
            name : "student",
            age : 20,
            run : function () {
                console.log("我是" + this.name + ",我" + this.age + "了，我可以跑");
            }
        }
        let xiaoming = {
            name : "xiaoming",

        }
        let bird = {
            name : "bird",
            run : function () {
                console.log("nishi")
            }
        }
        console.log(bird.run());
        xiaoming.__proto__= student;
        console.log(xiaoming.run());

7.操作BOM对象（重点）

1. 定义：BOM时游览器对象模型

7.1、window

定义：代表游览器窗口

       console.log("内高："+window.innerHeight);;
        console.log("内宽："+window.innerWidth);;
        console.log("外高："+window.outerHeight);;
        console.log("外高："+window.outerWidth);;

7.2、Navigato（不重要）

1. 封装了游览器的信息

		console.log(navigator.appName);
        console.log(navigator.appCodeName);
        console.log(navigator.appVersion);
        console.log(navigator.platform);

7.3、screen

1. 获取屏幕信息

        console.log(screen.width);
        console.log(screen.height);

7.4、location（重点）

1. 代表当前页面的信息

        console.log(location);
        console.log(location.host);
        console.log(location.href);
        console.log(location.protocol);

7。5、document

1. 获取具体的文档树节点

        document.getElementById("div")

7.6、history

1. 定义：代表游览器的历史记录

history.back();//后退
history.forward();//前进

8、操作DOM对象（重点）

1. DOM:文档对象模型
2. 操作

9.输入输出

1. prompt():输入框

prompt("请输入年龄")

1. alert():警示框
2. console:控制台
   1. console.log:游览器控制台打印

二、高级

小知识点：

console.dir()可以显示一个对象所有的属性和方法。

1.方法

getElement()等方法

<ul>
    <li>111</li>
    <li>222</li>
</ul>
<ol>
    <li>aaa11</li>
    <li>bbb22</li>
</ol>
<script>
//1.因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
//2.getElementsByTagName方法可以带有指定标签名得对象得集合
//2.1返回得是 获取过来元素对象得集合，以伪数组得形式存储得

let lis = document.getElementsByTagName("li");
console.log(lis);
console.log(lis[0]);
//遍历
for(let i of lis){
    console.log(i);
}

// 3.getElementsByTagName;父元素必须是指定得单个元素
let ol = document.getElementsByTagName("ol");
let olis = ol[0].getElementsByTagName("li");
console.log(ol);

querySelector();

• 根据只当 选择器返回第一个元素对象

console.log(document.querySelector("li"));

querySelectorAll:

console.log(document.querySelectorAll("li"));

document.body:获取body元素

document.documentElement:获取html元素

    var bodyEle = document.body;
    console.log(bodyEle);
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.log(htmlEle);
    console.dir(htmlEle);

2.属性

1. getAttribute:可以获取自定义属性名得属性值

	<div id="demo" aaa="1"></div>
    console.log(d.getAttribute("aaa"));//1

2. setAttribute:可以设置属性值

	d.id = "bbb";
    console.log(d.id);//bbb
    d.setAttribute("aaa","2");
    console.log(d.getAttribute("aaa"));//2

3. removeAttribute:删除属性值

    d.removeAttribute('aaa');

3.事件

1. onclick:点击事件

<button id = "btn">点我</button>
//点击一个按钮，弹出对话框
    //1.获取事件源
    let btn = document.getElementById("btn");
    //2.绑定事件，注册事件
    //3.添加事件处理程序
    btn.onclick = function () {
        alert("你好");
    }

2. onmouseover onmouserout

• onmouseover 鼠标经过事件

• onmouserout：鼠标移出事件

3. onfocus onblur

• onfocus :获得焦点
• onblur：失去焦点

4.操作元素

4.1 DOM操作

属性/方法	描述
getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
getElementById()	返回对拥有指定 id 的第一个对象的引用
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
querySelector()	返回文档中匹配指定的CSS选择器的第一元素
querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

	<button id = "btn">点我</button>
	<div>111</div>
	let btn = document.getElementById("btn");
    let d = document.getElementsByTagName('div');
    btn.onclick = function () {
        d[0].innerText = new Date();
    }
	//或者
	let d = document.querySelector("div");
	btn.onclick = function(){
        d.innerTest = new Date();
    }

注意：集合用方法得时候看成数组操作，对象则直接对象.方法

1. innerTest 和 innerHtml

• innerTest
  • 不识别HTML标签，非标准，去除了空格和换行
• innerHtml
  • 识别HTML标签，W3C标准，保存空格和换行

    let div = document.querySelector("div");
    div.innerText = '<strong>aaa</strong>';
    div.innerHTML = '<strong>aaa</strong>';

5.获取元素

5.1 querySelectorAll children

    let uls = document.querySelector('ul');
    //1.方式一、
    let lis1 = uls.querySelectorAll('li');
    //2.方式二、children获取所有得子元素节点，也是实际开发常用得
    let lis2 = uls.children;
    console.log(lis1);
    console.log(lis2);

let ul1 = document.querySelector('ul');
//返回第一个子元素节点first\last  存在兼容性问题
console.log(ul1.firstElementChild);
//3.实际开发得写法， 既没有兼容性问题又返回第一个子元素
console.log(ul1.children[1]);
console.log(ul1.children.length -1 );

5.2 nextSibling nextElementSibling：下一个兄弟

nextSibling :下一个兄弟节点 包含元素节点或者文本节点等等

nextElementSibling得到下一个兄弟元素节点

5.2 previousSibling previousElementSibling：上一个兄弟

previousSibling ：上一个兄弟节点 包含元素节点或者文本节点等等

previousElementSibling：得到上一个兄弟元素节点

    <a href=""></a>
    <div>div</div>
    <span>span</span>
 let div = document.querySelector('div');
    //1.nextSibling下一个兄弟节点 包含元素节点或者文本节点等等
    console.log(div.nextSibling);//#text
    console.log(div.previousSibling)//text
    //2. nextElementSibling得到下一个兄弟元素节点
    console.log(div.nextElementSibling);//<span></span>
    console.log(div.previousElementSibling);//<a href></a>

6.DOM元素操作

6.1 创建元素document.write|innerHTML|createElement

6.2 增加元素

appendChild|insertBefore

//1.创建节点

//2.添加节点node.appendChild(child) node父级 child是子级 方法将一个节点添加到指定父节点列表末尾。

   
    let li = document.createElement('li');
    
    let ul = document.querySelector('ul');
    ul.appendChild(li);

• insertBefore

注意参数insertBefore(将要插入的节点，父节点下的哪个位置)

  let li = document.createElement('li');
  let li1 = document.createElement('li');
  ul.insertBefore(li1,ul.children[0]);

6.3 删除元素removeChild

//node.removeChild(child)
let ul = document.querySelector('ul');
let btn = document.querySelector('button');
btn.onclick = function () {
    if(ul.children.length == 0){
        this.disabled = true;
    }else {
        ul.removeChild(ul.children[0]);
    }
}

6.4 改元素

1. 修改元素属性：src|href|title
2. 修改普通元素内容：innerHTML|innerText
3. 修改表单元素：value|type|disabled
4. 修改元素样式：style|className

6.5 查元素

1. DOM提供得API方法:getElementById|getElementsByTagName:古老得用法不太推荐
2. H5提供得新方法：querySelector|querySelectorAll：提倡
3. 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)

6.6.复制元素

cloneNode(boolean)

参数为true就是深拷贝：复制标签及里面的内容

参数为false就是浅拷贝：仅复制标签

6.7 属性操作

1. setAttribute:设置dom得属性值
2. getAttribute:得到dom得属性值
3. removeAttribute移除属性

6.8 事件操作

1. onclick:鼠标点击左键触发
2. onmouseover：鼠标经过触发
3. onmouseout：鼠标离开触发
4. onfocus：获得鼠标焦点触发
5. onblur：失去鼠标焦点触发
6. onmousemove：鼠标移动触发
7. onmouseup：鼠标弹起触发
8. onmousedown：鼠标按下触发

7.事件

7.1 注册事件（绑定事件）

1. 概述

注册事件有两种方式：传统方式(唯一性，只能定义一个)和方法监听注册方式(按添加得事件依次监听)

2. 监听事件

eventTarget.addEventListener(type,listener[,useCapture])

//type:事件类型字符串，比如click、mouserover，注意这里不要带on
//listener:事件处理函数，事件发生时，会调用该监听函数
//useCapture:可选参数，是一个布尔值，默认是false。表示在事件捕获阶段调用事件处理程序；如果是false,表示在事件冒泡阶段调用事件处理程序


    let btn = document.querySelectorAll('button');
    btn[0].addEventListener('click',function () {
        alert(22);
    })
    btn[0].addEventListener('click',function () {
        alert(33);
    })

7.2 删除事件

    //1.传统解绑事件
    let divs = document.querySelectorAll('div');
    divs[0].onclick = function () {
        alert(11);
        divs[0].onclick = null;
    }
    //2.removeEventListener删除事件
    divs[1].addEventListener('click',fn);//fn不需要加括号 不能使用匿名函数，需要单独显示函数声明
    function fn() {
        alert(22);
        divs[1].removeEventListener('click',fn);
    }

7.3 事件对象

    <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>

7.4 属性方法

<!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 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>

        l

        // 常见事件对象的属性和方法
        // 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);

            })



    </script>
</body>

</html>

        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

<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>

7.4 鼠标事件

  <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>

7.4.1 鼠标事件对象

<!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>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

</html>

7.5 键盘事件

8.BOM

8.1 Window对象常见事件

8.1.1 onload

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。

3. 如果使用 addEventListener 则没有限制

<!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>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        //推荐下方写法
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <button>点击</button>

</body>

</html>

8.1.2 resize调整窗口大小

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

<!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 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

</html>

8.2 定时器

8.2.1 setTimeout设置

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐

3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

8.2.1 clearTimeout(timeouID)清除定时器

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

<!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>
</head>

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

</html>

8.2.2 setInterval

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

<!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 {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: aqua;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白

        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ab9RyuVQ-1617881499459)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210402133929587.png)]

8.2.2 clearInterval清除定时器

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

<!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>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

</html>

8.4 Location对象

8.5 history对象

案例

1、不同时间段显示不同图片

<div><img src="../img/01.jpg" width="300px" height="300px " alt="" id="im"></div>
<script>

    let i = document.querySelector("img");
    i.onclick = function () {
        let date = new Date();
        if(date.getHours() >= 7 && date < 12){
            i.src = "../img/02.png";
        }else if(date.getHours() >= 12 && date < 18){
            i.src = "../img/03.jpg";
        }else {
            i.src = "../img/04.png";
        }
    }
</script>

2 点击按钮后按钮变不可选中

<button id="btn">点我</button>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function () {
        input.value = "被点击了";
        this.disabled = true;
    }

</script>

3.睁眼闭眼输入框

<div class="box">
    <label for="">
        <img src="../img/睁眼.png" id="eye" alt="">
    </label>
    <input type="text" id="pwd">

</div>
<script>
    let eye = document.getElementById('eye');
    let pwd = document.getElementById('pwd');

    let flag = true;
    eye.onclick = function () {
        if(flag){
            eye.src = "../img/闭眼.png";
            pwd.type = "password";
            flag = false;
        }else {
            eye.src = "../img/睁眼.png";
            pwd.type = "text";
            flag = true;
        }
    }



</script>

4、JS改变样式

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
		.change{
            width:200px;
            height:100px;
            background-color:blue;
        }
    </style>
	

</head>
<body>
    <div></div>

    <script>
        let div = document.querySelector('div');
        div.onclick = function () {
            //会属于行内样式
            this.style.backgroundColor = 'purple';
            this.style.width = '300px';
            
            //或者
            //让我们当前元素得类名改为了change
            this.className = 'change';
        }

    </script>
</body>

5、JS onfocus获取焦点|onblur失去焦点

• <body>
  <input type="text" id="tinput" value="手机">
      <script>
          let tinput = document.getElementById('tinput');
          tinput.onfocus = function () {
              if(this.value == '手机'){
                  this.value = '';
              }
              this.style.color = '#333';
              console.log("得到焦点");
          }
          tinput.onblur = function () {
              console.log("失去焦点");
              if(this.value == ''){
                  this.value = '手机';
              }
              this.style.color = '#999';
          }
      </script>
  </body>
  

6.JS表单验证

•     <style>
          div{
              background-color: blanchedalmond;
              width: 600px;
              margin:100px auto;
              text-align: center;
  
          }
          div input{
              position: relative;
              width: 150px;
              border:1px red solid;
              text-align: center;
          }
          div p{
              display: inline-block;
              width: 150px;
              font-size: 12px;
              padding-left: 20px;
  
          }
          .wrong{
              color :red;
              background: url("../img/叹号.png" ) no-repeat left center;
              background-size: 20px;
          }
          .true{
              color:green;
              background: url("../img/勾.png") no-repeat left center;
  
          }
      </style>
  </head>
  <body>
  <div id="box">
      <input type="text">
      <p>请输入密码</p>
  </div>
  <script>
      let ipt = document.querySelector('input');
      let p = document.querySelector('p');
  
      ipt.onblur = function () {
          if(this.value.length < 6 || this.value.length > 16){
              p.className = 'wrong';
              p.innerHTML = "您输入得不对";
          }else {
              p.className = 'true';
              p.innerHTML = "您输入得正确"
          }
      }
  </script>
  </body>
  

7 页面换肤

• <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{
              background: url("../img/01.jpg") no-repeat center top;
              background-size: 1536px 864px;
          }
          li{
              list-style: none;
          }
          .baidu{
              overflow: hidden;
              margin: 100px auto;
              background-color: #fff;
              width: 410px;
              padding-top: 3px;
          }
          .baidu li{
              float: left;
              margin: 0 1px;
              cursor: pointer;
          }
          .baidu img{
              width: 100px;
          }
      </style>
  </head>
  <body>
  
  
  
  <ul class="baidu">
      <li><img src="../img/01.jpg" alt=""></li>
      <li><img src="../img/02.png" alt=""></li>
      <li><img src="../img/03.jpg" alt=""></li>
      <li><img src="../img/04.png" alt=""></li>
      <li><img src="../img/05.jpg" alt=""></li>
  </ul>
  
  <script>
      var imgs = document.querySelector('.baidu').querySelectorAll('img');
  
      for (let i = 0; i < imgs.length; i++) {
          imgs[i].onclick = function () {
              let body = document.body;
              body.style.backgroundImage = 'url('+this.src+')';
          }
      }
  
      console.log(screen.width);
      console.log(screen.height);
  </script>
  </body>
  </html>
  

8 全选全不选

//部分代码
   <thead>
    <tr>
        <th>
            <input type="checkbox" id="c01">
        </th>
   </thead>
   <tbody id="tb">
    	<tr>

<script>
    let c01 = document.getElementById('c01');
    let tb = document.getElementById('tb').getElementsByTagName('input');
    c01.onclick = function () {
            for (let i = 0; i < tb.length; i++) {
                tb[i].checked = this.checked;
            }
    }

    //下面复选框影响上面得
    for (let i = 0; i < tb.length; i++) {
        tb[i].onclick = function () {
            var flag = true;
            for (let j = 0; j < tb.length; j++) {
                if(!tb[j].checked){
                    flag = false;
                    break;
                }
            }
            c01.checked = flag;
        }
    }
</script>

9 下拉菜单

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
</ul>
<script>
    // 1. 获取元素
    var nav = document.querySelector('.nav');
    var lis = nav.children; // 得到4个小li
    // 2.循环注册事件
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = 'none';
        }
    }

</script>
</body>

</html>

10.鼠标经过变色table

<!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>
        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>
    let trs = document.querySelector('tbody').querySelectorAll('tr');
    for (let i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
            this.className = 'bg';

        }
        trs[i].onmouseout = function () {
            this.className = '';
        }

    }

</script>
</body>

</html>

11.留言版沙发

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        li a{
            float: right;
        }
    </style>
</head>

<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>

</ul>
<script>
    // 1. 获取元素
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    // 2. 注册事件
    btn.onclick = function() {
        if (text.value == '') {
            alert('您没有输入内容');
            return false;
        } else {
            // console.log(text.value);
            // (1) 创建元素
            var li = document.createElement('li');
            // 先有li 才能赋值
            li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
            // (2) 添加元素
            // ul.appendChild(li);
            ul.insertBefore(li, ul.children[0]);

            //删除元素 删除当前链接的父亲
            var as = document.querySelectorAll('a');
            for (let i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    ul.removeChild(this.parentNode)
                }
            }
            text.value = '';
        }
    }
</script>
</body>

</html>

12.动态生成表格

<!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>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
<table cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    // 1.先去准备好学生的数据
    var datas = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'JavaScript',
        score: 0
    }];

    let tbody = document.querySelector('tbody');


    let d_length = datas.length;
    console.log(d_length);


    for (let j = 0; j < d_length; j++) {
        let tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (let i = 0; i < 4; i++) {
            let td = document.createElement('td');
            tr.appendChild(td);
            if(i == 0){
                tr.children[i].innerHTML = datas[j].name
            }else if(i == 1){
                tr.children[i].innerHTML = datas[j].subject
            }else if(i == 2){
                tr.children[i].innerHTML = datas[j].score
            }else {
                tr.children[i].innerHTML = "<a href='javascript:;'>删除</a>";

            }

        }

        let a = document.querySelectorAll('a');
        for (let i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                document.removeChild(this.parentElement.parentElement.remove())
            }
        }
    }



//方法二：

  // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }


</script>
</body>

</html>

13.跟随鼠标得天使

<!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>
        body{
            height: 2000px;
        }
        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';


        });
    </script>
</body>

</html>

14.键盘获取输入框焦点

按下s键 input会获取焦点

  <input type="text">
    <script>
        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })


    </script>

15.输入框文字变大

    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>

16.倒计时效果

<!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 {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: aqua;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白

        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>	

17.验证码倒计时

<!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>
</head>

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

</html>