JavaScript（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_88462732/article/details/145371990

一、间歇函数、用户倒计时、轮播图定时版

（一）间歇函数

1.间歇函数 setInterval() ： setInterval() 是JavaScript中的一个内置函数，用于按照指定的时间间隔（以毫秒为单位）重复执行一个函数。基本语法为 setInterval(callback, delay) ，其中 callback 是要重复执行的函数， delay 是每次执行之间的时间间隔。例如：

javascript
  
function printHello() {
  console.log('Hello');
}
// 每2秒（2000毫秒）打印一次'Hello'
setInterval(printHello, 2000);

2.返回值： setInterval() 函数会返回一个唯一的定时器ID，这个ID是一个数值，可用于后续清除定时器。例如：

javascript
  
const timerId = setInterval(() => {
  console.log('Interval running');
}, 1000);

3.清除间歇函数 clearInterval() ：使用 clearInterval() 函数可以停止间歇函数的执行。它接受一个定时器ID作为参数，该ID就是 setInterval() 返回的值。比如：

javascript
  
const timerId = setInterval(() => {
  console.log('Interval running');
}, 1000);
// 5秒后清除定时器
setTimeout(() => {
  clearInterval(timerId);
}, 5000);

（二）用户倒计时

1.实现原理：利用 setInterval() 定时器，不断获取当前时间与目标时间的差值，将差值转换为天、时、分、秒的格式，再实时更新到HTML页面中。

2.核心代码步骤

- 获取目标时间戳：使用 new Date() 获取当前时间，通过设置目标日期和时间，得到目标时间的时间戳， const targetTime = new Date('2024-12-31 23:59:59').getTime(); 。

- 定时器函数：在 setInterval() 的回调函数内，获取当前时间戳 const now = new Date().getTime(); ，计算时间差值 let diff = targetTime - now; 。

- 时间转换：将时间差值转换为天、时、分、秒，

let days = Math.floor(diff / (1000 * 60 * 60 * 24)); let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); let seconds = [Math](coco://sendMessage?ext=%7B%22s%24wiki_link%22%3A%22https%3A%2F%2Fm.baike.com%2Fwikiid%2F7179099442090983476%22%7D&msg=Math).floor((diff % (1000 * 60)) / 1000); 。

- 更新页面：借助 document.querySelector() 获取HTML元素，

如 const countdownElement = document.querySelector('.countdown'); ，然后使用 innerHTML 将计算好的倒计时时间插入页面， countdownElement.innerHTML = ${days}天 ${hours}时 ${minutes}分 ${seconds}秒 ; 。

（三）轮播图定时版

1.核心原理：运用 setInterval() 定时器，按照设定时间间隔切换轮播图图片。

2. 实现步骤：获取轮播图元素和图片数量，设置定时器改变图片的 display 属性或 left 等定位属性，实现图片切换效果，可添加过渡动画增强视觉体验。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图定时版示例</title>
    <style>
        /* 轮播图容器样式 */
        #carousel {
            width: 600px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        /* 图片列表样式 */
        #carousel img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        /* 当前显示图片的样式 */
        #carousel img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <img src="image1.jpg" alt="图片1" class="active">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
    </div>
    <script>
        // 获取所有图片元素
        const images = document.querySelectorAll('#carousel img');
        let currentIndex = 0;

        // 定时切换图片的函数
        function changeImage() {
            // 隐藏当前显示的图片
            images[currentIndex].classList.remove('active');
            // 计算下一张图片的索引
            currentIndex = (currentIndex + 1) % images.length;
            // 显示下一张图片
            images[currentIndex].classList.add('active');
        }

        // 每隔3秒切换一次图片
        setInterval(changeImage, 3000);
    </script>
</body>
</html>

二、事件监听及案例、随机点名案例、事件监听版本及鼠标事件

（一）事件监听及案例

1. 事件监听基础：使用 addEventListener() 方法为DOM元素绑定事件处理函数，常见事件如 click （点击）、 load （页面加载完成）等。

2.案例要点：通过监听按钮点击事件，控制元素显示隐藏或执行特定逻辑；监听页面加载事件，在页面完全加载后执行初始化操作。

（二）随机点名案例

1. 关键技术：结合数组存储学生名单，利用 Math.random() 生成随机数，随机选取数组中的名字实现点名功能。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
</head>
<body>
    <button id="randomCall">随机点名</button>
    <div id="result"></div>
    <script src="script.js">
// 学生名单
const students = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"];

// 获取按钮和结果显示区域
const randomCallButton = document.getElementById('randomCall');
const resultDiv = document.getElementById('result');

// 为按钮添加点击事件监听器
randomCallButton.addEventListener('click', function() {
    // 生成随机索引
    const randomIndex = Math.floor(Math.random() * students.length);
    // 获取随机学生
    const randomStudent = students[randomIndex];
    // 显示随机学生
    resultDiv.textContent = `被点名的学生是：${randomStudent}`;
});</script>
<style>
.body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}
.result {
    margin-top: 20px;
    font-size: 24px;
    color: #333;
}
</style>
</body>
</html>

2.实现流程：将学生名字存入数组，点击按钮时，生成随机索引，根据索引从数组获取名字并显示在页面上。

（三）事件监听版本及鼠标事件

1.事件监听版本差异：对比传统事件绑定方式， addEventListener() 可绑定多个同类型事件处理函数，且有更优的兼容性和灵活性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件示例</title>
</head>
<body>
    <button id="clickMe">点击我</button>
    <div id="hoverMe">悬停我</div>
    <div id="result"></div>
    <script src="script.js">
// 获取按钮和显示区域
const clickMeButton = document.getElementById('clickMe');
const hoverMeDiv = document.getElementById('hoverMe');
const resultDiv = document.getElementById('result');

// 为按钮添加点击事件监听器
clickMeButton.addEventListener('click', function() {
    resultDiv.textContent = '按钮被点击了！';
});

// 为div添加鼠标悬停事件监听器
hoverMeDiv.addEventListener('mouseover', function() {
    resultDiv.textContent = '鼠标悬停在div上！';
});

// 为div添加鼠标离开事件监听器
hoverMeDiv.addEventListener('mouseout', function() {
    resultDiv.textContent = '鼠标离开了div！';
});
</script>
<style>
.body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}
.hoverMe {
    margin-top: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}
.result {
    margin-top: 20px;
    font-size: 24px;
    color: #333;
}
</style>
</body>
</html>

2.鼠标事件：介绍 mousedown （鼠标按下）、 mouseup （鼠标抬起）、 mousemove （鼠标移动）等事件，常用于实现交互效果，如拖拽功能。

三、轮播图完整版、焦点事件及小米搜索框案例、键盘事件及发布评论案例

（一）轮播图完整版

1.功能扩展：在上一版基础上，增加左右箭头点击切换、小圆点指示和自动切换等功能。

2. 技术实现：监听箭头点击事件切换图片；通过创建小圆点元素并绑定点击事件，实现对应图片切换；利用定时器实现自动切换，并处理切换时的边界情况和过渡效果。

（二）焦点事件及小米搜索框案例

1. 焦点事件： focus （元素获得焦点）和 blur （元素失去焦点）事件，常用于表单元素交互。

2.案例应用：在小米搜索框案例中，获取焦点时清空默认提示文字，失去焦点时若未输入内容则恢复提示文字，提升用户输入体验。

（三）键盘事件及发布评论案例

1. 键盘事件类型： keydown （键盘按键按下）、 keyup （键盘按键抬起），可获取按键信息。

2.案例实践：在发布评论案例中，监听 keydown 事件，判断是否按下回车键，按下则触发评论发布逻辑，实现便捷的评论发布操作

四、事件对象event及常见属性、回车发布评论案例、环境对象this及回调函数

（一）事件对象event及常见属性

1.事件对象概念：当事件发生时，会产生一个事件对象 event ，它包含了与该事件相关的各种信息。

2.常见属性： target 属性可获取触发事件的目标元素； type 属性用于确定事件的类型，如 click 、 keydown 等； key 属性在键盘事件中能获取按下的键值，方便判断用户操作。

（二）回车发布评论案例

1. 案例原理：利用键盘事件中的 keydown 事件，检测用户是否按下回车键（ keyCode 为13或 key 为 Enter ）。

2.实现要点：获取评论输入框和发布按钮元素，为输入框绑定 keydown 事件处理函数，在函数内判断按键，若为回车键则触发与点击发布按钮相同的评论发布逻辑。

（三）环境对象this及回调函数

1. this指向：在事件处理函数中， this 通常指向触发事件的DOM元素。但在回调函数中， this 的指向可能因函数定义和调用方式而异。

2. 解决方法：可使用箭头函数保留外部 this 的指向，或者通过 bind() 方法手动绑定 this 指向，确保在回调函数中能正确访问所需的对象和属性。

五、tab切换、表单全选反选案例

（一）tab切换

1.实现思路：通过点击不同的tab选项，切换显示对应的内容区域。

2. 关键步骤：获取tab选项和内容区域元素，为tab选项绑定 click 事件处理函数。在函数中，根据点击的tab索引，控制对应内容区域的显示与隐藏，通常通过修改元素的 display 或 classList 属性实现。

（二）表单全选反选案例

1. 功能实现：点击全选按钮，可一次性选中所有表单中的复选框；再次点击则取消全选。

2.代码逻辑：获取全选按钮和所有复选框元素，为全选按钮绑定 click 事件处理函数。在函数中，遍历复选框数组，根据全选按钮的选中状态设置每个复选框的选中状态。

（三）事件流、捕获与冒泡及阻止冒泡

1.事件流：包括事件捕获阶段和事件冒泡阶段。事件捕获从文档根节点向目标元素传播，事件冒泡则从目标元素向文档根节点传播。

2. 阻止冒泡：在事件处理函数中，使用 event.stopPropagation() 方法可阻止事件冒泡，防止事件向上级元素传播，避免不必要的触发。

六、事件解绑、mouseover和mouseenter区别、事件委托、事件委托版本tab栏切换

（一）事件解绑

1. 事件解绑：使用 removeEventListener() 方法可解绑已绑定的事件处理函数，需要传入与绑定事件时相同的参数，包括事件类型、处理函数和是否使用捕获阶段（可选）。

2.事件区别： mouseover 事件在鼠标进入元素及其子元素时都会触发； mouseenter 事件仅在鼠标进入元素本身时触发，不会对子元素触发，可根据需求选择合适的事件实现交互效果。

（二）事件委托

1.原理：将事件处理函数绑定到父元素上，利用事件冒泡机制，当子元素触发事件时，父元素可以接收到该事件，并根据 event.target 判断实际触发事件的子元素，从而执行相应的操作。

2.优势：减少事件绑定数量，提高性能；动态添加的子元素也能自动拥有相同的事件处理逻辑，无需重复绑定事件。

（三）事件委托版本tab栏切换

1.原理运用：把tab切换的点击事件绑定在父元素上，借助事件冒泡，依据 event.target 确定实际触发的tab选项。这样能减少事件绑定数量，优化性能，且对动态添加的tab选项同样适用。

2. 实现步骤：获取父元素，绑定点击事件。在处理函数里，用 event.target 判断触发元素，切换对应内容显示。比如，给包含tab选项的 ul 绑定点击事件，点击后根据 event.target 的 id 或 class 找到对应内容并切换。

七、阻止元素默认行为

1. 默认行为说明：像链接点击跳转、表单提交刷新页面等都是元素的默认行为。在一些场景下，需要阻止这些默认行为以实现特定交互。

2.方法使用：在事件处理函数中，调用 event.preventDefault() 即可。例如，阻止链接默认跳转，可在链接的点击事件处理函数里添加该方法，使点击链接后不发生页面跳转。

八、页面加载事件和页面滚动事件

1. 页面加载事件： load 事件在页面所有资源（如图片、脚本、样式表等）都加载完成后触发。通常用于页面初始化操作，比如给图片添加点击放大效果，可在 load 事件处理函数中绑定点击事件。

2. 页面滚动事件： scroll 事件在页面滚动时触发。通过 window.pageYOffset 或 document.documentElement.scrollTop 获取页面垂直滚动距离，常用于实现吸顶导航、返回顶部按钮显示隐藏等效果。