JQuery警报灯

利用鼠标点击改变背景颜色制作一个警报器，供大家参考！

请先看一下效果图：（警报器是蓝色的和点击之后警报器是红色的）
在这里插入图片描述

程序解说：首先要有一个警报器的样式和两个分别为打开警报器和关闭警报器的按钮，给警报器添加红色背景或者蓝色背景作为初始颜色，在样式中分别写蓝色和红色两种样式，给按钮设置方法点击打开按钮时使用计时器切换蓝色和红色两种样式，点击关闭时停止闪烁。
在写代码之前准备工作要做好，添加Jquery.js插件
在这里插入图片描述
HTML代码

<div class="blue"></div><br><input type="button" id="close" value="关闭"><input type="button" id="open" value="打开">

CSS代码

.blue{height: 50px;width: 40px;background-color: blue;border-radius: 20px 20px 2px 2px;float: left;}.red{height: 50px;width: 40px;background-color: red;border-radius: 20px 20px 2px 2px;float: left;}

script代码

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();})});