如何使用js实现交通红绿灯

最新推荐文章于 2024-01-04 21:09:30 发布

小灬du

最新推荐文章于 2024-01-04 21:09:30 发布

阅读量616

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/dmx1521856051/article/details/125502837

版权

1.话不多说，直接上代码

<!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>
    <div id="light">
        <span></span>
    </div>
</body>
<script>
    const lights = [
        {
            color: 'red', delay: '5000',
            color: 'yellow', delay: '2000',
            color: 'green', delay: '5000',
            color: 'balck', delay: '5000',
        }
    ]
    const box = document.getElementById('light')
    const changeLight = () => {
        box.style.background = 'red'
        console.log('red11');
        setTimeout(() => {
            box.style.background = 'yellow'
            console.log('yellow');
            setTimeout(() => {
                box.style.background = 'green'
                console.log('green');
                setTimeout(() => {
                    changeLight()
                }, 5000)
            }, 2000)
        }, 5000)
    }
    changeLight()
</script>

</html>