Js 闪烁警灯

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

zs1206986774

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

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zs1206986774/article/details/102730317

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js闪烁警灯

代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.js"></script>
<style>
 .blue{
        height: 50px;
        width: 40px;
        background: blue;
        border-radius: 20px 20px 2px 2px;
        margin-left: 190px;
    }

 .red{height: 50px;
        width: 40px;
        background: red;
        border-radius: 20px 20px 2px 2px;
        
    }
</style>
</head>
<body>
<div class="blue"></div>
<img src="Lesson/img/jc.png">
<input type="button" id="close" 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>
</html>