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