⽤原⽣js实现红绿灯的效果(简单)⽤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(lor == 'red'){
v.style.backgroundColor=lor
}
setTimeout(() => {
v.style.backgroundColor=''
if(lor == 'green'){
v.style.backgroundColor=lor
}
setTimeout(() => {
js制作简单的焦点图效果v.style.backgroundColor=''
if(lor == 'yellow'){
v.style.backgroundColor=lor
}
setTimeout(() => {
v.style.backgroundColor=''
light()
}, 3000);
}, 5000);
}, 10000);
}
light()
})
</script>