用原生js实现红绿灯的效果（简单）

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

「已注销」

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

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_65433878/article/details/122512596

版权

本文介绍如何利用原生JavaScript结合HTML5自定义属性，通过动态改变DOM元素的背景颜色，来模拟红绿灯的变化效果。

摘要由CSDN通过智能技术生成

用js实现红绿灯效果，其中使用到了H5的自定义属性，通过对DOM的操作实现背景颜色的切换。

    <div id="box" class="box">
        <div data-color="red"></div>
        <div data-color="green"></div>
        <div data-color="yellow"></div>
    </div>
    <script>
        let box = document.querySelector('#box')
        let divs = document.querySelectorAll('#box div')
            divs.forEach(function(v){
                function light(){
                    if(v.dataset.color == 'red'){
                        v.style.backgroundColor=v.dataset.color
                    }
                    setTimeout(() => {
                        v.style.backgroundColor=''
                        if(v.dataset.color == 'green'){
                            v.style.backgroundColor=v.dataset.col