利用鼠標點擊改變背景顏色制作一個警報器，供大家參考！

請先看一下效果圖：（警報器是藍色的和點擊之后警報器是紅色的）


程序解說：首先要有一個警報器的樣式和兩個分別為打開警報器和關閉警報器的按鈕，給警報器添加紅色背景或者藍色背景作為初始顏色，在樣式中分別寫藍色和紅色兩種樣式，給按鈕設置方法點擊打開按鈕時使用計時器切換藍色和紅色兩種樣式，點擊關閉時停止閃爍。
在寫代碼之前準備工作要做好，添加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();})});

到此為止，小程序已經完成了！！！

總結

以上是生活随笔為你收集整理的JQuery警报灯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。