当前位置：首页 > news >正文

蓝桥杯 web 灯的颜色变化（Dom操作及样式动态修改、浏览器解析顺序、定时器）

news 2025/7/20 11:49:23

答案：方法1

var green = document.getElementById('greenlight');
var red = document.getElementById('redlight');
var def = document.getElementById('defaultlight');

function redlight(){
    green.style.display = 'none';
    def.style.display = 'none';
    red.style.display ='inline-block'
}

function greenlight(){
   red.style.display = 'none';
    def.style.display = 'none';
    green.style.display ='inline-block'
}

function trafficlights(){
setTimeout(greenlight(), 6000);
setTimeout(redlight(), 3000);
}

trafficlights();

如果希望将变量声明为全局可访问，并在多个函数中复用这些变量，可以通过以下方法实现：

1. 确保变量是全局的

使用 var、let 或 const 在全局作用域中声明变量。
这些变量将在整个 JavaScript 文件中可用。

2. 确保 DOM 元素加载完成

使用 DOMContentLoaded 事件来确保脚本在 HTML 文档完全加载后再执行。
这样可以避免在 DOM 元素尚未加载时尝试获取它们。

答案：方法2

// 声明全局变量
let red, green, def;

// 确保 DOM 已经加载完成
document.addEventListener("DOMContentLoaded", () => {
    // 获取 DOM 元素并赋值给全局变量
    red = document.getElementById('redlight');
    green = document.getElementById('greenlight');
    def = document.getElementById('defaultlight');

    // 初始化交通灯逻辑
    trafficlights();
});

function redLight() {
    green.style.display = 'none';
    def.style.display = 'none';
    red.style.display = 'inline-block';
}

function greenLight() {
    green.style.display = 'inline-block';
    def.style.display = 'none';
    red.style.display = 'none';
}

function trafficlights() {
    setTimeout(redLight, 3000); // 3 秒后亮红灯
    setTimeout(greenLight, 6000); // 6 秒后亮绿灯
}

本题主要考察了以下几个 JavaScript 和 DOM 操作 的核心知识点：

1. DOM 操作

document.getElementById：
- 用于获取 HTML 元素。
- 考察对 DOM 树的理解，以及如何通过 JavaScript 获取特定的 HTML 元素。
操作元素样式：
- 使用 element.style.display 修改元素的显示状态（如 'none' 或 'inline-block'）。
- 考察对 DOM 元素样式的动态修改能力。

2. 执行时机与事件监听

DOMContentLoaded 事件：
- 确保脚本在 HTML 文档完全加载后执行。
- 考察对浏览器解析和执行顺序的理解，以及如何避免因 DOM 元素未加载而导致的错误。
全局变量的赋值时机：
- 在 DOMContentLoaded 回调中为全局变量赋值，确保这些变量引用的是已经加载的 DOM 元素。
- 考察对异步加载和作用域的理解。

3. 函数与模块化设计

函数封装：
- 将逻辑封装到 redLight 和 greenLight 函数中，使代码更清晰、易于维护。
- 考察对函数的基本理解，以及如何将复杂逻辑分解为独立的功能模块。
初始化函数：
- 使用 trafficlights 函数作为入口，控制整个交通灯逻辑。
- 考察对程序初始化流程的设计能力。

4. 定时器与异步编程

setTimeout：
- 用于延迟执行某些操作。
- 考察对异步编程的基本理解，以及如何利用定时器实现时间控制逻辑。
异步执行顺序：
- setTimeout 是异步的，不会阻塞主线程。
- 考察对 JavaScript 单线程模型和事件循环机制的理解。

5. 变量作用域与全局变量

全局变量的声明与使用：
- 使用 let 声明全局变量，并在多个函数之间共享数据。
- 考察对变量作用域的理解，以及如何避免变量污染全局作用域。
变量赋值的时机：
- 在 DOMContentLoaded 中为全局变量赋值，确保它们引用的是有效的 DOM 元素。
- 考察对变量初始化时机的理解。

6. HTML 结构与 CSS 样式

HTML 元素结构：
- 考察对 HTML 元素（如 <div>）的理解，以及如何通过 id 属性标识不同的元素。
CSS 样式控制：
- 使用内联样式（style="..."）定义颜色和大小。
- 考察对 CSS 样式的基本理解，以及如何通过 JavaScript 动态修改样式。

7. 错误处理与调试

潜在错误：null 引用：
- 如果 document.getElementById 没有找到对应的元素，返回值是 null，直接操作 null.style 会导致错误。
- 考察对常见错误的识别和解决能力。
调试技巧：
- 使用 console.log 检查变量是否正确赋值。
- 考察对调试工具的使用能力。