实现红绿灯(Promise)

最新推荐文章于 2024-10-08 14:06:46 发布

aoliaoliaoli

最新推荐文章于 2024-10-08 14:06:46 发布

阅读量549

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/aoliaoliaoli/article/details/127067558

本文介绍了一个使用HTML和JavaScript实现的交通信号灯循环切换程序。通过异步函数和Promise，实现了红、绿、黄三种信号灯的自动转换，并保持了各状态间的精确延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // function red(){
    //     return new Promise((resolve)=>{
    //         console.log("红灯,3秒后变绿灯");
    //         setTimeout(()=>{
    //             const greenPromise=green();
    //             resolve(greenPromise)
    //         },3000)
    //     })
    // }
    // function green(){
    //     return new Promise((resolve)=>{
    //         console.log("绿灯,5秒后变黄灯");
    //         setTimeout(() => {
    //             const yellowPromise=yellow();
    //             resolve(yellowPromise)
    //         }, 5000);
    //     })
    // }
    // function yellow(){
    //     return new Promise((resolve)=>{
    //         console.log("黄灯,2秒后变红灯");
    //         setTimeout(()=>{
    //             const redPromise=red();
    //             resolve(redPromise)
    //         },2000)
    //     })
    // }
    // red();
    //封装方法
    function timer(color,delay,nextColor){
        return new Promise((resolve)=>{
            console.log(`${color}灯,${delay}秒后变${nextColor}灯`);
            setTimeout(()=>{
                resolve()
            },delay*1000)
        })
    }
    async function light(){
        await timer("红",3,"绿");
        await timer("绿",5,"黄");
        await timer("黄",2,"红");
        await light();//执行完之后再调用自身 以此循环
    }
    light();
</script>
</html>