页面返回顶部
这个我是直接套在之前写的q音界面里了
效果如下：
<div id="btn" class="btn"><a href="#top">回到顶部</a></div>
.btn{
width: 50px;
height: 50px;
background-color:white;
display: none;
padding-left: 8px;
font-size: 18px;
border: 1px solid black;
}
scrollTop计算的就是这段距离 ↑
//获取返回顶部按钮btn
var btn=document.getElementById("btn")
//窗口滚动了多少（浏览器常用事件：onscroll事件）
window.onscroll=function(){
fun()
}
//给按钮绑点击事件
btn.onclick=function(){
window.scrollTo(0,0)
}
function fun(){
//全写是这样，省略了window
//window.document.documentElement.scrollTop
if(document.documentElement.scrollTop>20){
btn.style.display="block"
}else{
btn.style.display="none"
}
}
Tab选项卡
效果如下：
var定义法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="a选项卡.css">
</head>
<body>
<ul class="header">
<li class="active">英雄联盟</li>
<li>DOTA</li>
<li>风暴英雄</li>
<li>300英雄</li>
</ul>
<ul class="box">
<!-- 给第一个设置active让它高亮 -->
<li class="active">《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
</li>
<li>222</li>
<li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</li>
<li><a href="https://300.jumpw.com/">300英雄</a></li>
</ul>
<script>
//获取
var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAll(".box li")
//给这个oHeaderItems部分里的每一个li(也就是这里的i)绑定onclick的事件
for(var i=0;i<oHeaderItems.length;i++){
//这里需要注意的是"循环绑"的循环会瞬间执行完,所以你打印i的时候,并不能得到每个i事件的数字
//所以也就不能确定你点到的是哪一个
//自定义属性data-index(会被加在每个li中)（让它不去获取i了,而是去获取自身属性）
//为什么要这样，因为在你还没点之前，它就已经循环完了，所以你打印了只能显示个4
oHeaderItems[i].dataset.index = i
oHeaderItems[i].onclick = handler
}
//为了方便,易看,我们可以把上面onclick后的function单独在下面写(拆分)
function handler(){
console.log(this.dataset.index) //表示当前所点击的对象,可以在点击时得到相应的li
var index = this.dataset.index
for(var m=0;m<oHeaderItems.length;m++){
//思路:先把他们的active全部删掉,再在每次点击的时候单独加上
oHeaderItems[m].classList.remove("active")
oBoxItems[m].classList.remove("active")
}
//这里再单独加上
oHeaderItems[index].classList.add("active")
oBoxItems[index].classList.add("active")
}
</script>
</body>
</html>
不过循环那里，如果改成let定义的话就不用那么麻烦了，不需要考虑它for会立刻循环完，因为let每次的i都是新的
var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAll(".box li")
for(let i=0;i<oHeaderItems.length;i++){
oHeaderItems[i].onclick = function (){
console.log(i)
var index = i
for(var m=0;m<oHeaderItems.length;m++){
oHeaderItems[m].classList.remove("active")
oBoxItems[m].classList.remove("active")
}
oHeaderItems[index].classList.add("active")
oBoxItems[index].classList.add("active")
}
}
let定义法
var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAll(".box li")
for(let i=0;i<oHeaderItems.length;i++){
oHeaderItems[i].onclick = function (){
console.log(i)
var index = i
for(var m=0;m<oHeaderItems.length;m++){
oHeaderItems[m].classList.remove("active")
oBoxItems[m].classList.remove("active")
}
oHeaderItems[index].classList.add("active")
oBoxItems[index].classList.add("active")
}
}
面向对象方式
属性就写在构造函数里面
new完之后调用方法
方法就挂在原型上
//一般属性就写在构造函数里面————————————————————
function Tabs(select) {
//在这里传一个外面盒子的节点（基础）
var container=document.querySelector(select)
//这里就不能用document，直接在我们这个节点中找
this.oHeaderItems = container.querySelectorAll(".header li")
this.oBoxItems = container.querySelectorAll(".box li")
this.change()
}
//方法就挂在原型上————————————————————
Tabs.prototype.change=function(){
for (let i = 0; i < this.oHeaderItems.length; i++) {
//this
//痛点
//改成箭头函数,因为箭头函数的this是父级作用域的，这样就可以指向tab了
this.oHeaderItems[i].onclick = ()=> {
console.log(this)
var index = i
for (var m = 0; m < this.oHeaderItems.length; m++) {
this.oHeaderItems[m].classList.remove("active")
this.oBoxItems[m].classList.remove("active")
}
this.oHeaderItems[index].classList.add("active")
this.oBoxItems[index].classList.add("active")
}
}
}
——————————————————————————————————————
//这个需要自己调用
//var tab1=new Tabs(".container-1")
//tab1.change()
//var tab2=new Tabs(".container-2")
//tab2.change()
———————————————————————————————————————
//自动
new Tabs(".container-1")
new Tabs(".container-2")
