警灯特效

最新推荐文章于 2023-02-01 16:39:47 发布

原创最新推荐文章于 2023-02-01 16:39:47 发布 · 712 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

gif动态效果

在这里插入图片描述

代码段

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src = jquery1.js></script>
    <style>
        .blue{
            height: 50px;
            width: 40px;
            background-color: blue;
            border-radius:20px 20px 2px 2px ;
        }
        .red{
            height: 50px;
            width: 40px;
            background-color: red;
            border-radius:20px 20px 2px 2px ;
        }
    </style>
</head>
<body>
    <div class="blue"></div><br/>
    <input  type="button" id="open" value="开启"/>
    <input type="button" id="close" value="关闭"/>
    <script type="text/javascript">
        var interval ;

        function open(){
            if(interval != undefined){
                alert("已经启动！")
            }else{
                interval = setInterval(function(){
                    $("div").toggleClass("red");
                },100);
            }
        }
        function close(){
            clearInterval(interval);
            interval = undefined;
        }

        $(function(){
            $("#close").click(function(){
                close()
            });
            $("#open").click(function(){
                open();
            });
        });
    </script>
</body>