<!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>
<style>
.bubble{
width: 150px;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
.light{
width: 40px;
height: 40px;
border-radius: 50%;
opacity: 0.3;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.green{
background-color: green;
}
.active{
opacity: 1;
}
.colbox {
width: 150px;
height: 200px;
background-color: gray;
margin: 0 auto;
}
.rowbox {
width: 500px;
height: 120px;
background-color: gray;
}
.north,.south{
width: 580px;
}
.middle{
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="north">
<div class="bubble bubble-north">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
<div class="colbox"></div>
</div>
<div class="middle">
<div class="west">
<div class="light green"></div>
<div class="light yellow"></div>
<div class="light red"></div>
</div>
<div class="rowbox"></div>
<div class="east">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
</div>
<div class="south">
<div class="colbox"></div>
<div class="bubble bubble-south">
<div class="light green"></div>
<div id="yellow" class="light yellow"></div>
<div class="light red"></div>
</div>
</div>
</div>
</body>
<script>
var northLightList = document.querySelectorAll('.bubble-north div');
var southLightList = document.querySelectorAll('.bubble-south div');
var westLightList = document.querySelectorAll('.west div');
var eastLightList = document.querySelectorAll('.east div');
first();
second();
function first() {
twinkle(westLightList).then(() => {
return twinkle(southLightList);
}).then(() => {
first();
})
}
function second() {
twinkle(eastLightList).then(() => {
return twinkle(northLightList);
}).then(() => {
second();
})
}
function twinkle(arr) {
return new Promise((resolve, reject) => {
arr[0].className = 'light green active'
setTimeout(() => {
arr[0].className = 'light green';
var timer = setInterval(() => {
if(hasClass(arr[1], 'active')){
arr[1].className = 'light yellow';
}else{
arr[1].className = 'light yellow active';
}
}, 200);
setTimeout(() => {
clearInterval(timer);
arr[1].className = 'light yellow';
arr[2].className = 'light red active';
setTimeout(function(){
arr[2].className = 'light red ';
resolve()
}, 2000)
}, 1000)
}, 2000);
})
}
//判断class属性中是否含有某个属性值
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
</script>
</html>
