js实现警灯 - 橘子超好次

<!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{
        width: 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{
        width: 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{
        width: 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
posted on 2021-04-12 09:27 橘子超好次阅读(235) 评论(0) 收藏举报
刷新页面返回顶部