當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript实现开关灯
生活随笔
收集整理的這篇文章主要介紹了
javascript实现开关灯
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
開關(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標(biāo)簽內(nèi)，script標(biāo)簽可以放置在html的任意位置 // 比較常見的三個位置， // 1.body體內(nèi)，html標(biāo)簽下面 // 2.body體外的下面 // 3.head頭部style標(biāo)簽的下面// 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(){//驗證當(dāng)前操作// 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)?#39;關(guān)燈'toggle.innerHTML='關(guān)燈' }else{lamp.style.background='#ccc';bg.style.background='black';toggle.innerHTML='開燈' }} </script> </body>效果圖
總結(jié)
以上是生活随笔為你收集整理的javascript实现开关灯的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Fidget jQuery插件构建多
- 下一篇： 软件需求工程 R 综合论述题