1问题
第十三届蓝桥杯Web前端应用真题中的第四题《灯的颜色变化》要求通过完善js文件中的red、green、trafficlights函数，从而实现一个颜色会变的灯的效果，下面提供小编的做题思路。
2方法
2.1考点解析
本题考点:封装函数、setInterval()方法的使用、js操作dom。
相关用法：
| setInterval()方法 | 按照指定的周期（以毫秒计）来调用函数或计算表达式 |
| Function语句 | 声明一个函数，函数声明后，我们可以在需要的时候调用 |
| querySelector() 方法 | 返回文档中匹配指定 CSS 选择器的一个元素 |
( 提示:1000 毫秒= 1 秒)
2.2解题思路
1.运用querySelector()方法,选择默认灯泡，将其样式设置为none，并为选中红色灯泡设置inline-block
2.根据要求，在灯泡变红三秒后变成绿色，即在对green函数进行设置时将原来的红色灯泡设置样式none，并添加绿色灯泡，为其设置inline-block。
3.灯泡首先在3秒后变红，接着变成绿色最后保持不变，要实现此功能需要为其添加计时器，即运用setInterval（function({})）方法
4．最终效果图展示
通过实验、实践等证明提出的方法是有效的，是能够解决开头提出的问题。
代码清单 1
| // TODO：完善此函数 显示红色颜色的灯 function red() { // 页面完成加载3秒后灯的颜色变成红色 document.querySelector('#defaultlight').style.display = 'none' document.querySelector('#redlight').style.display = 'inline-block' } // TODO：完善此函数 显示绿色颜色的灯 function green() { // 在灯变成红色3秒后，灯的颜色变成绿色 document.querySelector('#defaultlight').style.display = 'none' document.querySelector('#redlight').style.display = 'none' document.querySelector('#greenlight').style.display = 'inline-block' } // TODO：完善此函数(定时器) function light() { setInterval(function(){ red() setInterval(function(){ green() },3000) },3000) } light(); |
3结语
针对蓝桥杯真题中《灯的颜色变化》问题，提出运用封装函数、setInterval()方法、js操作dom方法，通过实验，证明该方法是有效的，本文的方法对于定时器的设计较为单一，未来可以继续研究与定时器相关问题，且通过巩固setInterval()方法，进一步开始对进度条进行学习。
