WEB APIs day1

最新推荐文章于 2024-10-16 11:23:07 发布

澈如冬雪^

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量100

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_52372037/article/details/129991084

版权

本文介绍了WebAPI的基本认知，包括变量的声明与使用，DOM对象的选择与操作，如修改元素内容、属性和样式。此外，还详细阐述了DOM树的概念，以及如何通过JavaScript操作DOM元素，如修改文字内容、图片路径、背景颜色等。文章还涉及到了定时器的使用，展示了如何实现倒计时和轮播图效果。

摘要由CSDN通过智能技术生成

一、Web API基本认知

<!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>复习</title>
</head>

<body>
  <script>
    // let obj = {name: 'andy'}
    // let obj = new Object()
    // let obj = {}
    // let num = 10
    // num.age = 20
    // console.log(num)
    // let obj.name = 'andy'
    let arr = ['red', 'green']
    // 1.删除 数组.splice(起始位置, 删除个数)
    // arr.splice(1, 1)
    // console.log(arr)  // splice 修改原来数组
    // 2. 添加  数组.splice(起始位置, 删除个数, 添加的元素)
    // 把 pink 放到 red 和 green中间   
    // 起始位置 要放到的索引号位置
    // arr.splice(1, 0, 'pink')
    arr.splice(1, 0, 'pink', 'hotpink')
    console.log(arr)
  </script>
</body>

</html>

在这里插入图片描述

（1）声明变量-const优先

变量值是基本数据类型的如果变化就不可以用const,变量值是复杂数据类型（数组，对象）的如果变化就可以用const声明变量。比如说数组，栈里面存的是地址，堆里面存的是变量值，当变量值变的时候，地址和这个数组整体没变，只是数组里面的元素变化了。对象发生变化的时候就会报错，因为它的地址发生了变化，而且重新开辟了一个新的数组。只要地址不变就不会报错，数组如此对象也同理。
在这里插入图片描述

<!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>let or const</title>
</head>

<body>
    <script>
        const arr = ['red', 'pink']
        // 追加数组元素的时候是没错的
        // arr.push('blue')
        // console.log(arr);
        // 对象发生变化的时候就会报错,因为它的地址发生了变化，而且重新开辟了一个新的数组。数组如此对象也同理
        arr = [1, 4, 6]
        // 只要地址不变就不会报错
        console.log(arr);   //报错
    </script>
</body>

</html>

在这里插入图片描述

（2）作用和分类

在这里插入图片描述

（3）什么是DOM

在这里插入图片描述

（4）DOM树

在这里插入图片描述

（5）DOM对象

<!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>DOM对象</title>
</head>

<body>
    <!-- html里面叫标签 -->
    <div>123</div>
    <script>
        const div = document.querySelector('div')
        // dir是专门打印对象的  对象由属性和方法组成
        console.dir(div)     //JS里面叫DOM对象
    </script>
</body>

</html>

虽然在html里面是标签，但是通过js拿过来，在DOM树里面都是都是对象
在这里插入图片描述

二、获取DOM对象

在这里插入图片描述

<!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>获取DOM对象</title>
    <style>
        /* js可以通过标签选择器来获取 */
        .box {
            /* w200+h200 */
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box">123</div>
    <div class="box">abc</div>
    <!-- p#nav -->
    <p id="nav">导航栏</p>
    <ul>
        <li>喵嘞个咪</li>
        <li>测试</li>
        <li>测试</li>
    </ul>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系方式</li>
    </ul>
    <script>
        // 1.获取匹配的第一个元素
        // 里面的选择器都要加引号，因为不加引号会当变量来看，没有这个变量
        // const box = document.querySelector('div')
        // .类名也可以
        // const box = document.querySelector('.box')
        // console.log(box);
        // id选择器
        const nav = document.querySelector('#nav')
        // console.log(nav);
        // 获取一个DOM元素我们能直接操作修改
        // 对象.属性
        nav.style.color = 'red'
        // 1. 我要获取ul里面的第一个小li
        // const li = document.querySelector('ul li:nth-child(1)')
        /*   const li = document.querySelector('ul li:first-child')
          console.log(li); */
        // 2. 选择所有的小li
        const lis = document.querySelectorAll('ul li')
        console.log(lis);
        // 获取多个DOM元素我们不能直接修改，因为是数组，只能通过遍历

        // 练习   
        // 请控制台依次输出3个li的DOM对象
        // 请先把nav选出来，再把3个小li选出来
        /* const ulnav = document.querySelector('ul.nav')
        console.log(ulnav);
        const liss = document.querySelectorAll('ul.nav li')
        console.log(liss); */

        // 1. 获取元素
        const lisss = document.querySelectorAll('.nav li')
        // console.log(lisss);
        // 遍历对象
        for (let i = 0; i < lisss.length; i++) {
            console.log(lisss[i]);   //每一个小li对象
        }

        // 只有一个元素也是伪数组的形式，没有办法直接给它改样式，需要for循环的方式遍历
        const p = document.querySelectorAll('#nav')
        // console.log(p);
        // 当然，只有一个元素也可以不用for循环，直接选取数组的第一个元素
        p[0].style.color = 'red'
    </script>
</body>

</html>

在这里插入图片描述

三、操作元素内容

在这里插入图片描述

<!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>修改对象内容</title>
</head>

<body>
    <div class="box">我是文字的内容</div>
    <script>
        /*  const obj = {
             name: 'pink老师'
         }
         console.log(obj.name);   //获取文字内容
         obj.name = 'red老师'    //修改文字内容 */
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 修改文字内容  对象.innerText 属性
        // box是对象
        // console.log(box.innerText);   //获取文字内容
        // box.innerText = '我是一个盒子'  //修改文字内容
        // 发现没有变化，因为innerText只显示纯文本，不解析标签
        // box.innerText = '<strong>我是一个盒子</strong>'    //修改文字内容

        // 3. innerHTML 它能解析标签
        console.log(box.innerHTML);
        // box.innerHTML = '我要更换'
        box.innerHTML = '<strong>我要更换</strong>'
    </script>
</body>

</html>

在这里插入图片描述

<!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>年会抽奖</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>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
    // 1. 声明数组
    const personArr = ['周杰伦', '林俊杰', '等什么君', '周星驰', '刘德华']
    // 2. 先做一等奖
    // 2.1 随机数 即数组的下标
    const random = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random]);
    // 2.2 获取one元素
    const one = document.querySelector('#one')
    // 2.3 把名字给 one
    one.innerHTML = personArr[random]
    // 2.4 删除这个名字
    personArr.splice(random, 1)
    // console.log(personArr);


    // 3. 二等奖
    // 3.1 随机数 即数组的下标
    const random2 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random]);
    // 3.2 获取two元素
    const two = document.querySelector('#two')
    // 3.3 把名字给 two
    two.innerHTML = personArr[random2]
    // 3.4 删除这个名字
    personArr.splice(random2, 1)


    // 4. 二等奖
    // 4.1 随机数 即数组的下标
    const random3 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random]);
    // 4.2 获取three元素
    const three = document.querySelector('#three')
    // 4.3 把名字给 three
    three.innerHTML = personArr[random3]
    // 4.4 删除这个名字
    personArr.splice(random3, 1)
  </script>
</body>

</html>

四、操作元素属性

在这里插入图片描述

（1）操作元素常用属性

在这里插入图片描述

<!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>修改元素常见的属性</title>
</head>

<body>
    <img src="./images/1.webp" alt="">
    <script>
        // 1. 获取图片元素
        // 只有一个图片，所以写img就可以了
        const img = document.querySelector('img')
        // 2. 修改图片对象的属性   img对象  src属性   对象.属性 = 值
        // 可以通过js的形式去修改这些常见的属性
        img.src = './images/2.webp'
        img.title = '刘德华'   //我的电脑没生效
    </script>
</body>

</html>

在这里插入图片描述

<!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>随机显示图片</title>
</head>

<body>
    <img src="./images/1.webp" alt="">
    <script>
        // 取到 N ~ M 的随机整数
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        // 1. 获取图片对象
        const img = document.querySelector('img')
        // 2. 随机得到序号
        const random = getRandom(1, 6)
        // 3. 更换路径
        img.src = `./images/${random}.webp`
    </script>
</body>

</html>

（2）操作元素样式属性

在这里插入图片描述

<!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>通过style属性修改样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 修改样式属性  对象.style.样式属性 = '值'  别忘了跟单位 有了单位就是字符串，要加引号
        box.style.width = '300px'
        // 多组单词的采取小驼峰命名法  backgroundColor
        box.style.backgroundColor = 'hotpink'
        box.style.border = '2px solid blue'
        box.style.borderTop = '2px solid red'
    </script>
</body>

</html>

在这里插入图片描述

<!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>随机更换背景图片</title>
    <style>
        body {
            /* cover 起拉满的作用 */
            background: url(./images/desktop_1.jpg) no-repeat top center/cover;
        }
    </style>
</head>

<body>
    <script>
        // console.log(document.body)
        // 取到 N ~ M 的随机整数
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        // 随机数
        const random = getRandom(1, 10)
        document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
    </script>
</body>

</html>

在这里插入图片描述

<!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>通过类名修改样式</title>
    <style>
        div {
            /* w200+h200+bgc */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 不会变成红色，因为被覆盖掉了 */
        .nav {
            color: red;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- className使用的是新值换旧值 后面的className的类名会把这里的覆盖掉 -->
    <div class="nav">123</div>
    <script>
        // 1. 获取元素
        const div = document.querySelector('div')
        // 2. 添加类名  class是个关键字 我们用className 虽然我们用的className来表示属性，但是在解析的时候是当做class来解析的
        // 不用加.因为前面说了是className;这里面也不能写#,因为是写类名
        // div.className = 'box'
        // 既想要nav文字颜色的变化又想要box就要保留原先的类名，如果原先没有类名就不用管
        div.className = 'nav box'
    </script>
</body>

</html>

在这里插入图片描述

<!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>通过classList修改样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            color: #333;
        }

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

<body>
    <div class="box">文字</div>
    <script>
        // 通过classList添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 修改样式
        // 2.1 追加类 add()  类名不加点，并且是字符串
        box.classList.add('active')
        // 2.2 删除类  remove() 类名不加点，并且是字符串
        box.classList.remove('box')
        // 2.3 切换类 toggle() 原先有这个类就删掉，没有就加上
        box.classList.toggle('active')    //对象.属性.方法
    </script>
</body>

</html>

在这里插入图片描述
行内样式表的权重要高于内部样式表，除非后面加!important

<!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>轮播图点击切换</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></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 random = parseInt(Math.random() * sliderData.length)
    // console.log(sliderData[random]);
    // 2. 把对应的数据渲染到标签里面
    // 2.1 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 2.2 修改图片路径
    // 对象.属性  对象是数组里面的元素  slider[Random]  而不是数组sliderData
    // const arr = [1, 2, 3]
    // arr[0]
    img.src = sliderData[random].url
    // 3. 把p里面的文字内容更换
    // 3.1 获取p
    const p = document.querySelector('.slider-footer p')
    // 3.2 修改p
    p.innerHTML = sliderData[random].title
    // 4. 修改背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    // 5. 小圆点
    const circle = document.querySelector(`.slider-indicator li:nth-child(${random + 1}`)
    // 让当前这个小li 添加active这个类
    circle.classList.add('active')
  </script>
</body>

</html>

（3）操作表单元素属性

在这里插入图片描述
innnerHTML只能获取普通元素的内容，不能获取表单的内容，表单是通过表单.value获取的

<!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>修改表单属性</title>
</head>

<body>
    <!-- <input type="text" value="电脑"> -->
    <!-- 完整写法checked="checked" 属性和值相同 我们写一个简写就行了 -->
    <!-- <input type="checkbox" name="" id="" checked> //true -->
    <input type="checkbox" name="" id="">
    <!-- 完整写法disabled="disabled" H5新规范：如果属性和值相等那么可以简写为一个    disabled -->
    <!-- <button disabled>点击</button> -->
    <button>点击</button>
    <script>
        // 1. 获取元素
        // const uname = document.querySelector('input')
        // 2. 获取值  获取表单里面的值 用的 表单.value
        // console.log(uname.value)  //电脑
        // innnerHTML只能获取普通元素的内容，不能获取表单的内容，表单是通过 表单.value获取的
        // console.log(uname.innerHTML)
        // 3. 设置（修改）表单的值
        // uname.value = '我的电脑'
        // console.log(uname.type);
        // 要设置（修改）type的值，与value类似
        // uname.type = 'password'

        // 1. 获取
        const ipt = document.querySelector('input')
        console.log(ipt.checked);  //默认是false
        // ipt.checked = true
        // 加一个 ''能被勾选上  因为字符串只有一种情况是false（空字符串）, 其它情况全是true
        //它只能接受布尔值，给它一个不认识的，它会有一个隐式转换
        ipt.checked = 'true'  // 会选中，但是不提倡


        // 1. 获取
        const button = document.querySelector('button')
        // disabled的意思是禁用吗？
        console.log(button.disabled);  //默认false  不禁用
        button.disabled = true    //禁用
    </script>
</body>

</html>

（4）自定义属性

我们前面讲的这些属性都是元素自带的，但是发现不够用，所以我们可以自定义一些属性
在这里插入图片描述

<!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>自定义属性</title>
</head>

<body>
    <!-- div{$}*5 -->
    <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')
        // data是自定义属性，set是集合，它会把所有在这个标签上面的data自定义属性全部都集合在一起
        console.log(one.dataset);   //dataset对象
        console.log(one.dataset.id);  //只想得到里面的1
        console.log(one.dataset.spm);  //只想得到里面的不知道
    </script>
</body>

</html>

五、定时器-间歇函数

在这里插入图片描述

（1）定时器函数介绍

在这里插入图片描述

（2）定时器函数基本使用

在这里插入图片描述

<!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>定时器-间歇函数</title>
</head>

<body>
    <script>
        //   setInterval( 函数， 间隔时间) 
        //  没有名字，这个是匿名函数 
        /*  setInterval(function () {
             console.log('一秒执行一次');
         }, 1000) */


        function fn() {
            console.log('一秒执行一次');
        }
        // setInterval(函数名， 间隔时间)    有函数名的不要加小括号
        // 函数名()是函数调用的意思，它这里相当于自动调用了
        // setInterval(fn, 1000)
        // 也有加括号的写法，但是这种写法非常少见,我们最好用前面两种写法  （要加''）
        // setInterval('fn()', 1000)
        /*  let n = setInterval(fn, 1000)
         console.log(n);
         // 关闭定时器
         clearInterval(n) */

        /* let m = setInterval(function () {
            console.log(33);
        }, 2000)
        console.log(m); */

        // 虽然赋值了相同的内容，但是还是重新赋值了，所以不能用const
        /* const num = 10
        num = 10
        console.log(num); */


        let i = 1
        setInterval(function () {
            i++
            // document.write(i)  //不会自动换行
            document.write(`${i} `)   //模板字符串加一个空格就可以自动换行了，不加空格还是不会换行
            // document.write(i, '<br>')   //一行输入一个数字 
        }, 200)
    </script>
</body>

</html>

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册倒计时效果</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <!-- 刚开始是禁用效果 -->
    <button class="btn" disabled>我已经阅读用户协议(60)</button>
    <script>
        // 1. 获取元素
        const btn = document.querySelector('.btn')
        // 虽然前面我们说表单用value获取，但是button比较特殊，用innnerHTML,因为它是个双标签，我们前面学的input那些是单标签
        // console.log(btn.innerHTML);
        // 2. 倒计时
        let i = 5
        // 2.1 开启定时器
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i == 0) {
                clearInterval(n)  //关闭定时器
                // 定时器停了，就可以开按钮
                btn.disabled = false   //禁用吗？不禁用
                // 定时器停了，按钮也开了，改个同意就行了
                btn.innerHTML = '同意'
            }
        }, 1000)
    </script>
</body>

</html>

六、综合案例

<!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>轮播图定时版</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.开启定时器
    // sliderData数组  我们要拿到对象  sliderData[i]
    // console.log(sliderData[i]);     //拿到对应的对象啦
    setInterval(function () {
      i++
      // console.log(i);  //这样出来的数字是1~8
      // 图片无缝衔接位置
      // 这个if只能放在这个位置，因为要先判断是否超过了最后一张，再将i置零，从第一张从头开始
      if (i >= sliderData.length) {
        i = 0
      }
      console.log(i);  //这样出来的数字是0~7
      // console.log(sliderData[i]);  //能拿到对应的对象
      // 如果实在不理解，可以多写一步帮助理解
      // const obj = sliderData[i]    //能理解就不用多此一举了
      // 更换图片路径
      // 第一个图片已经有了，所以我们得从第二个图片开始更换
      img.src = sliderData[i].url
      // 把字写到p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // (1) 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 我们不要所有的小圆点，我们要的是一个小圆点   索引号是0-7，但是我们小圆点是1-8
      // 第一个小圆点已经选中了，所以我们从第二个小圆点开始
      // document.querySelector('.slider-indicator li:nth-child(2)')
      // 选择第2/...个小li添加active属性
      // (2) 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
  </script>
</body>

</html>