防抖、防重复提交、loading

Dear 丶 2023-10-14 23:52 73阅读 0赞

<!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>圆弧转动</title>
    </head>
    <style>
        :root {
          
            --color: orange;
            --lineColor: rgba(102, 163, 224, .2);
        }
    
        body {
          
            /* background: #222; */
            overflow: hidden;
        }
    
        section {
          
            position: relative;
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    
        section::before {
          
            content: '';
            position: absolute;
            height: 10px;
            width: 10px;
            border-radius: 100%;
            border-top: 1px solid orange;
            top: 50%;
            left: 50%;
            margin-top: -5px;
            margin-left: -5px;
            animation: turn 1s infinite linear;
            filter:
                drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));
        }
    
        .box,
        .box::after,
        .box::before {
          
            border: 2px solid var(--lineColor);
            border-left: 2px solid var(--color);
            border-right: 2px solid var(--color);
            border-radius: 50%;
        }
    
        .box::after,
        .box::before {
          
            position: absolute;
            content: '';
            left: 50%;
            top: 50%;
        }
    
        .box {
          
            width: 200px;
            height: 200px;
            position: relative;
            animation: turn 1s linear infinite;
            transform-origin: 50% 50%;
        }
    
        .box::before {
          
            width: 180px;
            height: 180px;
            margin-top: -90px;
            margin-left: -90px;
            animation: turn2 1.25s linear infinite;
        }
    
        .box::after {
          
            width: 160px;
            height: 160px;
            margin-top: -80px;
            margin-left: -80px;
            animation: turn 1.5s linear infinite;
        }
    
        .box-circle,
        .box-circle1,
        .box-circle2 {
          
            border: 2px solid var(--color);
            opacity: .9;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: 50% 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            animation: rotate 3s linear infinite;
        }
    
        .box-circle {
          
            animation-delay: 0.2s;
        }
    
        .box-circle1 {
          
            animation-delay: 1.2s;
        }
    
        .box-circle2 {
          
            animation-delay: 2.2s;
        }
    
        @keyframes turn {
          
            100% {
          
                transform: rotateZ(-1turn);
            }
        }
    
        @keyframes turn2 {
          
            100% {
          
                transform: rotateZ(1turn);
            }
        }
    
        @keyframes rotate {
          
            100% {
          
                border: none;
                border-top: 2px solid var(--color);
                border-bottom: 2px solid var(--color);
                transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
            }
        }
    </style>
    
    <body>
        <div id="test" style="display: none;">
            <section>
                <div class="box"></div>
                <div class="box-circle"></div>
                <div class="box-circle1"></div>
                <div class="box-circle2"></div>
            </section>
        </div>
        <button onclick="test()">防止重复提交</button>
        <script>
            function test() {
          
                var test = document.getElementById("test");
                // 设置遮罩样式
                test.style.position = "fixed";
                test.style.top = "0";
                test.style.left = "0";
                test.style.width = "100%";
                test.style.height = "100%";
                test.style.backgroundColor = "rgba(34, 34, 34, 0.5)";
    
                // 显示蒙版
                test.style.display = "block";
                
                // 在1秒后隐藏蒙版
                setTimeout(function () {
          
                    test.style.display = "none";
                }, 1000); // 1000毫秒 = 1秒
            };
    
        </script>
    </body>
    
    </html>

![在这里插入图片描述][c27d0d8dd86a459fa734135eddf9b7ad.png]

[c27d0d8dd86a459fa734135eddf9b7ad.png]: https://img-blog.csdnimg.cn/c27d0d8dd86a459fa734135eddf9b7ad.png