js實(shí)現(xiàn)開關(guān)燈效果
更新時(shí)間：2020年03月30日 15:15:26 作者：歐陽manito
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)開關(guān)燈效果,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(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===>腳本語言，豐富動(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)?關(guān)燈'
toggle.innerHTML='關(guān)燈'
}else{
lamp.style.background='#ccc';
bg.style.background='black';
toggle.innerHTML='開燈'
}
}
</script>
</body>
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序HTTP請(qǐng)求從0到1封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Swiper是移動(dòng)端的一款非常強(qiáng)大的觸摸滑動(dòng)插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
這篇文章主要介紹了用js得到網(wǎng)頁中所有的div的id,需要的朋友可以參考下2006-11-11
這篇文章主要介紹了微信小程序通過js實(shí)現(xiàn)瀑布流布局詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js實(shí)用技巧之去除數(shù)組或者對(duì)象里重復(fù)選項(xiàng)
這篇文章主要給大家介紹了關(guān)于js實(shí)用技巧之去除數(shù)組或者對(duì)象里重復(fù)選項(xiàng)的相關(guān)資料,JavaScript數(shù)組有很多內(nèi)置方法,可以操作和處理數(shù)據(jù),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
利用JavaScript為句子加標(biāo)題的3種方法示例
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript為句子加標(biāo)題的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)的3D拖拽翻頁效果,通過鼠標(biāo)事件結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)拖拽翻頁的效果,需要的朋友可以參考下2015-10-10
js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果,涉及javascript鼠標(biāo)事件及頁面元素遍歷調(diào)用的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
B/S開發(fā)中常用javaScript技術(shù)與代碼
B/S開發(fā)中常用javaScript技術(shù)與代碼...2007-03-03
本文主要介紹了原生js封裝自定義滾動(dòng)條的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03