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

最新推荐文章于 2024-01-18 22:41:29 发布

Veilhry

最新推荐文章于 2024-01-18 22:41:29 发布

阅读量379

点赞数 1

分类专栏：蓝桥杯web 文章标签：蓝桥杯 web

本文链接：https://blog.csdn.net/weixin_46439063/article/details/124126381

版权

蓝桥杯web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

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

灯的颜色变化

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

初始预览效果如下：
在这里插入图片描述

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

页面加载完成3秒后灯的颜色变成红色。
在灯的颜色变成红色的3秒后，灯的颜色变成绿色（即6秒后灯光变成绿
色)。
随后颜色不再变化。
请通过修改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();