<!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>light</title>
</head>
<style>
*{
margin: 0;
padding:0
}
.page{
100vw;
height: 100vh;
overflow: hidden;
background: #000;
}
.flex{
display: flex;
align-items: center;
justify-content: center;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#openLight{
100px;
border-radius:10px;
background: #fff;
line-height: 40px;
text-align: center;
margin-top:20px;
cursor: pointer;
}
.home{
padding: 30px 50px;
box-sizing: border-box;
border: 1px solid #eee;
box-shadow: 0 2px 100px rgba(0,0,0,0.2);
background: #fff;
border-radius: 100px;
background:transparent
}
.circle{
56px;
height: 56px;
border-radius: 50%;
margin: 20px;
background: #000;
}
.pink{
background: red;
box-shadow: 5px 8px 25px rgba(255, 255, 255, 0.8)
}
.skyblue{
background: blue;
box-shadow: 5px 8px 25px rgba(255, 255, 255, 0.8)
}
</style>
<body>
<div class="page flex-column">
<div class="home flex">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div id="openLight" onclick="openLight()">开灯</div>
</div>
</body>
<script>
let circles = document.querySelectorAll('.circle')
let flag = true
let arr = [
[1,3,5,7],
[2,4,6,8],
[4,5,1,7],
[5,6,7,8],
[3,4,5,6],
[1,2,7,8],
[3,4,5,6],
[2,3,5,6]
]
// 执行
function lightMethod(params){
circles.forEach(function(ele,index){
if(ele.classList.contains('pink')){
ele.classList.remove('pink')
}
if(ele.classList.contains('skyblue')){
ele.classList.remove('skyblue')
}
let className = params.indexOf(index+1)>-1?'skyblue':'pink'
ele.classList.add(className)
})
}
// 点击开灯
function openLight(){
if(flag){
flag = false
setTimeout(function(){
flag = true
},900)
circles.forEach(function(ele,index){
ele.classList.remove('black')
})
arr.forEach(function(ele,index){
setTimeout(function(){
lightMethod(ele)
// 把灯关了
if(index == 7){
circles.forEach(function(ele,index){
if(ele.classList.contains('pink')){
ele.classList.remove('pink')
}
if(ele.classList.contains('skyblue')){
ele.classList.remove('skyblue')
}
})
}
},index*110)
})
}
}
</script>
</html>
原生JS实现：
链接：https://pan.baidu.com/s/1gRkRbDfxmVxr20gQeKkmGQ
提取码：8dze
vue实现：路由是/light
链接：https://pan.baidu.com/s/1XDfD3bREhZ6Cc2sGLSxnsA
提取码：mkg1