js简单事件---模拟警灯

最新推荐文章于 2019-10-25 12:57:42 发布

原创最新推荐文章于 2019-10-25 12:57:42 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的警灯模拟器。通过定时器和DOM操作，实现了警灯颜色的自动切换，包括开启和关闭功能。代码详细展示了如何在网页上创建一个蓝色的警灯，并通过按钮控制其红蓝颜色的交替闪烁。

js简单事件—模拟警灯事件

首先我们需要颜色切换

//颜色的切换
        setInterval(function(){
            $("div").toggleClass("red");
        },70);

然后我们需要定义一个定时器的对象

	//定义定时器对象
    var interval;

打开/关闭

//打开定时器
    function open(){
        if(interval!=undefined){
            alert("已经启动!");
        }else{
            interval = setInterval(function(){
                $("div").toggleClass("red");
            },70);
        }
    }
    //关闭定时器
    function close(){
        clearInterval(interval);
        interval = undefined;
    }

dom节点的执行和绑定点击事件

$(function(){
        //关闭按钮绑定点击事件
        $("#close").click(function(){
            close();
        });
        //打开按钮绑定点击事件
        $("#open").click(function(){
            open();
        });
    });

全部的代码:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <style>
        .blue{
            width: 50px;
            height: 65px;
            background-color: blue;
            border-radius: 50px 50px 2px 2px;
            margin-left: 70px;
        }
        .red{
            width: 50px;
            height: 65px;
            background-color: red;
            border-radius: 50px 50px 2px 2px;
   
        }
	img{
  	    width: 200px;
   	    height: 150px;
  }
    </style>
</head>
<body>
<div class="blue" ></div>
<img src="img/car.png"  />
<input type="button" id="close" value="关闭警灯" />
<input type="button" id="open" value="打开警灯" />
<script type="text/javascript">
定义定时器对象
    var interval;
    //打开定时器
    function open(){
        if(interval!=undefined){
            alert("已经启动!");
        }else{
            interval = setInterval(function(){
                $("div").toggleClass("red");
            },70);
        }
    }
    //关闭定时器
    function close(){
        clearInterval(interval);
        interval = undefined;
    }
    //dom 节点加载完毕执行
    $(function(){
        //关闭按钮绑定点击事件
        $("#close").click(function(){
            close();
        });
        //打开按钮绑定点击事件
        $("#open").click(function(){
            open();
        });
    });
    </script>
</body>
</html>