JavaScript |（七）BOM及JSON简介 | 轮播图 | 尚硅谷JavaScript基础实战
学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
笔记来源：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（七）BOM及JSON简介 | 轮播图 | 尚硅谷JavaScript基础&实战
JavaScript |（七）BOM及JSON简介 | 轮播图 | 尚硅谷JavaScript基础&实战
- ❤️ BOM（浏览器对象模型）详解
- 🧩 BOM 主要对象
- 🧩 `window` 对象（浏览器窗口）
- 🧩 `navigator` 对象（浏览器信息）
- 💡 检测用户浏览器
- 💡 检测是否在线
- 🧩 `location` 对象（URL 相关操作）
- 💡 获取当前 URL
- 💡 页面跳转
- 💡 页面刷新
- 🧩 `history` 对象（浏览器历史）
- 💡 控制浏览器历史
- 🧩 `screen` 对象（屏幕信息）
- 💡 获取屏幕信息
- 🧩 `window.open()` ——打开新窗口
- ❤️ 定时/延时调用
- 🧩 定时调用（定时器）
- 1️⃣ `setInterval()` - 反复执行
- 💡 语法
- 🔹 示例：每 2 秒打印一次
- 2️⃣ `clearInterval()` - 关闭定时器
- 💡 语法
- 🔹 示例：5 秒后停止定时器
- 🧩 图片自动切换练习
- 🧩 div随键盘移动改进
- 🧩 延迟调用
- 3️⃣ `setTimeout()` - 延迟执行
- 💡 语法
- 🔹 示例：3 秒后执行
- 💡 `clearTimeout()` - 取消延迟执行
- 4️⃣ 防止多个定时器叠加
- 🔹 示例：防止多次点击导致多个定时器
- 🧩 定时器的应用
- 🧩 轮播图功能实现🔥
- ❤️ 类的操作——📌 修改 HTML 元素的样式
- 1️⃣ 方式一：直接修改 `style`
- 2️⃣ 方式二：修改 `className`
- 3️⃣ 方式三：使用 `classList` 方法
- 4️⃣ 提取方法（封装函数）
- ❤️ 二级菜单
- **📌 二级菜单（Dropdown Menu）**
- 1️⃣ 基本结构
- 2️⃣ CSS 样式
- 3️⃣ 使用 JavaScript（点击触发）
- 4️⃣ 右键菜单（Context Menu）
- ❤️ JSON
- 🧩 创建JSON对象
- 🧩 转换
- 🧩 `eval()`
❤️ BOM（浏览器对象模型）详解
BOM (Browser Object Model，浏览器对象模型) 允许 JavaScript 操控浏览器，如 窗口操作、地址栏跳转、历史记录控制等。
🧩 BOM 主要对象
| BOM 对象 | 作用 |
|---|---|
window | 代表整个浏览器窗口，是 顶级对象，也是全局对象 |
navigator | 提供 浏览器信息（如 Chrome、Firefox） |
location | 负责 URL 地址操作（如获取 URL、跳转页面） |
history | 访问 浏览器历史记录（前进、后退） |
screen | 获取 屏幕信息（分辨率、颜色深度等） |
📌 这些对象都 属于 window，所以可以 直接使用 或 通过 window. 访问。
🧩 window 对象（浏览器窗口）
window 是 BOM 的核心，所有 BOM 对象都是 window 的属性。
🔹 直接使用 alert()、setTimeout()，本质上是 window.alert() 和 window.setTimeout()。
💡 常见方法
alert("Hello!"); // 弹出提示框，等价于 window.alert()
window.setTimeout(() => {
console.log("3秒后执行");
}, 3000); // 3秒后执行代码
📌 window 还可以 控制窗口大小
console.log("窗口宽度：" + window.innerWidth);
console.log("窗口高度：" + window.innerHeight);
🧩 navigator 对象（浏览器信息）
用于获取 浏览器类型、版本、操作系统信息。
💡 检测用户浏览器
console.log("浏览器信息：" + navigator.userAgent); // 获取完整的浏览器信息
if (navigator.userAgent.includes("Chrome")) {
console.log("用户使用的是 Chrome 浏览器");
}
💡 检测是否在线
console.log("是否在线：" + navigator.onLine);
-
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。
-
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用
userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent。 -
在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了。如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息，比如：
ActiveXObject。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("你是火狐！！！");
}else if(/chrome/i.test(ua)){
alert("你是Chrome！！！");
}else if(/msie/i.test(ua)){
alert("你是IE浏览器！！！");
}else if("ActiveXObject" in window){
alert("你是IE11！！！");
}
//如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
if("ActiveXObject" in window){
alert("你是IE，我已经抓住你了~~~");
}else{
alert("你不是IE~~~");
}
</script>
</head>
<body>
</body>
</html>
🧩 location 对象（URL 相关操作）
用于 获取和操作当前网页地址。
💡 获取当前 URL
console.log("当前网址：" + location.href);
console.log("当前协议：" + location.protocol); // http 或 https
console.log("当前主机：" + location.hostname); // www.example.com
console.log("当前端口：" + location.port); // 80, 443
console.log("当前路径：" + location.pathname); // /index.html
console.log("URL 参数：" + location.search); // ?name=John&id=123
💡 页面跳转
location.href = "https://www.example.com"; // 跳转到新网址
💡 页面刷新
location.reload(); // 刷新页面（相当于 F5）
Location：该对象中封装了浏览器的地址栏的信息。- 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
- 如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录。
assign()：用来跳转到其他的页面，作用和直接修改location一样。reload()：用于重新加载当前页面，作用和刷新按钮一样。如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面location.reload(true);replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成历史记录，不能使用回退按钮回退。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取按钮对象
var btn = document.getElementById("btn");
//直接打印location，则可以获取到地址栏的信息
alert(location);
// location = "http://www.baidu.com";
// location.assign("http://www.baidu.com");
// location.reload(true);
btn.onclick = function(){
location.replace("http://www.baidu.com");
};
};
</script>
</head>
<body>
<button id="btn">点我一下切百度</button>
<h1>Location</h1>
</body>
</html>
🧩 history 对象（浏览器历史）
用于 控制前进、后退，但无法获取具体的历史记录（出于安全原因）。
💡 控制浏览器历史
history.back(); // 后退（等同于浏览器的“后退”按钮）
history.forward(); // 前进（等同于“前进”按钮）
history.go(-2); // 后退 2 页
history.go(1); // 前进 1 页
📌 注意：history 只能在 当前会话 中生效。
- History对象可以用来操作浏览器向前或向后翻页。
length属性：可以获取当前访问的链接数量。back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样。forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样。go()：可以用来跳转到指定的页面，它需要一个整数作为参数1:表示向前跳转一个页面 相当于forward()2:表示向前跳转两个页面-1:表示向后跳转一个页面-2:表示向后跳转两个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(history.length);
//history.back();
//history.forward();
history.go(1);
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>History</h1>
<a href="01.BOM.html">去BOM</a>
</body>
</html>
🧩 screen 对象（屏幕信息）
用于获取 用户设备的屏幕分辨率。
💡 获取屏幕信息
console.log("屏幕宽度：" + screen.width);
console.log("屏幕高度：" + screen.height);
console.log("可用宽度：" + screen.availWidth); // 除去任务栏的宽度
console.log("可用高度：" + screen.availHeight); // 除去任务栏的高度
console.log("颜色深度：" + screen.colorDepth + "位");
🧩 window.open() ——打开新窗口
let newWin = window.open("https://www.example.com", "_blank", "width=500,height=500");
📌 说明：
_blank：在新窗口打开"width=500,height=500"：设置窗口大小
🔚 总结
| BOM 对象 | 作用 |
|---|---|
window | 顶级对象，控制窗口、定时器等 |
navigator | 浏览器信息（检测浏览器、在线状态等） |
location | 获取 & 操作 URL（跳转、刷新等） |
history | 控制前进、后退（但无法读取历史记录） |
screen | 屏幕信息（分辨率、颜色深度） |
❤️ 定时/延时调用
🧩 定时调用（定时器）
JavaScript 运行速度很快，如果希望 某段代码间隔一段时间反复执行，可以使用 定时调用（定时器）。
1️⃣ setInterval() - 反复执行
🔹 setInterval() 可以让一个函数每隔一段时间自动执行。
💡 语法
let timerId = setInterval(function, interval);
function：要执行的回调函数。interval：时间间隔（毫秒），1 秒 = 1000 毫秒。timerId：返回一个唯一的 ID，用于清除定时器。
🔹 示例：每 2 秒打印一次
let count = 1;
let timer = setInterval(() => {
console.log(`执行第 ${count} 次`);
count++;
if (count > 5) {
clearInterval(timer); // 5 次后停止
}
}, 2000);
2️⃣ clearInterval() - 关闭定时器
🔹 clearInterval(timerId) 用于停止 setInterval()。
💡 语法
clearInterval(timerId);
timerId：要清除的定时器 ID（由setInterval()返回）。
🔹 示例：5 秒后停止定时器
let timer = setInterval(() => {
console.log("定时器运行中...");
}, 1000);
setTimeout(() => {
clearInterval(timer);
console.log("定时器已停止");
}, 5000);
📌 解释
setInterval()每秒运行一次setTimeout()5 秒后调用clearInterval()关闭定时器
🧩 图片自动切换练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//使图片可以自动切换
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量，用来保存定时器的标识
var timer;
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
//开启一个定时器，来自动切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
index %= imgArr.length;
//修改img1的src属性
img1.src = imgArr[index];
},1000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//点击按钮以后，停止图片的自动切换，关闭定时器
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
🧩 div随键盘移动改进
- 解决它开始动的那一下，会有些卡动的问题：让
onkeyCode控制速度，使它有个防误碰机制。- 我们定义一个定时器来控制div移动的速度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同的方向键向不同的方向移动
window.onload = function(){
//定义一个变量，来表示移动的速度
var speed = 10;
//创建一个变量表示方向
//通过修改dir来影响移动的方向
var dir = 0;
//开启一个定时器，来控制div的移动
setInterval(function(){
switch(dir){
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
},30);
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed = 500;
}
else{
speed = 10;
}
//使dir等于按键的值
dir = event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup = function(){
//设置方向为0
dir = 0;
};
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
🧩 延迟调用
3️⃣ setTimeout() - 延迟执行
🔹 setTimeout() 只执行一次，可以用于 延迟执行某个操作。
💡 语法
let timeoutId = setTimeout(function, delay);
function：要执行的 回调函数delay：延迟时间（毫秒）
🔹 示例：3 秒后执行
setTimeout(() => {
console.log("3 秒后执行一次");
}, 3000);
💡 clearTimeout() - 取消延迟执行
🔹 如果想要在执行前取消 setTimeout()，可以使用 clearTimeout()。
let timeout = setTimeout(() => {
console.log("这条信息不会出现");
}, 5000);
clearTimeout(timeout); // 取消 `setTimeout()`
4️⃣ 防止多个定时器叠加
🔹 如果不断点击按钮，会触发多个定时器，造成 代码执行速度变快。
🔹 解决方法：在创建新定时器前，先清除旧的定时器。
🔹 示例：防止多次点击导致多个定时器
let timer; // 定义定时器 ID
document.getElementById("start").addEventListener("click", function () {
clearInterval(timer); // 先清除旧的定时器
timer = setInterval(() => {
console.log("每秒执行一次");
}, 1000);
});
document.getElementById("stop").addEventListener("click", function () {
clearInterval(timer); // 停止定时器
});
🔚 总结
| 方法 | 作用 | 是否重复执行 | 如何停止 |
|---|---|---|---|
setInterval() | 每隔一段时间执行一次 | ✅ 是 | clearInterval(timerId) |
setTimeout() | 延迟执行一次 | ❌ 否 | clearTimeout(timeoutId) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取count
var count = document.getElementById("count");
//使count中的内容，自动切换
var num = 1;
/*定时器每1000毫秒（即1秒）执行一次匿名函数。
在每次执行时，num的值会自增并显示在HTML文档中具有 count id的元素内。
如果 num的值等于11，则通过调用 clearInterval函数来关闭定时器并停止执行。*/
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num = 1;
//延时调用
for(i=1; i<=10; i++)
{
if(i==6)
{ //本来是1输到10，现在ban了一次，所以输出到9
clearTimeout(timer);
}
var timer = setTimeout(function(){
console.log(num++);
},3000);
}
</script>
</head>
<body>
</body>
</html>
🧩 定时器的应用
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 200px;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
move(box1 ,"left", 800 , 20);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 ,"left", 0 , 10);
};
//获取btn03
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
move(box2 , "left",800 , 10);
};
//测试按钮
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
move(box2 , "width" , 800 , 10 , function(){
move(box2 , "height" , 400 , 10 , function(){
move(box2 , "top" , 0 , 10 , function(){
move(box2 , "width" , 100 , 10 , function(){
});
});
});
});
};
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>
JS代码
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
🧩 轮播图功能实现🔥
style部分：实现了一个轮播图的样式效果。
-
设置了一个id为"outer"的元素，宽度为520px，高度为333px，居中显示，背景颜色为bisque，内部有一定的padding，并且设置了相对定位和溢出隐藏。
-
设置了id为"imgList"的元素，去除了项目符号，开启了绝对定位，并设置了左偏移量为0px。
-
设置了id为"imgList"下的li元素，浮动到左侧，并设置了左右外边距为10px。
-
设置了一个导航按钮的div元素，开启了绝对定位，并设置在底部离底部15px。
-
设置了导航按钮的a元素，浮动到左侧，宽高为15px，背景颜色为rgb(228, 139, 255)，左右外边距为5px，并设置了透明度为0.5，兼容了IE8的透明度。同时，设置了鼠标移入时的效果为黑色。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 520px;
height: 333px;
margin: 50px auto;
background-color: greenyellow;
padding: 10px 0;
position: relative;
/* 裁剪溢出的内容*/
overflow: hidden;
}
#imgList{
list-style: none;
width: 2100px;
position: absolute;
/* 每向左移动520 就会显示下一张 */
left: 0px;
}
#imgList li{
/* 设置浮动 */
float: left;
margin: 0 10px;
}
/* 设置导航按钮 */
#navDiv{
position: absolute;/*开启绝对定位*/
/* 设置位置 */
bottom: 15px;
}
#navDiv a{
float: left;
/*设置超链接的宽和高*/
width: 15px;
height: 15px;
background-color: #FF0000;
margin: 0 5px;
opacity: 0.5;
fill-opacity: alpha(opacity=50);/*兼容IE8*/
}
#navDiv a:hover{
background-color: black;
}
</style>
js部分
- （一）move函数：如上☝️
- （二）轮播
- 设置图片列表的宽度为520乘以图片数量；
- 设置导航按钮居中；
- 默认显示第一张图片，并将对应的导航按钮设置为黑色背景；
- 点击导航按钮切换到对应索引的图片，同时切换导航按钮的样式；
- 自动切换图片，每隔3秒切换一次，切换的顺序为正序循环。
<script type="text/javascript">
window.onload = function(){
//获取imgList
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 520*imgArr.length+"px";
/*设置导航按钮居中*/
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor = "black";
//为所有的超链接都绑定单击响应函数
for(var i=0; i<allA.length ; i++){
//为每一个超链接都添加一个num属性
allA[i].num = i;
//为超链接绑定单击响应函数
allA[i].onclick = function(){
//关闭自动切换的定时器
clearInterval(timer);
//获取点击超链接的索引,并将其设置为index
index = this.num;
//切换图片
//设置选中的a
setA();
//使用move函数来切换图片
move(imgList , "left" , -520*index , 20 , function(){
//动画执行完毕，开启自动切换
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA(){
//判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
//则将index设置为0
index = 0;
//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
//通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
//遍历所有a，并将它们的背景颜色设置为红色
for(var i=0 ; i<allA.length ; i++){
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
//定义一个自动切换的定时器的标识
var timer;
//创建一个函数，用来开启自动切换图片
function autoChange(){
//开启一个定时器，用来定时去切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断index的值
index %= imgArr.length;
//执行动画，切换图片
move(imgList , "left" , -520*index , 20 , function(){
//修改导航按钮
setA();
});
},3000);
}
};
</script>
html部分
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
❤️ 类的操作——📌 修改 HTML 元素的样式
在 JavaScript 中，我们可以通过修改元素的 class 或 style 来更改页面样式。
1️⃣ 方式一：直接修改 style
🔹 通过 element.style 修改单个样式
🔹 缺点：每次修改样式时，浏览器都要重新渲染，影响性能。
💡 示例
let box = document.getElementById("box");
box.style.width = "300px";
box.style.backgroundColor = "red"; // 直接修改背景色
📌 问题
- 代码不方便维护，每次修改多个样式时，需要写多行代码。
- 浏览器 每次修改都要重新渲染，影响性能。
2️⃣ 方式二：修改 className
🔹 直接修改 className，可以一次性改变多个样式，提高性能。
🔹 更推荐，因为行为（JS）和表现（CSS）分离，代码更清晰。
💡 示例
/* 在 CSS 中定义多个样式 */
.b1 {
width: 300px;
height: 200px;
background-color: blue;
}
.b2 {
border: 5px solid black;
}
let box = document.getElementById("box");
// 直接赋值 class
box.className = "b1";
// 添加额外的 class，不覆盖已有的
box.className += " b2";
📌 优点
- 性能更优，浏览器只渲染一次。
- 代码更简洁，只修改
className，不需要操作多个style。
3️⃣ 方式三：使用 classList 方法
🔹 classList 提供了更优雅的方法来操作 class
🔹 比 className 更灵活
💡 常见方法
| 方法 | 作用 | 示例 |
|---|---|---|
.add(className) | 添加类 | box.classList.add("b2") |
.remove(className) | 删除类 | box.classList.remove("b1") |
.toggle(className) | 切换类（有就删，无就加） | box.classList.toggle("b3") |
.contains(className) | 检查是否有某个类 | box.classList.contains("b2") |
💡 示例
let box = document.getElementById("box");
// 添加类
box.classList.add("b1");
// 删除类
box.classList.remove("b1");
// 切换类（如果有 b2 就删除，没有就添加）
box.classList.toggle("b2");
// 检查是否包含某个类
if (box.classList.contains("b2")) {
console.log("b2 样式已应用");
}
📌 优点
- 比
className更灵活，不需要手动拼接字符串。 - 避免 class 覆盖问题，
className = "b1"会覆盖所有class，但classList.add()只会添加新的class。
4️⃣ 提取方法（封装函数）
🔹 如果需要频繁修改样式，建议封装成一个函数，提高代码复用性。
💡 示例
function changeStyle(element, newClass) {
element.className = newClass;
}
let box = document.getElementById("box");
// 调用函数修改样式
changeStyle(box, "b1");
📌 好处
- 代码更清晰，不需要重复写
className。 - 易维护，修改
CSS时不影响 JS 逻辑。
🎯 总结
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
element.style | 直接修改单个样式，简单直观 | 影响性能，每次修改都会触发重新渲染 | 只修改一个样式时 |
element.className | 修改 class，一次性应用多个样式 | 可能覆盖已有的 class | 推荐用于大部分情况 |
element.classList | 灵活操作 class，支持 add、remove、toggle | 兼容性较 className 略差（IE9+） | 需要动态增删 class 时 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取box
var box = document.getElementById("box");
//获取btn01
var btn01 = document.getElementById("btn01");
//为btn01绑定单击响应函数
btn01.onclick = function(){
//修改box的样式
//修改box的class属性
//这行代码是给元素的类名属性添加一个新的类名"b2"。
//如果原来已经有其他类名，那么会在原有的类名后面加上空格和新的类名。
box.className += " b2";
addClass(box,"b2");
removeClass(box,"b2");
toggleClass(box,"b2");
};
};
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有，则删除
removeClass(obj , cn);
}else{
//没有，则添加
addClass(obj , cn);
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<br /><br />
<div id="box" class="b1 b2"></div>
</body>
</html>
❤️ 二级菜单
📌 二级菜单（Dropdown Menu）
二级菜单是一种常见的 UI 组件，通常用于 导航栏 或 右键菜单，当鼠标悬停或点击一级菜单时，会展开子菜单。
1️⃣ 基本结构
🔹 HTML 结构
<ul class="menu">
<li class="menu-item">
一级菜单 1
<ul class="submenu">
<li>二级菜单 1-1</li>
<li>二级菜单 1-2</li>
<li>二级菜单 1-3</li>
</ul>
</li>
<li class="menu-item">
一级菜单 2
<ul class="submenu">
<li>二级菜单 2-1</li>
<li>二级菜单 2-2</li>
</ul>
</li>
</ul>
2️⃣ CSS 样式
🔹 默认隐藏 .submenu，只有鼠标悬停时才显示
/* 主菜单样式 */
.menu {
list-style: none;
padding: 0;
margin: 0;
background: #007bff;
width: 200px;
}
.menu-item {
position: relative;
padding: 10px;
color: white;
cursor: pointer;
}
/* 二级菜单默认隐藏 */
.submenu {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 100%;
background: #0056b3;
width: 100%;
}
.submenu li {
padding: 10px;
color: white;
cursor: pointer;
}
.submenu li:hover {
background: #003d80;
}
/* 当鼠标悬停在菜单项上时，显示二级菜单 */
.menu-item:hover .submenu {
display: block;
}
📌 效果
- 一级菜单默认显示
- 鼠标悬停
menu-item，二级菜单submenu显示 - 鼠标移开后
submenu重新隐藏
3️⃣ 使用 JavaScript（点击触发）
🔹 如果不想用 hover，而是点击展开菜单，可以用 JS 控制
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', function () {
let submenu = this.querySelector('.submenu');
// 切换二级菜单显示状态
if (submenu.style.display === "block") {
submenu.style.display = "none";
} else {
submenu.style.display = "block";
}
});
});
📌 点击 menu-item，二级菜单 submenu 显示/隐藏
4️⃣ 右键菜单（Context Menu）
🔹 右键点击显示二级菜单
<div class="context-menu">
<ul class="submenu">
<li>选项 1</li>
<li>选项 2</li>
<li>选项 3</li>
</ul>
</div>
.context-menu {
position: absolute;
display: none;
background: #0056b3;
color: white;
padding: 10px;
}
let menu = document.querySelector(".context-menu");
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
menu.style.display = "block";
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
});
document.addEventListener("click", function () {
menu.style.display = "none";
});
📌 效果
- 右键点击 显示菜单
- 点击其他地方 隐藏菜单
🎯 总结
| 方式 | 特点 | 适用场景 |
|---|---|---|
CSS hover | 鼠标悬停时显示二级菜单 | 简单、无 JS |
JS click | 点击展开二级菜单 | 适合移动端/避免误触 |
| 右键菜单 | 右键点击显示 | 自定义上下文菜单 |
🚀 推荐
- PC 端用
hover - 移动端用
click - 右键菜单适用于特殊场景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
/*
* 我们的每一个菜单都是一个div
* 当div具有collapsed这个类时，div就是折叠的状态
* 当div没有这个类是，div就是展开的状态
*/
/*
* 点击菜单，切换菜单的显示状态
*/
//获取所有的class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
//定义一个变量，来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
//为span绑定单击响应函数
for(var i=0 ; i<menuSpan.length ; i++){
menuSpan[i].onclick = function(){
//this代表我当前点击的span
//获取当前span的父元素
var parentDiv = this.parentNode;
//切换菜单的显示状态
toggleMenu(parentDiv);
//判断openDiv和parentDiv是否相同
if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){
//打开菜单以后，应该关闭之前打开的菜单
//切换菜单的显示状态
toggleMenu(openDiv);
}
//修改openDiv为当前打开的菜单
openDiv = parentDiv;
};
}
/*
* 用来切换菜单折叠和显示状态
*/
function toggleMenu(obj){
//在切换类之前，获取元素的高度
var begin = obj.offsetHeight;
//切换parentDiv的显示
toggleClass(obj , "collapsed");
//在切换类之后获取一个高度
var end = obj.offsetHeight;
//动画效果就是将高度从begin向end过渡
//将元素的高度重置为begin
obj.style.height = begin + "px";
//执行动画，从bengin向end过渡
move(obj,"height",end,10,function(){
//动画执行完毕，内联样式已经没有存在的意义了，删除之
obj.style.height = "";
});
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>
❤️ JSON
JSON：JavaScript Object Notation：JS对象表示法- JS中的对象只有JS自己认识，其他的语言都不认识。
- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。
- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。
JSON分类：1.对象 {}；2.数组 []JSON中允许的值：1.字符串；2.数值；3.布尔值；4.null；5.对象；6.数组
🧩 创建JSON对象
var arr ='[1,2,3,"hello",true]';
var obj2 ='{"arr":[1,2,3]}';
var obj ='[{"name":"李白","age":18,"gender":"男"，{"name":"美美"，"age":18,"gender":"女"}]';
🧩 转换
-
JSON对象——>JS对象：将JSON字符串转换为JS中的对象，再JS中，为我们提供了一个工具类，就叫JSON，这个对象 可以帮助我们将JSON转换JS对象，也可以将一个JS对象转换为JSON。JSON.parse()- 可以将JSON字符串转换为JS对象。
- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回。
var obj ='[{"name":"李白","age":18,"gender":"男"},{"name":"美美","age":18,"gender":"女"}]'; var jsObj =JSON.parse(obj); console.log(jsObj); -
JS对象——>JSONJSON.stringify()- 可以将一个JS对象变为JSON字符串。
- 需要一个JS对象作为参数，会返回一个JSON字符串。
var obj3 ={name:"李白",age:18,sex:"男"}; var str =JSON.stringify(obj3); console.log(str);
🧩 eval()
- 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回，但是如果使用
eval()执行的字符串中含有{}，它会将{}当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个()。 eval()这个函数的功能十分强大，可以直接执行一个字符串的JS代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它害具有安全隐患。- 兼容IE7及以下的浏览器——直接引进JSON文件！