实现效果如图
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background:#1abc9c;
}
.box{
height: 165px;
width: 70px;
margin: 300px auto;
background-color: #2c3e50;
border-radius: 50px;
padding: 15px 0px;
}
.around{
width: 40px;
height: 40px;
background:rgba(0,0,0,0.3);
border-radius: 50%;
margin: 10px 0px 0px 14px;
position: relative;
}
.around::after {
border-right: 4px solid rgba(255, 255, 255, 0.6);
border-radius: 100%;
content: ' ';
position: absolute;
top: 5px;
left: 0px;
width: 30px;
height: 30px;
}
.red{
background-color: rgba(206,25,28,1.00);
box-shadow: 0px 0px 20px 5px rgba(206,25,28,1.00);
}
.yellow{
background-color: rgba(218,201,10,1.00);
box-shadow: 0px 0px 20px 5px rgba(218,201,10,1.00);
}
.green{
background-color: rgba(0,197,56,1.00);
box-shadow: 0px 0px 20px 5px rgba(0,197,56,1.00);
}
</style>
</head>
<body>
<div class="box">
<div class="around red" color="red"></div>
<div class="around" color="yellow"></div>
<div class="around" color="green"></div>
</div>
<script>
const arounds=document.querySelectorAll('.around')
//querySelector类选择器 const保留字
let index=0;
setInterval(()=>{
changeLight();
},1000);
//setInterval（）计时器 changeLight()1000毫秒改变一次
function changeLight(){
arounds[index].className='around';
//around赋值于arounds[index]
index++;
if(index>2){
index=0;
}
//如果index小于2，index=0
const i=arounds[index]
i.classList.add(i.getAttribute('color'));
}
</script>
</body>
</html>
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
