jQuery實現開關燈效果
阿新 • • 發佈：2020-08-03
本文例項為大家分享了jQuery實現開關燈效果的具體程式碼，供大家參考，具體內容如下
效果展示
點選介面上的開燈關燈按鈕，可以實現背景的調暗。方便晚上閱讀。
開燈：
關燈：
分析
這個功能很簡單，其實就是利用jQuery實現把背景色更改為黑色和白色，可以在兩者之間進行切換。
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>開關燈案例</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">關燈</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新增事件,把背景色設定為白色
$('#btn1').click(function() {
$('body').css("background-color","white");
});
// 給button2新增事件,把背景色設定為黑色
$('#btn2').click(function() {
$('body').css("background-color","black");
});
</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。