js常见特效
目录
选项卡
思路：
①自定义索引
②干掉所有人：先将所有按钮的类名都清空，内容隐藏none（for循环）
③复活我自己：之后给当前点击的按钮添加类名，将对应的内容通过自定义索引显示出来
全选效果
全选
单选【双层循环，single点击事件中也有一层循环】
方法一：用变量/数组记录single选中的个数，若其与single复选框总个数相同，则all选中
方法二：在for循环中利用break，只要有一个single为false，则all为false并跳出循环 若single都为true（不执行判断里面的），则all也为true
吸顶导航栏
②页面中添加滚动事件 window.onscroll
③滚动事件中，获取滚动的网页高度
④判断 滚动网页高度>=菜单距离文档顶部高度
⑤大于修改导航条样式为固定定位fixed，修改 left 和 top 值将其固定在顶部
⑥小于则导航条样式为相对定位relative，修改top值为0
⑦【增加功能】设置占位符，剔除抖动
封装一个倒计时函数
持续更新中... 谢谢关注
选项卡
【重：设置自定义索引】
思路：
①自定义索引
排他思想：
②干掉所有人：先将所有按钮的类名都清空，内容隐藏none（for循环）
③复活我自己：之后给当前点击的按钮添加类名，将对应的内容通过自定义索引显示出来
<div id=container><div id="title"><div class="active">标题1</div><div>标题2</div><div>标题3</div><div>标题4</div></div><div id="content"><div>内容1</div><div>2</div><div>内容3</div><div>内容4</div></div>
</div>*{margin: 0;padding: 0;box-sizing: border-box;
}
#container{width: 500px;height: 350px;border: 1px solid #888;border-radius: 8px;margin: 50px auto;overflow: hidden;
}
#title {display: flex;justify-content: space-around;border-bottom: 2px solid red;
}
#title div{width: 25%;height: 30px;text-align: center;line-height: 30px;cursor: pointer;
}.active{background-color: red;color: white;font-size: 18px;}
#content div{font-size: 30px;padding: 20px 30px;display: none;
}
#content div:nth-of-type(1){display: block;
}
// 获取标签元素
var _title=document.getElementById('title')
var _titleDivS=_title.getElementsByTagName('div')
var _content=document.getElementById('content')
var _contentDivS=_content.getElementsByTagName('div')
// 添加点击事件
for(var i=0;i<_titleDivS.length;i++){// 设置自定义属性_titleDivS[i].index=i_titleDivS[i].onclick=function(){// 标题样式更换// 清空所有标题样式for(var m=0;m<_titleDivS.length;m++){_titleDivS[m].className=''//将所有内容隐藏contentDivS[m].style.display='none'}// 显示当前标题样式this.className='active'// 显示当前标签对应内容_contentDivS[this.index].style.display='block'}
}全选效果
全选
all选中则每个single都选中，all为选中则每个single都为选中
_all.onclick = function () {for (var i = 0; i < _single.length; i++) { //若果all选中，则所有single也选中，否则所有single都为选中false if (_all.checked) {_single[i].checked = true } else {_single[i].checked = false}}
}单选【双层循环，single点击事件中也有一层循环】
所有single复选框都选中，all复选框才选中；只要有一个single未选中，则all为false
方法一：用变量/数组记录single选中的个数，若其与single复选框总个数相同，则all选中
for (var i = 0; i < _single.length; i++) {_single[i].onclick = function () {var arr = []// var number = 0;//记录选中的个数for (var j = 0; j < _single.length; j++) {if (_single[j].checked) {arr.push(_single[j])// number++;}}_all.checked = (_single.length == arr.length)// _all.checked = (_single.length == number)}
}方法二：在for循环中利用break，只要有一个single为false，则all为false并跳出循环 若single都为true（不执行判断里面的），则all也为true
for (var i = 0; i < _single.length; i++) {_single[i].onclick = function () {for (var j = 0; j < _single.length; j++) {if (!_single[j].checked) {_all.checked = false break }_all.checked=true} }
}吸顶导航栏
②页面中添加滚动事件 window.onscroll
①获取导航条距离文档顶部的高度nav.offsetTop（滚动事件外面）
③滚动事件中，获取滚动的网页高度
document.documentElement.offsetHeight||document.body.scrollTop
④判断 滚动网页高度>=菜单距离文档顶部高度
⑤大于修改导航条样式为固定定位fixed，修改 left 和 top 值将其固定在顶部
⑥小于则导航条样式为相对定位relative，修改top值为0
⑦【增加功能】设置占位符，剔除抖动
实现吸顶功能时，到了临界位置时，页面会抖动一下，因为当导航条fixed出去，下部内容填补了导航条离开的位置。抢占了导航条的位置，所以抖动了一下。此处我们设置一个占位符，守住导航条的位置
css
* {margin: 0;padding: 0;
}
#box1,
#box2,
#box3 {width: 100%;
}#box1 { height: 150px;background-color: pink;
}#box2 {height: 480px;background-color: orangered;
}#box3 {height: 480px;background-color: yellowgreen;
}#header,
#nav {position: relative;/* top: 0; */width: 100%;height: 40px;background-color: rgb(47, 23, 23);
}.fix {position: fixed;top: 0;left: 0;
}HTML，js
/*<div id="box1"></div>
<div id="header"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="nav"></div>
<div id="box2"></div>
<div id="box3"></div>*///获取导航条
var _header = document.getElementById('header')
var _nav = document.getElementById('nav')//7.添加占位符，去除抖动//获得页面中导航条相对于浏览器视窗的位置
var rect = _header.getBoundingClientRect();
var inser = document.createElement("div");
_header.parentNode.replaceChild(inser, _header);
inser.appendChild(_header);
inser.style.height = rect.height + "px"; //1.获取导航条距离文档顶部距离
var ht = _header.offsetTop
var nt = _nav.offsetTop - _header.offsetHeight//2.滚动事件
window.onscroll = function () {//第一个导航条//3-4.判断if (ht <= document.documentElement.scrollTop) {//5.导航条高度小于等于滚动条滑动高度，将其设置为固定定位，并修改left，top/* _header.style.position = 'fixed'_header.style.top = '0px' */fn(_header,'fixed','0px')} else {//6.导航条高度大于滚动条滑动高度，设置为相对定位，修改top// _header.style.position = 'relative'fn(_header,'relative','0px')}//第二个导航条if (nt <= document.documentElement.scrollTop) {/* _nav.style.position = 'fixed'_nav.style.top = '40px' */fn(_nav,'fixed','40px')} else {/* _nav.style.position = 'relative'_nav.style.top = 0 */fn(_nav,'relative','0px')}
}
//封装函数，优化代码
function fn(ele,pos,topVal){ele.style.position=posele.style.top=topVal
}封装一个倒计时函数
function fn(time){// 当前时间var currentDate= new Date()// 设置未来时间var futureDate=new Date(time)var fd=futureDate.toLocaleDateString()// 时间差var interval=futureDate-currentDateinterval=interval/1000var day=parseInt(interval/(60*60*24))var h=parseInt(interval%(60*60*24)/(60*60))var min=parseInt(interval%(60*60)/(60))var s=parseInt(interval%(60))// console.log(day,h,min,s)// return [day,h,min,s]_p.innerText='距离'+fd+'还剩: '+day+'天 '+h+'时 '+min+'分 '+s+'秒'} fn() setInterval("fn('2021/11/11')",1000)