溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用JavaScript怎么實(shí)現(xiàn)一個(gè)開(kāi)關(guān)燈效果

發(fā)布時(shí)間：2021-04-16 16:19:35 來(lái)源：億速云 閱讀：327 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章為大家展示了使用JavaScript怎么實(shí)現(xiàn)一個(gè)開(kāi)關(guān)燈效果，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

 <style>
 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;} 
</style>
<body id="bg">
 <!-- 燈 -->
 <div class="lamp" id="lamp"></div>
 <!-- 燈線 -->
 <div class="pole"></div> 
 <!-- 開(kāi)關(guān) -->
 <div class="toggle" id="toggle">開(kāi)燈</div>
 <script>
// web前端三門語(yǔ)言
// html
// css 
// javascript===>腳本語(yǔ)言，豐富動(dòng)畫，操作事件等
// 需要寫在script標(biāo)簽內(nèi)，script標(biāo)簽可以放置在html的任意位置
// 比較常見(jiàn)的三個(gè)位置，
// 1.body體內(nèi)，html標(biāo)簽下面
// 2.body體外的下面
// 3.head頭部style標(biāo)簽的下面

// js動(dòng)效的操作思路：
// 1.操作誰(shuí)先獲取誰(shuí)；
// var 創(chuàng)建、聲明變量
// toggle 變量名
// document事件元素，事件流
// getElementById 獲取元素通過(guò)ID名的形式。 
 var toggle = document.getElementById('toggle');
 var lamp = document.getElementById('lamp');
 var bg = document.getElementById('bg')
// 2.操作用什么事件
 toggle.onclick = function(){
 //驗(yàn)證當(dāng)前操作
 // console.log代表打印某某某。
 // console.log(123456789) 
// 3.事件發(fā)生時(shí)需要做什么
// if,else事件判斷邏輯
// innerHTML===>元素的內(nèi)容
 if(toggle.innerHTML=='開(kāi)燈'){
 lamp.style.background='yellow';
 bg.style.background='white'; 
 //開(kāi)燈之后要將toggle改變?yōu)?#39;關(guān)燈'
 toggle.innerHTML='關(guān)燈' 
 }else{
 lamp.style.background='#ccc';
 bg.style.background='black';
 toggle.innerHTML='開(kāi)燈' 
 }
 } 

 </script> 
</body>

上述內(nèi)容就是使用JavaScript怎么實(shí)現(xiàn)一個(gè)開(kāi)關(guān)燈效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手