本文實例為大家分享了js實現開關燈效果的具體代碼，供大家參考，具體內容如下

開關燈

body{background: black;cursor: pointer;}

.lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}

.pole{width: 10px;height: 400px;background: brown;margin-left: 45px;}

.toggle{width: 80px;height: 40px;background: green;border-radius: 5px;margin-left: 10px;color: white;line-height: 40px;text-align: center;}

開燈

// web前端三門語言

// html

// css

// javascript===>腳本語言，豐富動畫，操作事件等

// 需要寫在script標簽內，script標簽可以放置在html的任意位置

// 比較常見的三個位置，

// 1.body體內，html標簽下面

// 2.body體外的下面

// 3.head頭部style標簽的下面

// js動效的操作思路：

// 1.操作誰先獲取誰；

// var 創建、聲明變量

// toggle 變量名

// document事件元素，事件流

// getElementById 獲取元素通過ID名的形式。

var toggle = document.getElementById('toggle');

var lamp = document.getElementById('lamp');

var bg = document.getElementById('bg')

// 2.操作用什么事件

toggle.onclick = function(){

//驗證當前操作

// console.log代表打印某某某。

// console.log(123456789)

// 3.事件發生時需要做什么

// if,else事件判斷邏輯

// innerHTML===>元素的內容

if(toggle.innerHTML=='開燈'){

lamp.style.background='yellow';

bg.style.background='white';

//開燈之后要將toggle改變為'關燈'

toggle.innerHTML='關燈'

}else{

lamp.style.background='#ccc';

bg.style.background='black';

toggle.innerHTML='開燈'

}

}

效果圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

總結

以上是生活随笔為你收集整理的开关灯效果HTML,js实现开关灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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