目录
JavaScript基础
1.关系
2.JavaScript的引入方式
3.注释和结束符
4.输入和输出语法
5.变量
6.数组（Array）
7.常量
8.数据类型
9.运算符
10.模板字符串
11.类型转换
12.运算符
13.语句和运算符
13.continue和break
14.数组操作-新增和删除
15.函数
16.逻辑中断
17.对象
18.数据的存储
Web API阶段
19.DOM
19.1.获取DOM元素
19.2.操作元素的内容
19.3.操作元素的属性
19.4.表单相关属性
19.5.自定义属性
19.6.计时器
19.7.事件监听
19.8.常用事件
19.9.事件对象
19.10.环境对象
19.11.回调函数
19.12.事件捕获和事件冒泡
19.13 .事件委托
19.14.阻止默认行为
19.15. 页面加载事件load和DomContentLoaded
19.16.滚动事件scroll
19.17.client家族和offset家族
19.18.日期对象
19.19.时间戳
19.20.DOM节点操作
综合案例
广告实例
点名实例
小米搜索框实例
B站评论区实例
复选框全选/取消全选实例
京东动态购物栏实例
京东动态购物栏实例（优化后）
滚动事件案例-侧边栏的显示和隐藏
offset实例-仿京东头部导航条的显示隐藏
offset实例-bilibili导航条动画效果
时间戳-倒计时案例
JavaScript基础
1.关系
HTML控制着网页的结构，CSS控制着网页的外观，JaavaScript控制着网页的行为，如果将小人比作网页上他们的关系，他们之间的关系就像：
2.JavaScript的引入方式
- 内部样式
在的上方书写（网页的加载是从上至下的）：Document console.log("控制台的输出") //在控制台输出 alert("hello,js~") //弹出对话框 - 外部样式
外部文件引入，当项目比较大时，可以实现结构、样式与行为的分离：
- 行内样式
记载行内书写Js代码，例如：
3.注释和结束符
- 注释分为单行注释和多行注释：
- 单行注释：//（ctrl + /）
- 多行注释：/**/（shift + alt + a）
- 结束符：在JavaScript中，以分号作为语句的结束符。由于浏览器可以自动判定语句的结束为止，因此分号可写可不写。具体按照团队开发要求进行。
4.输入和输出语法
三种输出语法：
- document.write(‘ ‘) -向body标签内输出，可以解析标签
- alert(‘ ‘) -网页打开时弹出对话框输出
- console.log(‘ ‘) -控制台日志输出，供程序员调试使用
输入语法：
- prompt(‘ ‘) -弹出对话框请求用户输入
5.变量
变量的定义：
let 变量名 = 值使用let还是使用var定义变量？
let的出现解决了var的一些问题（现任永远比前任优秀！）。let可以使未赋值仅声明的变量报错误；let可以使重复声明的变量报错；
变量的本质以及命名规则：
- 变量的本质是在内存中申请的一块用来存放数据的小空间。
- 命名规则：
不使用关键字；只能由下划线、字母、数字构成且数字不能开头；起名要有意义；遵循小驼峰命名法，类似Java规范。
6.数组（Array）
数组的声明：
let arr = [e1,e2,e3,...]数组的使用：
- 通过索引（从0开始）下标输出数组的元素
- 数组中可以存储任意类型的数据元素,以下这种定义方式就是正确的：
let arr = ['hello', 0, false]
7.常量
常量的声明：
const PI = 3.148.数据类型
JavaScript中的基本数据类型包含：
- 数字类型(Number)：包含整数、小数、整数、负数
NAN：计算结果错误 - 字符串类型（String）：使用单引号，双引号，反引号(` `)包裹的数据，引号的使用基本没有区别，一般使用单引号
- 布尔类型（Boolean）
- Undefined（未定义型）:声明了变量但未赋值
- null（空类型）
引用数据类型有：object（对象类型）
null和undefined的区别：
null表示赋值了，但是内容为空；undefined表示没有赋值。通常null常做为尚未创建的对象使用，像将来某个变量中存放的是一个对象，但是该对象还么有创建好，可以先给这个变量赋值为null
检测数据类型：typeof 变量名
let age = 18 let name = '小白的白白' let isCool = false console.log(typeof age) console.log(typeof name) console.log(typeof isCool)
9.运算符
除法运算符：
与Java语言不通，JavaScript的除法包含小数位。
加号运算符：
数值相加，字符串相连(拼接字符串)
10.模板字符串
- 字符串用` `包裹
- 在字符串内容中拼接变量时，用 ${ } 包裹变量
例如：let age = 20 document.write(`我今年${age}岁了`) //这种写法相当于：document.write('我今年' + age + '岁了')
11.类型转换
JavaScript中的类型转换分为显示类型转换和隐式类型转换：
显示类型转换：
将字符串转换为数字：Number(string)；parseInt(str)；（只保留整数）；parseFloat(str)；（保留小数）。其中paeseInt和parseFloat遇到非数字就停止转换
console.log(Number('456.33')); //456.33console.log(parseInt('345.55')) //345console.log(parseFloat('345.55')) //345.55console.log(parseInt('33.5px')) //33console.log(parseFloat('33.5px')) //33.5隐式类型转换：
使用‘+’可以将字符串转换为数字：
console.log(typeof (+'1223')) //number此外，-，*，/ 在进行运算时，会先将字符串转换为数字再进行运算：
console.log(2 - '2') //0console.log(2 * '2') //4console.log(14 / '3') //4.66666666...12.运算符
其他常见的常用的运算符就不说了，在JavaScript中常用的有：
- 自增/自减运算符，并且在开发中通常都是使用后置自增自减，并且时单独使用的
- 区分比较运算符’==‘和‘===’：‘==’比较的是左右两边的值是否相等，‘===’比较的是左右两边的类型和值是否都相等，在实际开发中常用‘===’。例如：
console.log(3 === '3') //falseconsole.log(3 == '3') //trueconsole.log(NaN === NaN)//false
13.语句和运算符
语句：
- 单/多分支语句(if..else if..else..、switch..case..default)
- 循环语句(while,for)
运算符：
常见的运算符就不说了，以下为三目运算符的使用：
3 > 5 " />使用return可以返回函数执行的结果，return的结果不能换行写；return语句之后的语句不会在被执行 函数的定义：
function(e1,e2,e3...) { ...}
- 匿名函数：
定义：let fn = function(e1,e2...) {} //函数表达式//调用fn(e1,e2...)
- 立即执行函数（引入JavaScript文件时会自动执行）
定义：//实参：sc，形参:xc①(function(xc1,xc2...) {} (sc1,sc2...));②(function(xc1,xc2...){})(sc1,sc2...);
立即执行函数在使用时需要在语句块末尾加上分号！
函数的使用案例：
- 输入秒数，转换为时分秒：
function calc(second) { let hours = parseInt(second / 3600) let min = parseInt((second % 3600) / 60) let sec = second % 60 //在不大于10的位数上补零 hours = hours >= 10 ? hours : '0' + hours; min = min >= 10 ? min : '0' + min; sec = sec >= 10 ? sec : '0' + sec; return `${second}秒转换为时分秒的结果为： ${hours}时 ${min}分 ${sec}秒` } let second = +prompt('请输入秒数：') document.write(calc(second))
16.逻辑中断
逻辑终端常用于函数形参的默认赋值，例如：
function(a,b) { a = a || 0 b = b || 0 ...}
逻辑与&&进行运算时，如果左表达式的值为true，就不再执行右表达式。同理，逻辑或 || 在左表达式的值为false时，就不再进行右表达式的判定。
' '，0，undefined，null，false，NaN转换为布尔值后都是false，其余都为true
17.对象
对象的定义：
let obj = { 属性：值, 属性：值， 方法名：function() {}, ...（最后一个属性/方法 结束不用加分号）}
对象的增删改查：
//查①：对象名.属性//查②：⭐⭐//改：对象名.['属性名'] //必须带引号对象名.属性 = 值//增：对象名.新属性名 = 值//删：delete 对象名.属性
对象的遍历：
let dogs = { 'dog-name': 'chick', age: 4, cry:function() {console.log('汪汪~')}}for(let key in dogs) { console.log(dogs[key])}
- 对象遍历的注意事项：
对象遍历的fori n循环中取出的key值为字符串，因此不能通过dogs.key访问，会报undefined错误。应当通过dogs[key]的方式访问对象属性的值。
18.数据的存储
基本数据类型：在变量中存储的是值本身，因此也叫做数值类型。基本数据类型变量的值存放在内存的栈空间上
引用数据类型：在变量中保存的是对象的地址或者说是引用。对象及其属性保存在内存的堆空间上。
Web API阶段
19.DOM
19.1.获取DOM元素
- document.querySelector(' CSS选择器 ' )
获取该页面中该选择器对应的第一个元素。 - docuemnt.querySelectorAll('CSS选择器')
获取该页面中该选择器对应的所有元素，返回的是一个伪数组。如果要访问数组中的每一个元素，则要通过遍历的方式。
19.2.操作元素的内容
- eleObj.innerHTML
可以解析标签 - eleObj.innerText
不能解析标签
19.3.操作元素的属性
- 操作简单属性
eleObj.属性 = '值'
操作CSS样式属性，三种方式：
//通过style.属性修改CSS的值eleObj.style.属性 = '值'
注意事项：对于CSS中出现的带有 ‘-’ 的属性名称，在JS中采用小驼峰的书写方式。
body标签中在整个页面中只有一个，可以直接使用docuemnt.body得到该标签对象。
//通过类名的方式修改CSS属性eleObj.className = '新的类名'
该方法是在css文件中穿件一个待使用的样式newCName，然后在js中设置该元素对象的类名为newCName实现修改元素css属性的目的；比较适用于css样式多的更改方案。
使用该方法的缺陷是新的类名可能会覆盖旧的类名使得一些属性失效
//通过classList操作类名修改CSS样式eleObj.classList.add('类名') //添加类名eleObj.classList.remove('类名') //删除类名eleObj.classList.toggle('类名') //修改类名：有则删除，无则添加⭐⭐
这种方法也是在开发中使用较多的方法，可以很好的解决通过类名修改CSS属性而导致的类名覆盖问题。
Document .nav { width: 200px; height: 200px; text-align: center; line-height: 200px; margin: 0 auto; background-color: #859900; } /* 将要在JavaScript使用的类名 */ .bgc { line-height: 100px; background-color: #d0bfd1; } 加油努力干 const div = document.querySelector('.nav') const btn = document.querySelector('button') div.classList.add('bgc') btn.onclick = function () { div.classList.toggle('bgc') } // div.classList.remove('nav') 删除nav类名
19.4.表单相关属性
- input.value:获取文本框中的内容
- input.type = 'type_'：设置表单的种类
19.5.自定义属性
标签的自定义属性统一以data-开头，在JavaScript中获取时统一以eleObj.dataset.自定义属性名（去除data-）的方式获取自定义属性的值。
例如：
let div = document.querySelector('div') console.log(div.dataset.id) //10
19.6.计时器
计时器用来每隔一定间隔时间执行一次特定代码
//启动计时器let n = setInterval(fn,时间间隔ms)//停止计时器clearInterval(n)
注意事项：
计时器中的函数在调用时只需要填写函数名不需要带( )。
例如：
//写法1 let i = 0 //每隔1 s输出一个数 let n = setInterval(function () { console.log(++i) }, 1000);//写法2 let i = 0 function fn() { console.log(++i) } let n = setInterval(fn,1000)
实例：实现阅读协议效果：
协议
const btn = document.querySelector('button') let i = 5 let n = setInterval(() => { if (i === 0) { btn.innerHTML = '同意' btn.disabled = false clearInterval(n) } else { btn.innerHTML = `已阅读协议 ${i--}` } }, 1000);
19.7.事件监听
事件监听三要素：
- 事件源：哪个DOM对象触发的事件
- 事件类型：如鼠标单击click，鼠标经过mouseover等
- 事件调用函数
为DOM对象添加事件：
eleObj.addEventListener('事件类型',事件函数)
19.8.常用事件
19.9.事件对象
当浏览器监听到事件执行事件处理函数时会向事件处理函数传递一个事件对象，该事件对象中包含触发该事件的许多属性，例如：
19.10.环境对象
讲讲环境对象this的指向：
可以简单记为：谁调用的函数。this就指向谁
详细的：
- 在非严格模式下，直接调用函数，this指向的WIndow
- 在严格模式下，事件监听函数下，this指向的是函数的调用者
- 括号函数没有 this
19.11.回调函数
当函数A作为参数传递给函数B时，则称函数A为回调函数
常见的使用场景：
19.12.事件捕获和事件冒泡
阻止事件冒泡和事件捕获：
e.stopPropagation()
默认情况下，为元素添加的事件都是事件冒泡的，例如：
Document .father { width: 400px; height: 400px; background-color: pink; } .son { width: 200px; height: 200px; background-color: royalblue; } const father = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click', () => { alert('我是爷爷') }) father.addEventListener('click', () => { alert('我是爸爸') }) son.addEventListener('click', () => { alert('我是儿子') })
而有时候为了避免子元素触发事件时具有同名事件的父元素也出发事件，可以设置阻止子元素的事件冒泡，例如给上例中的son类元素设置禁止事件冒泡，此时点击son类元素即不会触发父类元素的同名事件：
const father = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click', () => { alert('我是爷爷') }) father.addEventListener('click', () => { alert('我是爸爸') }) son.addEventListener('click', (e) => { alert('我是儿子') e.stopPropagation() //设置阻止事件冒泡和事件捕获 })
19.13 .事件委托
事件委托能够有效减少注册次数，提高程序性能。例如，现有需求？：点击ul中的哪个li元素，哪个就变色，往常一般是采用for循环为每个li元素绑定事件，影响程序的性能。现在可以通过事件委托将li元素的点击事件委托给父元素ul，例如：
//将li元素的点击事件委托给父元素ul，事件默认是冒泡的，因此点击li元素事件会冒泡给父元素ul const ul = document.querySelector('ul') ul.addEventListener('click', (e) => { e.target.style.color = 'red' //点击哪个li元素，哪个li元素变色 })
但是此时如果ul中的其他标签元素同样也会事件冒泡，此时可以通过元素类型核验避免除li元素外的其他元素事件冒泡：
//找到真正触发事件的元素 e.target.tagName//可以使用console.dir(e.target)查看 //将li元素的点击事件委托给父元素ul，事件默认是冒泡的，因此点击li元素事件会冒泡给父元素ul const ul = document.querySelector('ul') ul.addEventListener('click', (e) => { if (e.target.tagName === 'LI') //检查点击的元素是否是li标签 e.target.style.color = 'red' })
19.14.阻止默认行为
e.preventDefault()
例如 ，当表单收集到的数据不满足条件时，阻止表单的提交行为：
const form = document.querySelector('form') form.addEventListener('submit', (e) => { e.preventDefault() //阻止表单的提交行为 alert('格式不正确') })
19.15. 页面加载事件load和DomContentLoaded
页面加载事件记作"load"，在JavaScript中表示整个页面加载完成后才被触发，例如，可以将js的script标签写在head标签中为window添加load事件，待页面加载完成后执行load事件中的js代码：
阻止默认行为 window.addEventListener('load', function () { const form = document.querySelector('form') form.addEventListener('submit', (e) => { e.preventDefault() //阻止表单的提交行为 alert('格式不正确') }) })
有时候为了提高网页性能，可以使用DomContentLoaded事件，表示当Dom节点加载完成后就可以进行交互操作，即使当网页中的图片，表单没有加载出来：
19.16.滚动事件scroll
在JavaScript中获取页面中的html标签的写法：
document.documentElement
页面中的滚动事件有两个属性，并且这两个属性是可以访问或者赋值的：
- element.scrollLeft
获取元素往左滚出去的看不到的距离 - element.scrollTop
获取元素往上滚出去的看不到的距离
19.17.client家族和offset家族
client-获取元素可见部分的宽高，不包含margin，边框，滚动条等，如果元素被隐藏，则获取出来的数值为0
- clentWidth:获取元素宽度
- clientHeight:获取元素高度
offset- 获取元素可视自身宽高，包含padding和border，不包含margi，如果盒子是隐藏的，获取到的数值为0：
- offsetWidth:获取元素自身宽度
- offsetHeight:获取元素自身高度
- offsetTop:获取元素距离自己定位的父级元素的顶部距离，从border算起（包含border）
- offsetLeft:获取元素距离自己定位的父级元素的左侧距离，从border算起（包含border）
19.18.日期对象
获得日期对象实例：
const date = new date()
日期对象的方法：
注意：日期对象方法得到的月份加1之后才是当前的月份；通过getDay获得的周日会被显示为0
让页面上的时间动起来：
//得到当前时间 function getMyDate() { const date = new Date() //返回指定时间 const date1 = new Date('2022-05-01 08:45:00') const month = date.getMonth() 综合案例 广告实例
例如，实现弹出广告点击关闭的效果：
事件监听 .adv { width: 400px; height: 200px; margin: 0 auto; text-align: center; line-height: 200px; background-color: #f1c7e0; position: relative; } .cur { display: inline-block; width: 10px; height: 10px; line-height: 10px; position: absolute; right: 10px; top: 10px; cursor: pointer; background-color: #fff; border-radius: 5px; } 我是广告 × const span = document.querySelector('.cur') span.addEventListener('click', () => { document.querySelector('.adv').style.display = 'none' }) Document * { margin: 0; padding: 0; } .father { width: 250px; height: 200px; background-color: pink; margin: 0 auto; position: relative; } .father .son { display: inline-block; width: 15px; height: 15px; font-size: 12px; text-align: center; line-height: 15px; background-color: white; position: absolute; right: 0; top: 0; cursor: pointer; } X const closeUp = document.querySelector('.son') closeUp.addEventListener('click', function () { this.parentNode.style.display = 'none' })
点名实例
例如，实现随机点名的效果：
随机点名 .sheet { width: 400px; height: 200px; position: relative; background-color: #eed6e4; margin: 0 auto; border-radius: 40px; } .sheet span { display: inline-block; margin: 40px 0px 0px 10px; font-size: 25px; } .sheet .btn { position: absolute; width: 50px; height: 30px; border: 10px; background-color: #fff; text-align: center; line-height: 30px; cursor: pointer; font-weight: bold; border-radius: 15px; bottom: 10px; } .btn_start { left: 70px; } .btn_end { right: 70px; } 即将选到： 开始 结束 let arr = ['晟泽', '流星', '潘星', '程伟', '方覅'] const span = document.querySelector('.sheet span') const btnStart = document.querySelector('.btn_start') const btnEnd = document.querySelector('.btn_end') let n let i = 0 btnStart.addEventListener('click', () => { clearInterval(n) n = setInterval(() => { span.innerHTML = `即将选到：${arr[i]}` i = (i + 1) % arr.length }, 100) }) btnEnd.addEventListener('click', () => { clearInterval(n) span.innerHTML = `选到了：${arr[i]}牛掰~~` })
小米搜索框实例
小米搜索框 * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; color: black; } .container { width: 300px; height: 200px; margin: 0 auto; margin-top: 50px; } .ipt { width: 286px; height: 40px; /* opacity: 0.2; */ border: 1px solid #dbdbdb; color: #dbdbdb; padding-left: 14px; font-size: 15px; } .ul_select { width: 300px; /* height: 300px; */ border: 1px solid #e2bc53; border-top: none; overflow: hidden; display: none; } /* .ul_select li { padding: 10px 0 10px 15px; } */ .ul_select li a { display: inline-block; width: 100%; padding: 10px 0px 10px 15px; } .ul_select li:hover { background-color: #ededed; } - 小米12s
- RedMi
- 小米笔记本
- 黑鲨4
- 空调
- 油烟机
const ipt = document.querySelector('.ipt') const selectUl = document.querySelector('.ul_select') ipt.addEventListener('focus', function () { if (ipt.value === '小米笔记本') { ipt.value = '' } selectUl.style.display = 'block' ipt.style.color = 'black' }) ipt.addEventListener('blur', () => { if (ipt.value === '') { ipt.value = '小米笔记本' } ipt.style.color = '#dbdbdb' selectUl.style.display = 'none' })
B站评论区实例
comment * { text-decoration: none; list-style-type: none; margin: 0; padding: 0; } .container { width: 40%; margin: 0 auto; background-color: #fdf6e3; margin-top: 30px; overflow: hidden; } .wr_container { width: 70%; margin: 0 auto; } .wr_container .submit { width: 79px; height: 79px; background-color: #268bd2; border-radius: 8px; float: right; margin-right: 20px; text-align: center; line-height: 79px; margin-top: 10px; cursor: pointer; color: white; font-size: 14px; } .tx { height: 58px; border-radius: 8px; margin-top: 10px; width: 70%; padding: 10px 20px; resize: none; /*设置textarea禁止缩放*/ } .wr_container span { float: right; margin-right: 120px; opacity: 0; transition: all .3s; font-size: 15px; } .comment { width: 70%; /* height: 40px; */ margin: 0 auto; /* border: 1px solid black; */ overflow: hidden; } .comment li { width: 74%; margin: 10px 0; padding: 10px 10px; background-color: #eee8d5; border-radius: 10px; font-size: 10px; } 发布 0/200
const tx = document.querySelector('.tx') const sp = document.querySelector('.wr_container span') const sub = document.querySelector('.submit') const ul = document.querySelector('.comment') tx.addEventListener('focus', () => { sp.style.opacity = 1 }) tx.addEventListener('blur', () => { sp.style.opacity = 0 }) tx.addEventListener('input', () => { sp.innerHTML = `${tx.value.length}/200` }) sub.addEventListener('click', () => { if ((tx.value).trim() !== '') { let li = document.createElement('li') li.innerHTML = tx.value ul.appendChild(li) } else { alert('不能发送空的内容') } tx.value = '' }) tx.addEventListener('keyup', (e) => { if (e.key === 'Enter') { if ((tx.value).trim() !== '') { let li = document.createElement('li') li.innerHTML = tx.value ul.appendChild(li) } else { alert('不能发送空的内容') } tx.value = '' } })
复选框全选/取消全选实例
全选/取消全选案例 table { margin: 0 auto; border-collapse: collapse; } table td { border: 1px solid black; text-align: center; padding: 20px 40px; } table tr:nth-child(1) { background-color: #429fc9; border: 1px solid black; } table tr:nth-child(1) td { border: none; padding: 6px; } input { cursor: pointer; } 全选 商品 商家 价格 小米手机 小米 1999 小米净水器 小米 4999 小米电视 小米 5999
const cks = document.querySelectorAll('.ck') const ckall = document.querySelector('#ckall') ckall.addEventListener('click', function () { for (let i = 0; i < cks.length; i++) { cks[i].checked = this.checked } }) for (let i = 0; i < cks.length; i++) { cks[i].addEventListener('click', function () { //使用复选框选择器，选出所有被选中的子框的数量 ckall.checked = (document.querySelectorAll('.ck:checked').length === cks.length) }) }
京东动态购物栏实例
Tab栏切换 * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; color: black; } .header { width: 612px; background-color: #fdf6e3; margin: 0 auto; } .header ul { overflow: hidden; margin-top: 20px; } .header ul li { float: left; padding: 9px 60px; cursor: pointer; } .header ul li a { display: inline-block; padding: 3px 0; } .content_list { margin: 0 auto; width: 612px; } .item { width: 608px; height: 400px; text-align: center; line-height: 400px; display: none; font-size: 35px; border: 2px dashed pink; } .active { display: block; color: pink; } - 蔬菜
- 水果
- 手机
- 花卉
蔬菜栏 水果栏 手机栏 花卉栏 const as = document.querySelectorAll('.header a') const divs = document.querySelectorAll('.content_list div') for (let i = 0; i < as.length; i++) { as[i].addEventListener('mouseenter', function () { document.querySelector('.header .active').classList.remove('active') document.querySelector('.content_list .active').classList.remove('active') this.classList.add('active') divs[i].classList.add('active') }) }
京东动态购物栏实例（优化后）
使用事件委托优化后：
事件委托优化的tab商品表 * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; color: black; } .container { width: 800px; height: 400px; background-color: #fdf6e3; margin: 0 auto; overflow: hidden; } .nav ul { width: 800px; overflow: hidden; } .nav ul li { float: left; width: 200px; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px dashed black; } .nav ul li a { display: inline-block; width: 100%; height: 100%; } .container .box_shopping { width: 800px; height: 360px; font-size: 30px; text-align: center; line-height: 360px; display: none; } .container .native { display: block; background-color: pink; } - 水果
- 蔬菜
- 运动
- 养生
水果 蔬菜 运动 养生 const ul = document.querySelector('.container .nav ul') ul.addEventListener('click', (e) => { if (e.target.tagName === 'A') { document.querySelector('.nav .native').classList.remove('native') document.querySelector('.content .native').classList.remove('native') e.target.classList.add('native') const i = +e.target.dataset.id //为导航栏的a元素添加自定义属性，通过添加的自定义属性获取待显示的div模块 document.querySelector(`.content div:nth-child(${i + 1})`).classList.add('native') } })
滚动事件案例-侧边栏的显示和隐藏
侧边栏的显示和隐藏 * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; } .container { width: 80%; height: 3000px; background-color: #fdf6e3; margin: 0 auto; text-align: center; font-size: 50px; } .nav ul { position: fixed; overflow: hidden; right: 1%; top: 500px; border-radius: 10px; background-color: #72a79a; font-size: 15px; display: none; } .nav ul li { height: 40px; width: 40px; text-align: center; line-height: 20px; padding: 10px; border-bottom: 1px solid black; cursor: pointer; } .nav ul li:nth-child(3) { line-height: 40px; border: none; } 顶部 - 为你推荐
- 回到顶部
- 反馈
const nav = document.querySelector('.nav ul') const toTop = document.querySelector('.nav ul li:nth-child(2)') // 页面滚动超过300px就显示导航栏，小于300就隐藏 window.addEventListener('scroll', function () { const n = document.documentElement.scrollTop console.log(n) if (n >= 500) { nav.style.display = 'block' } else if (n { document.documentElement.scrollTop = 0 })
offset实例-仿京东头部导航条的显示隐藏
显示隐藏 * { margin: 0; padding: 0; } .container { width: 60%; margin: 0 auto; height: 3000px; background-color: pink; /* position: relative; */ } .nav { position: fixed; width: 60%; height: 40px; left: 20%; top: -40px; background-color: #73e0e4; text-align: center; line-height: 40px; transition: all .5s; } .show { height: 200px; } .main_page { height: 200px; background-color: #f7ea78; text-align: center; line-height: 200px; } 顶部导航条 页面滚动到这里顶部导航条出现 const mainPage = document.querySelector('.main_page') const nav = document.querySelector('.nav') window.addEventListener('scroll', function () { nav.style.top = document.documentElement.scrollTop >= mainPage.offsetTop " /> 滑动导航条 * { margin: 0; padding: 0; list-style-type: none; text-decoration: none; } ul { width: 320px; margin: 0 auto; overflow: hidden; border-bottom: 1px solid rgb(224, 218, 218); position: relative; } ul li { float: left; width: 80px; height: 40px; line-height: 40px; text-align: center; } ul li a { display: inline-block; width: 38px; text-align: center; color: black; } .line { width: 38px; height: 2px; background-color: pink; margin: 38px 0 0 21px; transition: all .3s; } - 喜剧
- 动画
- 学习
- 搞笑
const line = document.querySelector('.line') const ul = document.querySelector('ul') ul.addEventListener('click', (e) => { if (e.target.tagName === 'A') { line.style.transform = `translateX(${e.target.offsetLeft - 21}px)` } })
效果：
时间戳-倒计时案例
思路：用指定时间的时间戳减去当前时间的时间戳在转换为时分秒渲染到页面显示，转换时分秒的方法：
![]()
效果图：
倒计时 * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; } .container { width: 280px; height: 400px; background-color: #9d2b2a; margin: 0 auto; position: relative; border-radius: 15px; margin-top: 200px; } .title { height: 50px; text-align: center; font-size: 18px; color: white; padding: 10px; line-height: 50px; } .com { font-size: 30px; padding: 20px 10px; } .container ul { padding: 40px; overflow: hidden; margin: 0 auto; width: 52.3%; } .container ul li { float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; background-color: black; color: white; font-size: 24px; border-radius: 6px; } .container ul .colon { width: 20px; background-color: #9d2b2a; } .footer_ { position: absolute; width: 260px; bottom: 10px; font-size: 24px; } 距离Java上课
- :
- :
18:45:00上课
const p = document.querySelector('.container .title') const date = new Date() let temp, millisecond const lis = document.querySelectorAll('.container ul li') p.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日` //在计时器开始前先加载一次，优化计时器带来的1s延迟 millisecond = (+new Date('2023-03-09 18:45:00') - +new Date()) / 1000 lis[0].innerHTML = (temp = parseInt(millisecond / 60 / 60)) <= 9 ? '0' + temp : temp lis[2].innerHTML = (temp = parseInt(millisecond / 60 % 60)) <= 9 ? '0' + temp : temp lis[4].innerHTML = (temp = parseInt(millisecond % 60)) { millisecond = (+new Date('2023-03-09 18:45:00') - +new Date()) / 1000 lis[0].innerHTML = (temp = parseInt(millisecond / 60 / 60)) <= 9 ? '0' + temp : temp lis[2].innerHTML = (temp = parseInt(millisecond / 60 % 60)) <= 9 ? '0' + temp : temp lis[4].innerHTML = (temp = parseInt(millisecond % 60)) <= 9 ? '0' + temp : temp }, 1000);