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

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

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)岳陽樓,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

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

// js動(dòng)效的操作思路：
// 1.操作誰先獲取誰；
// var 創(chuàng)建、聲明變量
// toggle 變量名
// document事件元素，事件流
// getElementById 獲取元素通過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=='開燈'){
 lamp.style.background='yellow';
 bg.style.background='white'; 
 //開燈之后要將toggle改變?yōu)?#39;關(guān)燈'
 toggle.innerHTML='關(guān)燈' 
 }else{
 lamp.style.background='#ccc';
 bg.style.background='black';
 toggle.innerHTML='開燈' 
 }
 } 

 </script> 
</body>

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

文章標(biāo)題：使用JavaScript怎么實(shí)現(xiàn)一個(gè)開關(guān)燈效果
文章分享：http://jinyejixie.com/article28/ijdjjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、用戶體驗(yàn)、定制開發(fā)、虛擬主機(jī)、App設(shè)計(jì)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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