1、JS 动画效果：
JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
//*：这是一个通配符选择器，它选择页面上的所有元素。
*{
//将页面上所有元素的margin（外边距）设置为0
margin: 0;
//将页面上所有元素的padding（内边距）设置为0
padding: 0;
}
#box {
width: 200px;
height: 200px;
margin-top: 10px;
background: rgb(43, 221, 255);
position: relative; /* 设置元素的定位方式为相对定位 */
left: -200px;/* 相对于其正常位置向左移动200像素（由于position设置为relative）*/
top: 0;/* 相对于其正常位置在垂直方向上不移动（这里其实可以省略，因为top的默认值就是0）*/
}
//针对ID为box的元素内的所有<span>标签设置样式
#box span {
width: 20px;
background: rgb(255, 119, 157);
/* 设置span元素的定位方式为绝对定位 */
position: absolute;
left: 200px;
top: 75px;
color: #fff;
text-align: center;
/* 当鼠标悬停在span元素上时，显示手形光标，通常用于指示该元素是可点击的 */
cursor: pointer;
/* 设置span元素的内边距，分别为上、右、下、左，即上下各5像素，右边1像素，左边0像素 */
padding: 5px 1px 5px 0;
/* 设置span元素的边框圆角，左上角和右上角为0，右下角和左下角为5像素，这通常用于创建只在一侧有圆角的形状 */
border-radius: 0 5px 5px 0;
}
#box span:hover {
background: rgb(255, 84, 137);
}
</style>
</head>
<body>
<div id="box">
<span id="share">分享</span>
</div>
<script>
window.onload = function () {
//动画
var div = document.getElementById("box");
var timer = null;
//当鼠标移过这个 div 时，它会调用一个名为 startMove 的函数，并传递一个参数 0。
div.onmouseover = function () {
startMove(0);
};
//window.onload 是 JavaScript 中的一个事件，它会在整个页面及其所有依赖资源（如样式表和图片）完成加载后触发
//一个 window.onload 事件只能分配一个函数
//如果你需要为页面加载添加多个处理程序，你可能需要使用其他方法，如 addEventListener
div.onmouseout = function () {
startMove(-200);
};
function startMove(targetPosition) {
clearInterval(timer);//取消由 setInterval() 方法设置的定时器。
var speed = 0;
if (targetPosition < 0) {
speed = -10;
} else {
speed = 10;
}
timer = setInterval(function () {
//检查 div 元素的当前左偏移量（offsetLeft）是否等于目标位置（targetPosition）。
if (div.offsetLeft == targetPosition) {
如果 div 的 offsetLeft 等于 targetPosition，说明元素已经移动到了目标位置，于是调用 clearInterval(timer) 来取消定时器，元素就不会继续移动
clearInterval(timer);
} else {
//更新元素的左偏移量。 speed，表示每次移动的距离（以像素为单位）
//将 div 的左偏移量增加 speed 像素。
div.style.left = div.offsetLeft + speed + 'px';
}
}, 17);
//17毫秒的间隔是为了接近每秒60帧的动画效果，但实际的帧率可能会受到浏览器性能和其他因素的影响。
//大多数显示器的刷新率为 60HZ，为了实现更加平滑的动画效果，使用定时器的最佳循环间隔约为 17ms。
}
};
</script>
</body>
</html>2、JS 调试（Debug）：
（1）控制台
（2）调试代码：
使用 console.log()、document.write()、alert() 等方法来打印程序中各个变量、对象、表达式的值，以确保程序每个阶段的运行结果都是正确的，推荐使用 console.log()；
不会影响代码的运行；
为了代码更加整洁，在调试完程序后我们需要手动清理干净。
（3）断点调试：
1）打开浏览器内置的开发者工具（按 F12 或者单击鼠标右键，在弹出的菜单中选择“检查”），然后在找到并选择“Sources”：
2）工具的左侧找到要调试的文件并单击打开该文件：
3）打断点：
单击要调试代码前面的行号即可，若行号被标记为蓝色，则说明已经成功打了断点。
4）断点调试：
刷新页面即可进入调试模式，代码执行到断点的位置会暂停，此时我们可以点击页面中的箭头会按 F8 来使代码继续执行到下个断点。
调试过程中，会在调试工具的最右侧的 Scope 栏显示一些数据。此外，还可以在最右侧的 Watch 栏中录入要调试的变量名，这样在调试过程中就能实时看到代码运行中变量的变化。
5）逐语句执行：
点击下图所示的按钮，或者按 F10 即可。
6）debugger关键字：
也可以使用 debugger 关键字在代码中设置断点（类似于 PHP 中的 die 和 exit），效果与在调试工具中设置断点是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="box"></div>
<script>
var x = 15 * 5;
debugger;
document.getElementById('box').innerHTML = x;
</script>
</body>
</html>运行上面的代码，浏览器会自动进入调试模式，并在执行到 debugger 关键字时暂停。
暂时记录到这里，明天继续学习。
学习文章链接： https://blog.csdn.net/m0_62617719/article/details/127564745
------------------------------------------------
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_62617719/article/details/127564745
