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