利用鼠標(biāo)點(diǎn)擊改變背景顏色制作一個(gè)警報(bào)器，供大家參考！

請(qǐng)先看一下效果圖：（警報(bào)器是藍(lán)色的和點(diǎn)擊之后警報(bào)器是紅色的）


程序解說(shuō)：首先要有一個(gè)警報(bào)器的樣式和兩個(gè)分別為打開警報(bào)器和關(guān)閉警報(bào)器的按鈕，給警報(bào)器添加紅色背景或者藍(lán)色背景作為初始顏色，在樣式中分別寫藍(lán)色和紅色兩種樣式，給按鈕設(shè)置方法點(diǎn)擊打開按鈕時(shí)使用計(jì)時(shí)器切換藍(lán)色和紅色兩種樣式，點(diǎn)擊關(guān)閉時(shí)停止閃爍。
在寫代碼之前準(zhǔn)備工作要做好，添加Jquery.js插件

HTML代碼

<div class="blue"></div><br><input type="button" id="close" value="關(guān)閉"><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("已經(jīng)啟動(dòng)!")} else {interval = setInterval(function() {$("div").toggleClass("red");}, 100);}}//關(guān)閉function close() {clearInterval(interval);interval = undefined;}$(function() {$("#close").click(function() {close();})$("#open").click(function() {open();})});

到此為止，小程序已經(jīng)完成了！！！

總結(jié)

以上是生活随笔為你收集整理的JQuery警报灯的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。