第十三届蓝桥杯省赛：灯的颜色变化

灯的颜色变化

介绍

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

在浏览器中预览 index.html 页面效果如下：

目标

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

1. 页面加载完成 3 秒后灯的颜色变成红色。
2. 在灯的颜色变成红色的 3 秒后，灯的颜色变成绿色（即 6 秒后灯光变成绿色）。
3. 随后颜色不再变化。

• 请通过修改 display 属性来显示不同颜色的灯的图片。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

• 请通过修改 display 属性来显示不同颜色的灯的图片，以免造成无法判题通过。
• 请勿修改项目中提供的 id、class、函数名称、已有样式，以免造成无法判题通过。
• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。

 思路及知识点

• async 函数特点：1.返回的是一个Promise对象

                                    2.只有在async函数内部才可以使用await

• await 只能在async函数后面

        await 后面一般只接一个函数

await可以控制异步操作的执行顺序，让异步操作也能想同步操作那样从上到下执行。

否则js会跳过异步操作，去执行后面代码。

• new promise会实例化一个对象 有then（）  catch（）分支
• Promise（）是一个构造函数，它接收一个回调函数作为参数，回调函数又有两个参数：resolve和reject。如果异步调用成功，一定要调用一次resolve（），反之调用reject（）。
• 定时器setTimeout是一个异步任务（或异步操作）而js引擎从上到下执行时，遇到setTimeout（）会直接跳过他，先执行后面的d

       如果希望js引擎碰到setTimeout（）就先把setTimeout（）处理了，在执行后面的，就要借助Promise对象来实现

  代码如下：

// TODO：完善此函数 显示红色颜色的灯
function red() {
    return new Promise((resolve,reject) => {
    //new promise会实例化一个对象
       // 定时器setTimeout是一个异步任务（或异步操作）
       //而js引擎从上到下执行时，遇到setTimeout（）会直接跳过他，先执行后面的d
       //如果希望js引擎碰到setTimeout（）就先把setTimeout（）处理了，在执行后面的，就要借助Promise对象来实现
       //
        
        setTimeout(() => {
            document.querySelector('#defaultlight').style.display = 'none'
            document.querySelector('#redlight').style.display = 'inline-block'
            console.log('red');
            resolve()
        },3000); 
    });
    
}

// red().then(() =>{
//     console.log('redlight');

// })

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    return new Promise((resolve,reject) => {
            
        setTimeout(() => {
            document.querySelector('#redlight').style.display = 'none';
            document.querySelector('#greenlight').style.display = 'inline-block'
            console.log('green');
            resolve()
        },3000); 
        });
}


// TODO：完善此函数
//主函数
//async 函数特点：1.返回的是一个Promise对象
            // 2.只有在async函数内部才可以使用await
//await 只能在async函数后面
//await 后面一般只接一个函数
async function trafficlights() {
    await red()
    await green()
}

trafficlights();

注意：Promise 是用来“处理”异步操作的，并不是来“实现”异步操作的，