蓝桥杯2022web省赛赛题题解

题解"/>

蓝桥杯2022web省赛赛题题解

蓝桥杯2022web省赛赛题题解-04

完整代码见GitHub：github/Veilhry/lanqiaoweb/tree/master/04

灯的颜色变化

介绍
我们经常会看到各种颜色的灯光，本题我们将实现一个颜色会变化的灯的效果。

初始预览效果如下：

目标
完成js/trafficlights.js 文件中的red、green和trafficlights 函数，达到以下效果:

1. 页面加载完成3秒后灯的颜色变成红色。
2. 在灯的颜色变成红色的3秒后，灯的颜色变成绿色（即6秒后灯光变成绿
   色)。
3. 随后颜色不再变化。
4. 请通过修改display属性来显示不同颜色的灯的图片。

题解

题目描述的十分清除，该题主要就是考察定时器与原生js修改dom元素css样式的知识点。题目中已经完成了不同颜色灯的实现，再js中仅需修改修改display属性来显示不同颜色的灯的图片。分别设置两个定时器，一个红色的三秒钟执行，另一个绿色的六秒钟执行。

// TODO：完善此函数 显示红色颜色的灯
function red() {var defaultlight = document.querySelector('#defaultlight')var redlight = document.querySelector('#redlight')defaultlight.style.display = 'none'redlight.style.display = 'inline-block'
}// TODO：完善此函数  显示绿色颜色的灯
function green() {var redlight = document.querySelector('#redlight')var greenlight = document.querySelector('#greenlight')redlight.style.display = 'none'greenlight.style.display = 'inline-block'
}// TODO：完善此函数
function trafficlights() {setTimeout(red, 3000);setTimeout(green, 6000);}trafficlights();