JavaScript变量声明与DOM操作指南
变量声明
1.变量声明有三个 var let 和 const 我们应该用那个呢？
首先var 先排除，老派写法，问题很多，可以淘汰掉…
2.let or const ?
建议： const 优先，尽量使用const，原因是：
const 语义化更好
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本const
如果你还在纠结，那么我建议：
有了变量先给const，如果发现它后面是要被修改的，再改为let
请问以下的 可不可以把let 改为 const?
请问以下的 可不可以把let 改为 const?
const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是 地址｡
一、Web API 基本认知
1.作用和分类
2.什么是DOM
3.DOM树
4.DOM对象
1. 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类:DOM (文档对象模型)､BOM(浏览器对象模型)
2. 什么是DOM
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用：开发网页内容特效和实现用户交互
3. DOM树
DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
4. DOM对象(重要)
DOM的核心思想 ：把网页内容当做对象来处理，通过 DOM，开发者可以像操作普通 JS 对象一样控制网页元素，实现动态交互。
⑴.DOM 对象
定义
- 浏览器根据 HTML 标签生成的 JS 对象，代表网页中的元素（如标签、属性、文本等）。
特性
标签属性映射
- 所有 HTML 标签的属性（如
id、class、src等）都可以在 DOM 对象上找到对应的属性。- 修改 DOM 对象的属性值，会自动同步到 HTML 标签上。
双向关联
- 对 DOM 对象的操作（如修改内容、样式）会直接反映在网页上。
⑵.document 对象
定义
- DOM 提供的核心对象，代表整个 HTML 文档。
作用
- 访问和操作网页内容
- 提供属性和方法（如
document.write()、querySelector()）来查找、修改或创建元素。- 入口点
- 网页的所有内容（包括标签、样式、脚本）都包含在
document对象中。
示例
document.write("Hello World")：直接向页面写入内容（不推荐在现代开发中使用）。document.querySelector("div")：查找页面中第一个<div>元素。
总结
- DOM 对象是网页元素的 JS 映射，
document是访问整个文档的入口。- 通过 DOM 操作，开发者可以动态改变网页结构、内容和样式，实现丰富的交互效果。
二､获取DOM对象
目标：能查找/获取DOM对象
提问：我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是利用 JS 选择页面中标签元素
学习路径：
1. 根据CSS选择器来获取DOM元素 (重点)
2. 其他获取DOM元素方法（了解）
1. 根据CSS选择器来获取DOM元素 (重点)
⑴. 选择匹配的第一个元素
语法:
参数：
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素,一个 HTMLElement对象｡
如果没有匹配到,则返回null｡
多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box {width: 200px;height: 200px;}
</style><body><div class="box">123</div><div class="box">abc</div><div class="red">ppp</div><p id="nav">导航栏</p><ul class="nav"><li>测试1</li><li>测试2</li><li>测试3</li></ul><script>// 1. 获取匹配的第一个元素const box = document.querySelector('div')const red = document.querySelector('.red')const nav = document.querySelector('#nav')// 1. 我要获取第一个小 ulliconst li = document.querySelector('ul li:first-child')console.log(box)console.log(red)console.log(nav)console.log(li)</script>
</body></html>
⑵.选择匹配的多个元素
语法:
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
例如：
注意：
得到的是一个伪数组：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box {width: 200px;height: 200px;}
</style><body><p id="nav">导航栏</p><ul class="nav"><li>测试1</li><li>测试2</li><li>测试3</li></ul><script>const nav = document.querySelector('#nav')console.log(nav)nav.style.color = 'red'// 2. 选择所有的小liconst lis = document.querySelectorAll('ul li')console.log(lis)// 1.获取元素const liss = document.querySelectorAll('.nav li')console.log(liss)for (let i = 0; i < lis.length; i++) {console.log(lis[i]) // 每一个小li对象}const p = document.querySelectorAll('#nav')console.log(p)p[0].style.color = 'red'</script>
</body></html>
2. 其他获取DOM元素方法(了解)
三､操作元素内容
目标:能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象｡
就是操作对象使用的点语法｡
如果想要修改标签元素的里面的内容,则可以使用如下几种方式:
学习路径:
1. 对象.innerText 属性
2. 对象.innerHTML 属性
1. 元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本,不解析标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box">我是文字的内容</div><script>//1.获取元素const box = document.querySelector('.box')//2.修改文字内容 对象.innerText属性console.log(box.innerText)box.innerText = '<strong>我是一个盒子</strong>' // 不解析标签</script>
</body></html>
2. 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符 举例说明
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box">我是文字的内容</div><div class="box2">你好，世界</div><script>//1.获取元素const box = document.querySelector('.box')const box2 = document.querySelector('.box2')// innerHTML 解析标签console.log(box.innerHTML)box.innerHTML = '我要更换'console.log(box2.innerHTML)box2.innerHTML = '我要更换'box.innerHTML = '<strong>我要更换</strong>'</script>
</body></html>
3.年会抽奖案例
需求:从数组随机抽取一等奖､二等奖和三等奖,显示到对应的标签里面｡
素材:
html文件结构
数组名单 '周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友'
<!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 = ['周杰伦', '刘德华', '周星驰', 'super老师', '张学友']// 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 把名字给 oneone.innerHTML = personArr[random]// 2.4 删除数组这个名字personArr.splice(random, 1)// console.log(personArr)// 3. 二等奖// 2.1 随机数 数组的下标const random2 = Math.floor(Math.random() * personArr.length)// console.log(personArr[random])// 2.2 获取one 元素 const two = document.querySelector('#two')// 2.3 把名字给 onetwo.innerHTML = personArr[random2]// 2.4 删除数组这个名字personArr.splice(random2, 1)// 4. 三等奖// 2.1 随机数 数组的下标const random3 = Math.floor(Math.random() * personArr.length)// console.log(personArr[random])// 2.2 获取one 元素 const three = document.querySelector('#three')// 2.3 把名字给 onethree.innerHTML = personArr[random3]// 2.4 删除数组这个名字personArr.splice(random3, 1)</script>
</body></html>
四、操作元素属性
• 操作元素常用属性
• 操作元素样式属性
• 操作 表单元素 属性
• 自定义属性
1.操作元素常用属性
还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href､title､src 等
语法:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="./images/1.webp" alt=""><script>// 1. 获取图片元素const img = document.querySelector('img')// 2. 修改图片对象的属性 对象.属性 = 值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>Document</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.操作元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
1. 通过 style 属性操作CSS
2. 操作类名(className) 操作CSS
3. 通过 classList 操作类控制CSS
⑴.通过 style 属性操作CSS
语法:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {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'// 多组单词的采取 小驼峰命名法box.style.backgroundColor = 'red'box.style.border = '2px solid blue'box.style.borderTop = '2px solid green'</script>
</body></html>
⑵.页面刷新,页面随机更换背景图片
需求:当我们刷新页面,页面中的背景图片随机显示不同的图片
分析：
①： 随机函数
②： css页面背景图片 background-image
③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {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>
⑶. 操作类名(className) 操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式｡
语法:
注意：
1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {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><div class="nav">123</div><script>// 1. 获取元素const div = document.querySelector('div')// 2.添加类名 class 是个关键字 我们用 classNamediv.className = 'nav box'</script>
</body></html>
⑷.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
语法:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;color: #333;}.active {color: red;background-color: pink;}</style>
</head><body><div class="box active">文字</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>
⑸.轮播图随机版
分析：
①： 准备一个数组对象，里面包含详细信息（素材包含）
②： 随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
③： 利用这个随机数字，让小圆点添加高亮的类（addClass） 利用css 结构伪类选择器
<!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"><</button><button class="next">></button></div></div></div><script>// const arr = [1, 3]// arr[0]// 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. 修改图片路径 = 对象.urlimg.src = sliderData[random].url// 3. 把p里面的文字内容更换// 3.1 获取pconst p = document.querySelector('.slider-footer p')// 3.2修改pp.innerHTML = sliderData[random].title// 4. 修改背景颜色const footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].color// 5. 小圆点const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)// 让当前这个小li 添加 active这个类li.classList.add('active')</script>
</body></html>
3. 操作表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" value="电脑"><script>//1.获取元素const uname = document.querySelector('input')//2.获取值 获取表单里面的值 用表单.valueconsole.log(uname.value)console.log(uname.innerHTML)</script></body></html>运行结果：
设置表单的值：uname.value = '我要买电脑'
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" value="电脑"><script>//1.获取元素const uname = document.querySelector('input')//2.获取值 获取表单里面的值 用表单.valueconsole.log(uname.value)console.log(uname.innerHTML)uname.value = '我要买电脑'console.log(uname.type)</script></body></html>
uname.type = 'password'
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" value="电脑"><script>//1.获取元素const uname = document.querySelector('input')//2.获取值 获取表单里面的值 用表单.valueconsole.log(uname.value)console.log(uname.innerHTML)uname.value = '我要买电脑'console.log(uname.type)uname.type = 'password'console.log(uname.type)</script></body></html>
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代 表移除了该属性
比如: disabled､checked､selected
⑴.操作input的checked属性
知识点
checked属性是布尔值（true或false），用于控制复选框或单选框的选中状态。- 赋值时：直接赋值
true或false，避免使用字符串（如'true'）。
<!DOCTYPE html>
<html><head><title>Checked属性示例</title>
</head><body><input type="checkbox" id="myCheckbox"><button onclick="toggleCheckbox()">切换选中状态</button><script>const checkbox = document.getElementById('myCheckbox');// 直接获取checked属性的值console.log(checkbox.checked); // 默认false// 设置为选中状态checkbox.checked = true;console.log(checkbox.checked); // 输出true// 切换状态函数function toggleCheckbox() {checkbox.checked = !checkbox.checked;console.log(`当前选中状态：${checkbox.checked}`);}</script>
</body></html>
⑵.操作button的disabled属性
知识点
disabled属性是布尔值，用于控制按钮是否禁用。- 赋值方式：
button.disabled = true;→ 禁用按钮button.disabled = false;→ 启用按钮
<!DOCTYPE html>
<html><head><title>Disabled属性示例</title>
</head><body><button id="myButton">点击我</button><button onclick="toggleButton()">切换按钮状态</button><script>const button = document.getElementById('myButton');// 初始状态启用button.disabled = false;// 禁用按钮button.disabled = true;console.log(button.disabled); // 输出true// 切换状态函数function toggleButton() {button.disabled = !button.disabled;console.log(`当前按钮状态：${button.disabled ? '禁用' : '启用'}`);}</script>
</body></html>
4.自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><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')console.log(one.dataset.id) // 1console.log(one.dataset.spm) // 不知道</script>
</body></html>
五、定时器-间歇函数
• 定时器函数介绍
• 定时器函数基本使用
目标：能够说出定时器函数在开发中的使用场景
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数
目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1. 开启定时器
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒
- 参数：
回调函数：要执行的函数（可以是函数名或匿名函数）。间隔时间：以毫秒为单位（如1000表示1秒）。
- 返回值：定时器的唯一标识符（
timerId），用于后续关闭。
2. clearInterval
- 作用：关闭指定的定时器。
- 语法：
clearInterval(timerId);- 参数：需要关闭的定时器的
timerId。
<!DOCTYPE html>
<html><head><title>定时器基础示例</title>
</head><body><div id="output"></div><script>// 1. 创建定时器let timer = setInterval(() => {document.getElementById('output').innerHTML += '执行了一次<br>';}, 1000);// 2. 延迟2秒后关闭定时器setTimeout(() => {clearInterval(timer);document.getElementById('output').innerHTML += '定时器已关闭';}, 2000);</script>
</body></html>
3.阅读注册协议
需求：按钮60秒之后才可以使用
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>// 1. 获取元素const btn = document.querySelector('.btn')// console.log(btn.innerHTML) butto按钮特殊用innerHTML// 2. 倒计时let i = 5// 2.1 开启定时器let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n) // 关闭定时器// 定时器停了，我就可以开按钮btn.disabled = falsebtn.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"><</button><button class="next">></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， 数组的长度就是 8if (i >= sliderData.length) {i = 0}// console.log(i)// console.log(sliderData[i])// 更换图片路径 img.src = sliderData[i].url// 把字写到 p里面p.innerHTML = sliderData[i].title// 小圆点// 先删除以前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')// 只让当前li添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)</script>
</body></html>
相关文章：
JavaScript变量声明与DOM操作指南
变量声明 1.变量声明有三个 var let 和 const 我们应该用那个呢？ 首先var 先排除，老派写法，问题很多，可以淘汰掉… 2.let or const ? 建议： const 优先，尽量使用const，原因是：…...
嵌入式硬件篇---龙芯UART通信
文章目录 前言一、代码结构解析1. 头文件部分作用 2. 宏定义与全局变量龙芯特性 3. 主函数流程关键点 4. UART发送函数龙芯实现 5. 串口配置函数（set_port）龙芯注意事项 6. GPIO控制函数龙芯GPIO特性 7. PWM控制函数龙芯PWM实现 二、龙芯UART深度解析1. …...
[K!nd4SUS 2025] Crypto
最后一个把周末的补完。这个今天问了小鸡块神终于把一个补上，完成5/6，最后一个网站也上不去不弄了。 Matrices Matrices Matrices 这个是不是叫LWE呀，名词忘了，但意思还是知道。 b a*s e 这里的e是高斯分成，用1000…...
随机变量的不同收敛性
随机变量不同收敛性：一场有趣的趋近之旅😜 一、引言 在概率论这个奇妙的世界里，随机变量就像一群调皮的小精灵🧚 它们的行为充满了不确定性。而今天我们要讲的，就是这些小精灵们的 “趋近大冒险”—— 随机变量的不同…...
JavaScript 函数类型详解：函数声明、函数表达式、箭头函数
在 JavaScript 中，函数是构建逻辑的核心单元。本文将通过 定义对比、核心特性 和 使用场景 三个维度，全面解析以下三种函数类型的区别： 函数声明（Function Declaration）函数表达式（Function Expression&am…...
工作记录 2017-02-04
工作记录 2017-02-04 序号 工作 相关人员 1 修改邮件上的问题。 更新RD服务器。 郝 更新的问题 1、DataExport的设置中去掉了ListPayors，见DataExport\bin\dataexport.xml 2、“IPA/Group Name” 改为 “Insurance Name”。 3、修改了Payment Posted的E…...
Etcd 服务搭建
💢欢迎来到张胤尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录 Etcd 服务搭建预编译的二进制文件安装下载 etcd 的…...
【C++】stack和queue的使用及模拟实现（含deque的简单介绍）
文章目录 前言一、deque的简单介绍1.引入deque的初衷2.deque的结构3.为什么选择deque作为stack和queue的底层默认容器 二、stack1.stack的介绍2.stack的使用3.stack的模拟实现 三、queue1.queue的介绍2.queue的使用3.queue的模拟实现 前言 一、deque的简单介绍（引入…...
Spring Boot - Spring Boot 静态资源映射（默认静态资源映射、自定义静态资源映射）
一、静态资源映射 在 Spring Boot 中，静态资源的映射是指将特定的 URL 路径与静态资源关联起来 静态资源有例如，HTML、CSS、JS、图片等 这使得客户端可以通过 URL 路径访问这些资源 二、默认静态资源映射 概述 Spring Boot 默认会将以下目录中的文件…...
MySQL原理：逻辑架构
目的：了解 SQL执行流程 以及 MySQL 内部架构，每个零件具体负责做什么 理解整体架构分别有什么模块每个模块具体做什么 目录 1 服务器处理客户端请求 1.1 MySQL 服务器端逻辑架构说明 2 Connectors 3 第一层：连接层 3.1 数据库连接池(Conn…...
ora-600 ktugct: corruption detected---惜分飞
接手一个oracle 21c的库恢复请求,通过Oracle数据库异常恢复检查脚本(Oracle Database Recovery Check)脚本检测之后,发现undo文件offline之后,做了resetlogs操作,导致该文件目前处于WRONG RESETLOGS状态 尝试恢复数据库ORA-16433错误 SQL> recover datafile 1; ORA-00283:…...
Houdini :《哪吒2》神话与科技碰撞的创新之旅
《哪吒2》（即《哪吒之魔童闹海》）截止至今日，荣登全球票房榜第五。根据猫眼专业版数据，截至2025年3月15日，《哪吒2》全球累计票房（含预售及海外）超过150.19亿元，超越《星球大战&…...
flink 写入es的依赖导入问题(踩坑记录)
flink 写入es的依赖导入问题(踩坑记录) ps：可能只是flink低版本才会有这个问题 1. 按照官网的导入方式： 2. 你会在运行sql-client的时候完美得到一个错误： Exception in thread "main" org.apache.flink.table.client.SqlClientEx…...
PCL 高斯函数拟合（正太分布）
文章目录 一、简介二、实现代码三、实现效果一、简介 类似于之前最小二乘法的做法，我们需要先确定目标函数： 通过最小二乘法，找到使预测值与实际数据残差平方和最小的参数： 不过由于这是一个非线性最小二乘问题，因此这里无法使用矩阵的形式之间求解它的解析解了，因此这里…...
深度革命：ResNet 如何用 “残差连接“ 颠覆深度学习
一文快速了解 ResNet创新点 在深度学习的历史长河中，2015年或许是最具突破性的一年。这一年，微软亚洲研究院的何恺明团队带着名为ResNet（残差网络）的模型横空出世，在ImageNet图像分类竞赛中以3.57%的错误率夺冠&#…...
Java基础与集合
参考 Java基础知识详解：从面向对象到异常处理-CSDN博客 2024年 Java 面试八股文（20w字）_java面试八股文-CSDN博客 基础知识 java概述 什么是java？ java是一种面向对象的编程语言 java特点 面向对象（继承&#…...
【Python 算法零基础 1.线性枚举】
我装作漠视一切，以为这样就可以不在乎 —— 25.3.17 一、线性枚举的基本概念 1.时间复杂度 线性枚举的时间复杂度为 O(nm)，其中 n是线性表的长度。m 是每次操作的量级，对于求最大值和求和来说，因为操作比较简单，所以 …...
深入理解 Linux 的 top 命令：实时监控系统性能
在 Linux 系统管理和性能优化中，top 命令是一个不可或缺的工具。它可以实时显示系统的进程信息和资源使用情况，帮助管理员快速定位性能瓶颈。本文将详细介绍 top 命令的输出内容及其使用方法，帮助你更好地掌握系统性能监控。 一、top 命令简介 top 是一个动态显示系统状态的…...
003 SpringCloud整合-LogStash安装及ELK日志收集
SpringCloud整合-LogStash安装及ELK日志收集 文章目录 SpringCloud整合-LogStash安装及ELK日志收集1.安装ElasticSearch和kibana2.Docker安装logstash1.拉取docker镜像2.创建外部挂载目录3.拷贝容器内部文件到宿主机4.修改外部挂载文件5.运行docker容器 3.整合kibana1.进入kiba…...
AI预测体彩排3新模型百十个定位预测+胆码预测+杀和尾+杀和值2025年3月18日第22弹
前面由于工作原因停更了很长时间，停更期间很多彩友一直私信我何时恢复发布每日预测，目前手头上的项目已经基本收尾，接下来恢复发布。当然，也有很多朋友一直咨询3D超级助手开发的进度，在这里统一回复下。 由于本人既精…...
数据结构入门（1）——算法复杂度
目录 一、前言 二、数据结构 2.1数据结构的概念 2.2数据结构的组成 2.3算法 三、oj题引进 四、复杂度 4.1复杂度的概念 4.2大O渐进表示法 4.3时间复杂度 4.4时间复杂度计算示例 4.4.1示例1 4.4.2示例2 4.4.3示例3 4.4.4示例4 4.4.5示例5 4.4.6示例6 4.4.7示例7 4.4.8示例8 4.5空…...
JavaScript基础-DOM 简介
在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（Document Object Model，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，…...
VS Code + Git 分支操作指南（附流程图）
VS Code + Git 分支操作指南（附流程图） 本指南将手把手教你如何在 Visual Studio Code (VS Code) 中使用 Git 进行项目开发管理，配合标准分支模型（main、develop、feature/* 等），并附上直观的流程图，适合新手快速上手！ 📌 前置准备 安装 Git安装 VS Code安装 VS Cod…...
Oracle ASM Failgroup故障组
Oracle ASM Failgroup故障组 1. 故障组的核心作用2. 故障组的配置规则3. 故障组的设计最佳实践4. 故障组的实际示例场景1：普通冗余（2个故障组）场景2：高冗余（3个故障组，跨数据中心） 关键注意事项…...
【最新版】智慧小区物业管理小程序源码+uniapp全开源
一.系统介绍 智慧小区物业管理小程序，包含小区物业缴费、房产管理、在线报修、业主活动报名、在线商城等功能。为物业量身打造的智慧小区运营管理系统，贴合物业工作场景，轻松提高物业费用收缴率，更有功能模块个性化组合，助力物业节约成本高效运营。 二.搭建环境 系统环…...
DeepSeek搭建本地知识库
1. 注册硅基流动 首先，打开浏览器，访问硅基流动的官方网站。 https://account.siliconflow.cn/ 在注册页面准确输入你的手机号，完成账号注册。这是搭建本地知识库的第一步，为后续获取重要权限做准备。 成功注册后，进…...
实验9 高级搜索技术1
实验9 高级搜索技术1 一、实验目的 （1）掌握高级搜索技术的相关理论，能根据实际情况选取合适的搜索方法； （2）进一步熟悉爬山法搜索技术，掌握其在搜索过程中的优缺点； （3&…...
【数据挖掘】Python基础环境安装配置
【数据挖掘】Python基础环境安装配置 一、摘要二、安装Python3.13.2三、安装Jupyter Notebook四、安装Numpy和Pandas以及matplotlib五、安装scikit-learn库和seaborn库 一、摘要 本文主要介绍如何在Windows上安装Python3.13.2，然后基于该Python版本安装Jupyter not…...
【2025新版本】【谷粒商城版】Kubernetes
本文作者： slience_me 文章目录 【2025】Kubernetes1. docker安装2. kubernetes安装前3. kubeadm,kubelet,kubectl3.1 简介kubeadmkubeletkubectl常用指令 3.2 安装3.3 kubeadm初始化3.4 加入从节点(工作节点)3.5 安装Pod网络插件（CNI）3.6 Ku…...
vulhub-Billu-b0x攻略
靶场下载链接 https://download.vulnhub.com/billu/Billu_b0x.zip 将kali和Billu,NAT连接 获取靶场ip arp-scan -l 使用diesearch进行目录扫描 dirsearch -u " " 查看目录中的信息 打开add.php,得到有上传文件功能的（看到后面你会发现其实这里就可以完…...