溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用JavaScript怎么實現一個開關燈效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
<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>
<!-- 開關 -->
<div class="toggle" id="toggle">開燈</div>
<script>
// 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='開燈'
}
}
</script>
</body>上述內容就是使用JavaScript怎么實現一個開關燈效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
