零基础快速入门前端蓝桥杯真题速刷2451.灯的颜色变化(助力保底拿奖不捐款)深入掌握 DOM 选择器与定时器：从交通灯案例到蓝桥杯 Web 考点全解 将原题目扩展成交通灯

2451.灯的颜色变化深入掌握 DOM 选择器与定时器从交通灯案例到蓝桥杯 Web 考点全解在蓝桥杯 Web 方向竞赛中DOM 操作与定时器控制是高频考点。本文以一个经典的交通灯控制案例为切入点全面解析document.querySelector的 ID/Class 选择语法、style.display显隐控制、setInterval与setTimeout的核心区别并提供记忆技巧、对比表格及拓展真题实战。 案例原始代码回顾// 显示红色灯 function red() { document.querySelector(#redlight).style.display inline-block; document.querySelector(#greenlight).style.display none; document.querySelector(#defaultlight).style.display none; } // 显示绿色灯 function green() { document.querySelector(#redlight).style.display none; document.querySelector(#greenlight).style.display inline-block; document.querySelector(#defaultlight).style.display none; } // 交通灯计时控制3秒红6秒绿后停止 function trafficlights() { var number 0; var timer setInterval(() { number; if (number 3) { // 3秒后亮红灯 red(); } else if (number 6) { // 6秒后亮绿灯并停止 green(); clearInterval(timer); } }, 1000); }一、DOM 选择器核心语法querySelector与 ID/Class 实战1.1document.querySelector基础querySelector接受一个CSS 选择器字符串返回文档中匹配的第一个元素。若需所有匹配元素使用querySelectorAll。// 通过 ID 选择必须加 # const redLight document.querySelector(#redlight); // 推荐 // 通过 Class 选择必须加 . const greenLight document.querySelector(.greenlight); // 通过标签名选择 const div document.querySelector(div); // 通过属性选择 const input document.querySelector([typebutton]);1.2 ID 与 Class 获取方式的语法差异对比方法语法示例返回类型匹配规则性能querySelector(#id)document.querySelector(#box)单个元素或nullCSS 选择器支持任意复杂选择器中等getElementById(id)document.getElementById(box)单个元素或null仅通过 ID不加 #最快querySelector(.class)document.querySelector(.item)单个元素或null返回第一个匹配的 class中等getElementsByClassName(class)document.getElementsByClassName(item)HTMLCollection动态集合通过 class 名返回所有匹配元素较快getElementsByTagName(div)document.getElementsByTagName(div)HTMLCollection通过标签名较快1.3 记忆技巧 #像一把钩子钩住唯一的 ID.像一粒种子撒向多个 class。口诀ID 用井号#Class 用点号.记忆表格选择目标querySelector 写法传统方法写法记忆点ID#myIdgetElementById(myId)ID 就像身份证号唯一且带#Class.myClassgetElementsByClassName(myClass)Class 就像班级很多人用.二、style.display控制元素显隐2.1 常用属性值详解// 隐藏元素不占位 element.style.display none; // 显示为块级元素独占一行 element.style.display block; // 显示为行内块不独占一行可设宽高 element.style.display inline-block; // 恢复默认通常为 block 或 inline element.style.display ;2.2 各属性值对比表display 值是否可见是否占位典型场景none❌ 不可见❌ 不占位彻底隐藏元素如同不存在block✅ 可见✅ 占位块级元素如div、pinline✅ 可见✅ 占位行内元素无法设置宽高inline-block✅ 可见✅ 占位行内但可设宽高交通灯常用注意交通灯案例中使用inline-block使三个灯水平排列且可控制尺寸用none切换显示。三、定时器对决setIntervalvssetTimeout3.1 基本语法与停止方法// setTimeout延迟执行一次 let timer1 setTimeout(() { console.log(只执行一次); }, 1000); clearTimeout(timer1); // 取消执行 // setInterval间隔重复执行 let timer2 setInterval(() { console.log(每秒一次); }, 1000); clearInterval(timer2); // 停止循环3.2 核心区别对比表对比维度setIntervalsetTimeout执行次数无限次直到被清除仅一次间隔控制固定间隔重复调用延迟指定时间后调用一次停止方法clearInterval(timerId)clearTimeout(timerId)典型场景轮播图、倒计时、实时刷新延迟加载、动画暂停、防抖累加偏移问题可能存在任务执行时间 间隔无仅一次递归模拟替代可被递归setTimeout替代更精确无法直接替代setInterval3.3 记忆技巧 Interval → 中间有间隔重复Timeout → 时间到一次口诀Interval 反复横跳Timeout 一次就好Clear 记得要调用否则内存会爆掉。3.4 递归setTimeout实现精确循环蓝桥杯推荐写法let count 0; function loop() { console.log(执行第, count, 次); setTimeout(loop, 1000); // 递归调用确保上一次执行完再开始下一次 } setTimeout(loop, 1000);优势避免setInterval因代码执行耗时导致的间隔偏差更可控。四、交通灯案例深度分析与拓展红 → 黄 → 绿 循环4.1 原代码的优缺点✅ 优点逻辑清晰使用setInterval简单实现了顺序切换。❌ 缺点只执行一轮红3秒绿3秒后停止不满足实际交通灯循环需求。没有黄灯过渡与现实不符。未处理初始状态默认灯显示。4.2 蓝桥杯风格完整实现红→黄→绿循环递归setTimeout!DOCTYPE html html head style .traffic-light { display: inline-block; width: 80px; height: 80px; border-radius: 50%; margin: 10px; background-color: gray; } #redlight { background-color: red; } #yellowlight { background-color: yellow; } #greenlight { background-color: green; } .light-container { text-align: center; margin-top: 50px; } /style /head body div classlight-container div idredlight classtraffic-light/div div idyellowlight classtraffic-light/div div idgreenlight classtraffic-light/div /div button idstartBtn启动交通灯/button script // 获取灯元素 const redLight document.querySelector(#redlight); const yellowLight document.querySelector(#yellowlight); const greenLight document.querySelector(#greenlight); // 通用显隐函数 function showLight(lightToShow) { // 先将所有灯隐藏none 不占位 redLight.style.display none; yellowLight.style.display none; greenLight.style.display none; // 显示目标灯inline-block 保持占位和大小 lightToShow.style.display inline-block; } // 状态枚举 const STATES { RED: red, YELLOW: yellow, GREEN: green }; let currentState STATES.RED; let timerId null; // 核心循环函数递归setTimeout function runTrafficLight() { switch (currentState) { case STATES.RED: showLight(redLight); currentState STATES.YELLOW; timerId setTimeout(runTrafficLight, 3000); // 红灯亮3秒 break; case STATES.YELLOW: showLight(yellowLight); currentState STATES.GREEN; timerId setTimeout(runTrafficLight, 2000); // 黄灯亮2秒 break; case STATES.GREEN: showLight(greenLight); currentState STATES.RED; timerId setTimeout(runTrafficLight, 4000); // 绿灯亮4秒 break; default: break; } } // 启动交通灯先清除旧定时器 function startTrafficLight() { if (timerId) { clearTimeout(timerId); timerId null; } currentState STATES.RED; // 重置为红灯 runTrafficLight(); // 开始循环 } // 绑定按钮事件 document.querySelector(#startBtn).addEventListener(click, startTrafficLight); // 页面初始化默认显示红灯可选 startTrafficLight(); /script /body /html代码注释重点使用setTimeout递归替代setInterval避免循环内任务阻塞造成的延迟累积。通过switch状态机管理灯色顺序易于扩展。每次切换前先clearTimeout保证唯一定时器防止内存泄漏。五、蓝桥杯 Web 考点映射与真题技巧5.1 常见考点考点类别典型题目要求本题对应技能DOM 元素获取使用querySelector或getElementById获取元素获取交通灯元素并修改样式定时器控制实现自动轮播、倒计时或动画控制灯色切换时间事件绑定点击按钮启动/停止定时器添加开始按钮事件样式动态修改改变元素display、backgroundColor等属性切换灯可见性及颜色防止内存泄漏页面关闭或组件销毁时清除定时器使用clearTimeout/clearInterval性能优化用递归setTimeout代替setInterval避免间隔累积偏移5.2 真题变形示例题目设计一个红绿灯红灯亮 5 秒 → 黄灯亮 2 秒 → 绿灯亮 5 秒并无限循环。要求提供开始和暂停按钮暂停时清除定时器恢复后继续当前状态。解决方案思路记录当前状态和剩余时间。使用setTimeout递归 一个全局标志控制暂停恢复。暂停时clearTimeout并保存剩余时间恢复时重新设置定时器。六、知识点速查汇总表6.1 DOM 选择器总结需求推荐方法示例获取单个 ID 元素querySelector(#id)或getElementByIddocument.querySelector(#box)获取单个 Class 元素querySelector(.class)document.querySelector(.item)获取所有 Class 元素querySelectorAll(.class)document.querySelectorAll(.item)获取动态集合实时getElementsByClassName/getElementsByTagNamedocument.getElementsByClassName(item)6.2 定时器选择指南场景选择方案理由延迟执行一次setTimeout简单可靠固定间隔重复无阻塞风险setInterval代码简洁固定间隔重复任务耗时可能间隔递归setTimeout避免任务重叠和偏移需要暂停恢复的循环动画递归setTimeout 状态保存精确控制时间点6.3display属性速查值特性典型应用none隐藏不占位相当于元素消失模态框关闭、选项卡切换block块级独占一行可设宽高布局容器divinline行内不可设宽高多个并排文本修饰spaninline-block行内块不独占可设宽高导航栏、交通灯图标七、总结通过交通灯这个看似简单的案例我们串联了DOM 选择器尤其是 ID 与 Class 的querySelector语法、样式显隐控制以及JavaScript 定时器三大核心考点。掌握这些知识不仅能够应对蓝桥杯 Web 方向的常见操作题更能为复杂动画、轮播图、倒计时等实战功能打下坚实基础。最后送你一句记忆口诀ID 前带 #Class 点开花显隐 displaynone 与块家定时器分两家Interval 重复 Timeout 一下递归替代防偏差蓝桥杯上笑哈哈。 现在去点亮你自己的交通灯吧希望你的人生一路绿灯加油