在日常的网页开发中，事件处理和定时器是实现动态交互效果的两大核心功能。无论是用户注册时的倒计时、随机点名功能，还是广告关闭按钮，都离不开这两项技术。本文将通过多个实际案例，带你深入理解JavaScript中的事件监听和定时器使用。 事件监听就像是给网页元素安装了一个"耳朵"，让它能够响应用户的操作。基本语法如下： 下面给大家看一个最简单的点击事件： 这段代码实现了：当用户点击按钮时，弹出提示框。 在下面的例子中，我们可以看到两种绑定事件的方法对比： 传统方法（不推荐）： 现代方法（推荐）： 使用 下面，我们实现一个简单的点击右上角叉号来关闭关闭的功能： 关键点：通过修改元素的 除了点击事件，还有丰富的其他事件类型： JavaScript提供了两种定时器： 下面我们学习间歇函数的基本用法： 每个定时器都会返回一个唯一ID，用于控制定时器： 在 这个案例展示了如何： 在 这个案例的亮点： 通过以上案例，我们学习了JavaScript事件监听和定时器的核心用法。这些技术是构建交互式网页的基石，从简单的按钮点击到复杂的动态效果，都离不开它们的支持。 记住编程最好的学习方式就是实践，尝试修改这些案例中的参数和逻辑，创造出属于自己的交互效果吧！ 互动话题：你在项目中用过最有趣的交互效果是什么？欢迎在评论区分享！从零掌握JavaScript事件与定时器：打造动态交互网页
前言
一、事件监听：让网页"活"起来
1. 什么是事件监听？
元素.addEventListener('事件类型', 事件处理函数)2. 基础事件监听实例
<body>
<button>点击触发</button>
<script>
const btnTest = document.querySelector('button')
btnTest.addEventListener('click',function(){
alert('你点击了按钮，测试成功')
})
</script>
</body>3. 事件监听的优势
btn.onclick = function() { alert(11) }
btn.onclick = function() { alert(22) } // 会覆盖上一个，只能弹出22// 两个都会执行，会先弹出11，再弹出22
btn.addEventListener('click', function() { alert(11) })
btn.addEventListener('click', function() { alert(22) }) addEventListener可以给同一个元素绑定多个同类型事件，而不会相互覆盖。4. 实战：点击关闭广告
<body>
<div class="box">
这是一条广告
<div class="box1">X</div>
</div>
<script>
// 1. 获取事件源（被点击的是小盒子）
const box1 = document.querySelector('.box1')
// 关闭的是大盒子
const box = document.querySelector('.box')
// 2. 事件侦听
// 点击X后box只是隐藏（display = 'none'），并未删除；display属于样式，所以前面要加style
box1.addEventListener('click', function () {
box.style.display = 'none'
})
</script>
</body>
</html>display样式属性为none来隐藏元素。5. 更多事件类型
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter', function () {
console.log(`我如风，不请自来`)
})
// 鼠标离开
div.addEventListener('mouseleave', function () {
console.log(`我如尘，不说再见`)
})
</script>
</body>
</html>二、定时器：掌控时间的魔法
1. 定时器基础
setTimeout()：一次性定时器setInterval()：间歇性定时器
开启定时器：setInterval(函数，时间间隔)
作用：每隔一段时间调用该函数
其中，使时间间隔的单位为ms// 方法1：使用匿名函数
setInterval(function() {
console.log('一秒执行一次')
}, 1000)
// 方法2：使用命名函数
function fn() {
console.log('一秒执行一次')
}
let n = setInterval(fn, 1000) // 注意：函数名后不要加小括号2. 控制定时器
let timerId = setInterval(fn, 1000) // 开启定时器
clearInterval(timerId) // 关闭定时器3. 实战：用户注册倒计时
17-用户注册倒计时.html中，我们实现了一个常见的注册协议倒计时功能：<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎关注公众号「码农自习室」！本公众号专注于编程技术分享与学习交流。用户应遵守平台规定，文明互动，发布内容仅供学习参考，不构成专业建议，我们尊重用户隐私，不会泄露个人信息。另外，我们会保留对不当言论进行处理的权利。感谢您的关注与支持！让我们一起在编程路上共同成长。
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
// 1. 获取元素
const btn = document.querySelector('.btn')
// console.log(btn.innerHTML) button按钮特殊,修改元素内容用btn.innerHTML，而不是用表单获取内容的方法：btn.value
// 2. 倒计时
let i = 5
// 2.1 开启定时器
let n = setInterval(function () {
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n) // 关闭定时器
// 定时器停了，我就可以开按钮
btn.disabled = false
btn.innerHTML = '同意'
}
}, 1000)
</script>
</body>
</html>三、综合实战：随机点名系统
04-随机点名案例.html中，我们结合事件和定时器实现了一个随机点名系统：<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
// 定时器的全局变量
let timerId = 0
// 随机号要全局变量
let random = 0
// 业务1.开始按钮模块
const qs = document.querySelector('.qs')
// 1.1 获取开始按钮对象
const start = document.querySelector('.start')
// 1.2 添加点击事件
start.addEventListener('click', function () {
timerId = setInterval(function () {
// 随机数
random = parseInt(Math.random() * arr.length)
// console.log(arr[random])
qs.innerHTML = arr[random]
}, 35)
// 如果数组里面只有一个值了，还需要抽取吗？ 不需要 让两个按钮禁用就可以
if (arr.length === 1) {
// start.disabled = true
// end.disabled = true
start.disabled = end.disabled = true
}
})
// 2. 关闭按钮模块
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(timerId)
// 结束了，可以删除掉当前抽取的那个数组元素
arr.splice(random, 1)
console.log(arr)
})
</script>
</body>
</html>四、开发技巧与注意事项
const声明DOM元素引用，避免重复查询结语
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
