jQuery實(shí)現(xiàn)開關(guān)燈效果

更新時間：2020年08月02日 09:39:40 作者：veejaLiu

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)開關(guān)燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)開關(guān)燈效果的具體代碼，供大家參考，具體內(nèi)容如下

效果展示

點(diǎn)擊界面上的開燈關(guān)燈按鈕，可以實(shí)現(xiàn)背景的調(diào)暗。方便晚上閱讀。

開燈：

關(guān)燈：

分析

這個功能很簡單，其實(shí)就是利用jQuery實(shí)現(xiàn)把背景色更改為黑色和白色，可以在兩者之間進(jìn)行切換。

代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>開關(guān)燈案例</title>

 <style type="text/css">
 #img1 {
 display: block;
 margin: 10px auto;
 }
 </style>
 </head>
 <body>
 <button id="btn1" type="button">開燈</button>
 <button id="btn2" type="button">關(guān)燈</button>
 <br>
 <img id="img1" src="imgs/demo1.JPG">
 </body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 // 給button1添加事件,把背景色設(shè)置為白色
 $('#btn1').click(function() {
 $('body').css("background-color", "white");
 });
 // 給button2添加事件,把背景色設(shè)置為黑色
 $('#btn2').click(function() {
 $('body').css("background-color", "black");
 });
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS/jQuery實(shí)現(xiàn)簡單的開關(guān)燈效果【案例】

相關(guān)文章

jquery dialog獲取焦點(diǎn)的方法
這篇文章主要介紹了jquery dialog獲取焦點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery UI插件對話框dialog的基本使用技巧,需要的朋友可以參考下
2017-02-02
利用jQuery實(shí)現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實(shí)現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細(xì)的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。
2017-02-02
基于jquery的讓頁面控件不可用的實(shí)現(xiàn)代碼
當(dāng)用戶需要某項(xiàng)功能時要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。
2010-04-04
jquery 判斷滾動條到達(dá)了底部和頂端的方法
這篇文章主要介紹了jquery 判斷滾動條到達(dá)了底部和到達(dá)頂端的方法,需要的朋友可以參考下
2014-04-04
[jQuery] 事件和動畫詳解
這篇文章主要介紹了JQ事件和動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下
2015-12-12
Jquery Easyui進(jìn)度條組件Progress使用詳解（8）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui進(jìn)度條組件Progress的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。
2015-02-02
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07