使用前端知识实现红绿灯

    <style>
        #container {
            margin-top: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        #app {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            border-radius: 50%;
        }
    </style>
    <div id="container">
        <div id="app"></div>
    </div>
    <script>
        window.onload = () => {
            const sleep = (duration) => new Promise((resolve, reject) => (
                setTimeout(resolve, duration || 0)
            ));
 
            async function changeColor(dom, option) {
                const { value, wait } = option || {};
                dom.style.backgroundColor = value;
                await sleep(wait)
            }
 
            async function main(dom, colors) {
                const { RED, GREEN, YELLOW } = colors || {};
                while (dom && true) {
                    await changeColor(dom, RED);
                    await changeColor(dom, GREEN);
                    await changeColor(dom, YELLOW);
                }
            }
 
            //  start
            const app = document.getElementById('app');
            const colors = {
                RED: { value: 'red', wait: 3000 },
                GREEN: { value: 'green', wait: 2000 },
                YELLOW: { value: 'yellow', wait: 1000 }
            }
            main(app, colors);
        }
    </script>

tips

 如果还不清楚或者想交个朋友的同学可以微信联系我：qq981145483（备注:csdn fe）