JavaScript分为ECMAScript语言规范和Web APIs两个部分。
本文将主要记录JavaScript的Web APIs的使用部分。
主要注重通过BOM与DOM的操作，完成对网页元素的控制、网页交互的控制。

本文大致可以分为以下各个部分：

Part 1: DOM-获取元素，修改属性
Part 2: DOM-事件基础（经过/点击/下拉/发布/注册/交互）【重要】
Part 3: DOM-事件对象与委托（电梯导航）
Part 4: DOM-节点操作（节点增删改查）
Part 5: BOM-操作浏览器（BOM、插件、本地存储）
Part 6: 正则表达式-综合案例（限制输入，检测合法输入）

Part1 获取DOM元素，修改属性

Day 1 思维导图

1. Web API 基础认知

1.1 API

APIs: 调用以使用JS去操作html与浏览器
分类：DOM (文档对象模型)、BOM (浏览器对象模型)

1.2 DOM、DOM树、DOM对象

DOM：操作网页内容/标签，做交互。

DOM树：将Html文档以树状结构呈现。
A015-1-1-DOM树.png

DOM对象：浏览器根据网页标签，在js中生成的JS对象。
所有的标签属性都可以在这个DOM对象上找到；且修改对象属性会自动映射到标签的呈现上。

[总结] DOM的想法是把网页标签都化成DOM对象来进行处理。
例如最大的DOM对象，document，使用 document.write() 就是一种DOM对象的使用。

2. 获取DOM对象

2.1 css选择器获取DOM对象

现在的主要获取方式：通过css选择器去获取DOM对象。
语法：

1 2	document.querySelector('css选择器') //获取第一个作为DOM对象 document.querySelectorAll('css选择器') //获取全部的作为DOM对象（伪数组形式）

一些例子：

const div = document.querySelector('div')       //第一个div标签
const box = document.querySelector('.box')      //第一个带有box类选择器的标签
const nav = document.querySelector('#nav')      //id选择器挂了nav的标签
const li = document.querySelector('ul li:first-child')      //获取ul标签下的第一个li标签
const li = document.querySelectorAll('ul li')      //获取ul标签下的所有li标签，返回的就是一个对象伪数组了。

A015-1-3-1-通过css选择器获取DOM对象.png
如图展示，我们就完成了一次通过css类选择器获取DOM对象，并进行修改(颜色)的操作。

2.2 旧版的获取方式

以前的老项目可能会用到这些获取写法，但现在已经被淘汰了。

1
2
3

document.getElementById('nav')      //通过id获取一个DOM对象
document.getElementByTagName('div')      //通过标签名获取全部的DOM对象
document.getElementByClassName('W')      //通过类名获取全部的DOM对象

3. 操作元素内容、属性

在1.3中，我们初步做到了获取DOM并进行修改的流程。
但是更多属性该如何修改呢？

3.1 修改文本内容

目标：用DOM更换显示的文本内容，做到类似内容刷新，倒计时的效果。

<body>
    <!-- 先创建一个带有class类选择器的div标签 -->
    <div class="class">这里是div标签的文本内容</div>
    <script>
        // 然后使用querySelector获取带有class类选择器的标签，并作为DOM对象，存给一个叫box的对象，并进一步处理。
        const box = document.querySelector('.class')
        //这里我们的操作是输出box对象的文本内容
        console.log(box.innerText);
        //或者可以直接进行修改，这里的修改会自动映射到原本的标签上
        box.innerText = '进行DOM修改后的div标签'            //这里面是纯文本，不解析标签
        box.innerHTML = '<b>进行DOM修改后的div标签</b>'     //这里面可以解析标签
    </script> 
</body>

这里主要涉及到了对象.innerText和对象.innerHTML两个属性，他们都可以进行获取和修改显示的文本内容，其中后者还可以解析标签。

一个抽奖小栗子

...
    <title>年会抽奖-案例</title>
    <style>
        .wrapper {
            width: 840px;
            height: 420px;
            /* background: url(./images/bg01.jpg) no-repeat center / cover; */
            padding: 100px 250px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 这个案例主要是涉及到使用DOM修改相关的页面文本信息 -->
    <div class="wrapper">
        <strong>幸运大抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h1>二等奖：<span id="two">???</span></h1>
        <h1>三等奖：<span id="three">???</span></h1>
    </div>
    <script>
        //1.声明数组
        const personArr = ['WWD','WZK','MHD','SK']

        //2.抽取1等奖
        const random = Math.floor(Math.random() * personArr.length)     //针对数组长度取随机数random
        const one = document.querySelector('#one')                      //针对id选择器捕获DOM对象one
        one.innerHTML = personArr[random]                               //把抽中的人员名字交给DOM对象one
        //删除已抽中的
        personArr.splice(random,1)

        //剩下的可以继续写，或者封装成函数调用。

        //2.抽取2等奖
        const random2 = Math.floor(Math.random() * personArr.length)     //针对数组长度取随机数random2
        const two = document.querySelector('#two')                      //针对id选择器捕获DOM对象two
        two.innerHTML = personArr[random2]                               //把抽中的人员名字交给DOM对象two
        //删除已抽中的
        personArr.splice(random2,1)

        //3.抽取3等奖
        const random3 = Math.floor(Math.random() * personArr.length)     //针对数组长度取随机数random3
        const three = document.querySelector('#three')                      //针对id选择器捕获DOM对象three
        three.innerHTML = personArr[random3]                               //把抽中的人员名字交给DOM对象three
        //删除已抽中的
        personArr.splice(random3,1)
    </script>
</body>

3.2 修改图像显示

语法：对象.属性 = 值
例如：

//1.获取DOM元素
const pic = document.querySelector('img')   //通过img标签获取
//2.操作元素
pic.src = './images/b02.jpg'    //调整src属性更换图片显示
pic.title = '我是图片名称'       //调整title属性更换图片名称

例子：图片随机刷新

<body>
    <img src="./images/01.jpg" alt="">
    <script>
        //抽取随机数函数
        function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
        }
        //获取元素
        const pic = document.querySelector('img')   //通过img标签获取
        const random = getRandom(1,10)
        pic.src = './images/${random}.jpg'    //调整src属性更换图片显示
    </script>
</body>

4. 修改元素属性/样式

除了通过对DOM对象修改文本内容与图像显示，还可以实现更多对元素样式的操作（更多css元素属性修改）
一般有3种方案，分别是：
(a) 通过style属性操作元素样式属性
(b) 通过类名去操作元素样式属性
(c) 通过classlist去操作元素样式属性
此外，还可以实现对表单属性的控制、自定义属性的控制等。

4.1 通过style属性操作元素样式属性

语法：

对象.style.样式属性 = '值'
//例如：
const 对象 = document.querySelector('选择器捕获DOM对象')
对象.style.width = '300px'
对象.style.height = '300px'
对象.style.backgroundColor = 'pink'
对象.style.border = '2px solid black'
对象.style.borderTop = '2px solid red'

例子：图片随机刷新，但是使用style属性操作url来做

    <style>
        /* 直接给body标签来一个大图铺满 */
        body {
            background: url(./images/cover01.jpg) no-repeat top center/cover;
        }
    </style>
</head>
<body>
    <script>
    //抽取随机数函数
    function getRandom(N, M) {
    return Math.floor(Math.random() * (M - N + 1)) + N
    }
    const random = getRandom(1, 10)
    document.body.style.backgroundImage = 'url(./images/cover0${random}.jpg)'
    </script>
</body>

4.2 通过类名去操作元素样式属性

通过style一条条改有些繁琐，能不能批量改？可以用更换类名去操作。

语法：

1	对象.className = '一个类名'

例子：

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div')   //获取DOM对象
        div.className = 'box'                       //直接快速更换类名，支持多个
    </script>
</body>

4.3 通过classlist去操作元素样式属性

使用类名替换会覆盖原先的设置，有没有更好的做法？用classlist

语法：

1
2
3

元素.classlist.add('类名')      //追加类名，不会覆盖原先的
元素.classlist.remove('类名')   //删除类名
元素.classlist.toggle('类名')   //切换类名

4.4 案例：随机播放轮播图（Skip）

https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=86

4.5 操作表单属性

操作表单：文本框、按钮、选项表
应用案例：密码的显示/隐藏；列表的选项选中/与否；按钮的禁用/与否
语法：

表单对象.value='表单值'
表单对象.type='表单类型'
表单对象.checked=true/false
表单对象.disabled=true/false

具体代码：

<body>
    <!-- 新建 表单框、复选框、按钮 -->
    <input type="text" value="请输入用户名">
    <input type="checkbox" name="复选框" id="checkbox">
    <button>点击按钮</button>

    <script>
        //1. 获取表单元素
        const unname = document.querySelector('input')
        //2. 使用`对象.value`获取/更改表单框内的值
        console.log(unname.value);
        unname.value='当然，也可以赋值改变'
        //3. 表单的属性还有type，可以设置输入可见与否
        unname.type='password'

        //4. 获取复选框表单元素
        const ipt = document.querySelector('#checkbox') //能否捕获？
        //5. 查看/更改复选框的选中状态
        ipt.checked = true

        //6. 捕获按钮表单元素
        const button = document.querySelector('button')
        //7. 使用`对象.disabled`可以设置按钮可否被按下
        button.disabled = true

    </script>
</body>

4.6 H5自定义属性

对一个元素，自定义一个属性，并进行控制操作。
一般自定义的属性都是以“data-”开头。
例子：

<body>
    <div data-id="1" data-spm="不知道">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const one =document.querySelector('div')    //捕获第一个div
        console.log(one.dataset);                   //查看所有的屬性
        console.log(one.dataset.id);                //查看data-id的屬性
        console.log(one.dataset.spm);               //查看data-spm的屬性
    </script>
</body>

5. 定时器-间歇函数

每隔一段時間，自動地去執行一段代碼。定时器函数有2种。
应用场景：阅读协议按钮，时间到了再取消禁用；浮窗通道，显示倒计时。

5.1 开启定时器

1	setInterval(函数, 间隔时间ms)

例子：

setInterval(function(){
    console.log('一秒一次')
}, 1000)
//或者
function fn(){
    console.log('一秒一次')
}
setInterval(fn, 1000)

需要注意的是，第一次函数调用发生在指定毫秒数后。

5.2 关闭定时器

1 2	let 变量名 = setInterval(函数, 间隔时间) clearInterval(变量名)

5.3 一些定时案例

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册！
        【请您注意】如不同意，请停止注册。
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读并同意该用户协议(5)</button>
    <script>
        const btn = document.querySelector('.btn')
        let i = 5
        let n = setInterval (function (){
            i--
            btn.innerHTML = `我已经阅读并同意该用户协议(${i})`
            if(i===0) {
                clearInterval(n)
                btn.disabled = false
                btn.innerHTML = '同意'
            }
        },1000)
    </script>
</body>

6. 综合案例-轮播图定时刷新【重要】

需求：每隔一秒钟切换一张图片

准备一个数组，包含详细信息和素材
获取元素
设置定时器（更改图片、文字信息、激活小圆点）

自动循环播放（变量置0）
代码：

  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    // 1. 获取元素 
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0  // 信号量 控制图片的张数
    // 2. 开启定时器
    // console.log(sliderData[i])  拿到对应的对象啦
    setInterval(function () {
      i++
      // 无缝衔接位置  一共八张图片，到了最后一张就是 8， 数组的长度就是 8
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(i)
      // console.log(sliderData[i])
      // 更换图片路径  
      img.src = sliderData[i].url
      // 把字写到 p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)

  </script>
</body>

Part2 DOM-事件与监听

7. “事件”与”监听”

事件是系统内发生的事情/一个动作。比如：鼠标单点、双击、经过、悬停；键盘按下、长按等。
监听是检测是否有事件发生，检测到后调用函数做出响应。也被称为“绑定事件”、“注册事件”。比如：点击播放轮播图、经过显示下拉菜单等。
语法：

1 2	DOM元素对象/事件源.on事件=function(){} //老版本 DOM元素对象/事件源.addEventListener('事件类型', 要执行的函数/回调函数) //新版本

其中，事件监听需要三要素：什么DOM对象被事件触发了（事件源），以何种形式触发（事件类型），要执行什么函数。
老版本的on方式会被覆盖，而addEventListener方式可以绑定多次，有更多事件特性。

7.1 事件监听的一些小案例

例1：按下按钮，弹出弹窗

1 2	const btn = document.querySelector('button') //获取按钮DOM元素 btn.addEventListener('click', function(){alert('点击了')}) //事件监听并输出

这里的事件监听描述了：按钮是DOM对象，它通过click(单击)触发，触发后会执行一个弹窗的匿名函数。

例2：按下X号，关闭广告

1
2
3

const closerX = document.querySelector('.closer')                       //获取X号按钮(本质是个盒子，类名closer)
const Adv = document.querySelector('.Adv')                              //获取广告本体
closerX.addEventListener('click', function(){Adv.style.display='none'}) //监听X,若按下则切换广告css的display为none，表现为隐藏

例3：随机抽选案例
业务分析：
1.点击开始按钮，随机抽选数组之一并显示。
2.点击结束按钮，删除数组中的当前显示的数据。
3.当箱子全部抽空，禁用两个按钮。
分析：需要用到随机、定时器、禁用等。

点击展开代码

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        // 定时器的全局变量
        let timerId = 0
        // 随机号要全局变量
        let random = 0
        // 业务1.开始按钮模块
        const qs = document.querySelector('.qs')
        // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
        // 1.2 添加点击事件
        start.addEventListener('click', function () {
            timerId = setInterval(function () {
                // 随机数
                random = parseInt(Math.random() * arr.length)
                // console.log(arr[random])
                qs.innerHTML = arr[random]
            }, 35)
            // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
            if (arr.length === 1) {
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })

        // 2. 关闭按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            clearInterval(timerId)
            // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
            console.log(arr)
        })
    </script>

7.2 事件类型

其中有关焦点的focus和blur事件，这里有一个常见的搜索框展开的案例：

焦点事件案例-搜索框展开

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {

            list-style: none;
        }

        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }

        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }

        .mi .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
        // console.log(input)
        // 2. 监听事件 获得焦点
        input.addEventListener('focus', function () {
            // ul显示
            ul.style.display = 'block'
            // 添加一个带有颜色边框的类名
            input.classList.add('search')
        })
        // 3. 监听事件 失去焦点
        input.addEventListener('blur', function () {
            ul.style.display = 'none'
            input.classList.remove('search')
        })
    </script>
</body>

7.3 事件对象

事件对象，是指含有事件触发的相关信息的对象，一般为回调函数的第一个参数。
例如：鼠标点击事件中，事件对象会包含鼠标点击位置等信息。
应用场景：判断按下键值，按到回车键时发布新闻；判断点击要素，以触发函数。

7.3.1 事件对象的获取

例如：

1	DOM元素对象/事件源.addEventListener('事件类型', fuction(e){})

这句监听事件中，回调函数中的e就是事件对象。

7.3.2 事件对象的常见属性

这里有一个利用了事件对象，检测到回车就发布评论的小案例：

事件对象的应用-回车键发布评论

  <title>评论回车发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      /* 发布按钮，蓝色圆角 */
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      /* 评论栏，底栏虚灰线 */
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>

  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>

  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">Niord</p>
        <p class="text">预定文本</p>
        <p class="time">预定时间</p>
      </div>
    </div>
  </div>

  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length)  得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
        // 只有按下的是回车键，才会触发
      if (e.key === 'Enter') {
        // 如果用户输入的不为空就显示和打印
        if (tx.value.trim()) {
          item.style.display = 'block'
        // 用户输入的内容，传给text
          text.innerHTML = tx.value
        }
        // 按下回车，传完，清空文本域
        tx.value = ''
        // 按下回车后，要把 字符统计 复原
        total.innerHTML = '0/200字'
        // 按下回车后，刷新并显示系统时间
        time()
      }
    })

    // 5. 系统时间获取函数(每次调用就会经历一次刷新)
    function time(){
    let revtime = new Date()              //读取系统时间存为对象（刷新）
    let revyear = revtime.getFullYear()   //读年
    let revmonth = revtime.getMonth()+1   //读月
    revmonth = (revmonth < 10 ? '0' : '') + revmonth   //月份补零，下同
    let revday = revtime.getDate()
    revday = (revday < 10 ? '0' : '') + revday
    let revhour = revtime.getHours()
    revhour = (revhour < 10 ? '0' : '') + revhour
    let revminutes = revtime.getMinutes()
    revminutes = (revminutes < 10 ? '0' : '') + revminutes
    let revseconds = revtime.getSeconds()
    revseconds = (revseconds < 10 ? '0' : '') + revseconds
    //捕获带有time类名的元素体，文本输出时间
    document.querySelector('.time').innerHTML = revyear + '-' + revmonth + '-' + revday + ' ' + revhour + ':' + revminutes + ':' + revseconds
    }
  </script>
</body>