js實現(xiàn)開關(guān)燈效果
更新時間：2020年03月30日 15:15:26 作者：歐陽manito
這篇文章主要為大家詳細介紹了js實現(xiàn)開關(guān)燈效果,文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)開關(guān)燈效果的具體代碼，供大家參考，具體內(nèi)容如下
開關(guān)燈
<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===>腳本語言，豐富動畫，操作事件等
// 需要寫在script標簽內(nèi)，script標簽可以放置在html的任意位置
// 比較常見的三個位置，
// 1.body體內(nèi)，html標簽下面
// 2.body體外的下面
// 3.head頭部style標簽的下面
// js動效的操作思路：
// 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(){
//驗證當前操作
// console.log代表打印某某某。
// console.log(123456789)
// 3.事件發(fā)生時需要做什么
// if,else事件判斷邏輯
// innerHTML===>元素的內(nèi)容
if(toggle.innerHTML=='開燈'){
lamp.style.background='yellow';
bg.style.background='white';
//開燈之后要將toggle改變?yōu)?關(guān)燈'
toggle.innerHTML='關(guān)燈'
}else{
lamp.style.background='#ccc';
bg.style.background='black';
toggle.innerHTML='開燈'
}
}
</script>
</body>
效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文很簡單，給大家分享了一段使用javascript實現(xiàn)簡單的貪吃蛇游戲的代碼，算是對自己學習javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對大家能夠有所幫助。2015-03-03
JavaScript對象的創(chuàng)建模式與繼承模式示例講解
繼承機制是面向?qū)ο蟪绦蛟O計使代碼可以復用的最重要的手段，它允許程序員在保持原有的特性基礎(chǔ)上進行擴展，增加功能，這樣產(chǎn)生新的類，稱作是派生類。繼承呈現(xiàn)了面向?qū)ο蟪绦蛟O計的層析結(jié)構(gòu)，體現(xiàn)了由簡單到復雜的認知過程。繼承是類設計層次的復用2022-12-12
js 兼容多瀏覽器的回車和鼠標焦點事件代碼(IE6/7/8,firefox,chrome)
本文講一下js實現(xiàn)兼容IE6/7/8,firefox,chrome瀏覽器的回車和鼠標焦點事件的代碼。2010-04-04
這篇文章主要為大家詳細介紹了javascript中replace的使用方法，使用replace和正則表達式共同實現(xiàn)字符串trim方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
使用JavaScript截取視頻特定幀的實現(xiàn)方法
在網(wǎng)頁開發(fā)中,我們經(jīng)常需要對媒體文件進行處理,其中包括視頻文件,有時候,我們可能需要從視頻中提取特定的幀,并將其顯示在網(wǎng)頁上,本文將介紹如何使用JavaScript來實現(xiàn)這一功能,感興趣的朋友跟著小編一起來看看吧2024-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片切換效果，以及自定義屬性的應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章介紹了eval優(yōu)化輸入驗證實例代碼，有需要的朋友可以參考一下2013-09-09
這篇文章主要介紹了Vuejs通過拖動改變元素寬度實現(xiàn)自適應,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
今天小編就為大家分享一篇關(guān)于js中Array對象的常用遍歷方法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了js實現(xiàn)的捐贈管理完整實例,包括了html頁面、js腳本及css樣式的完整實現(xiàn)代碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01