當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript实现开关灯
生活随笔
收集整理的這篇文章主要介紹了
javascript实现开关灯
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開關燈
<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標簽內，script標簽可以放置在html的任意位置 // 比較常見的三個位置， // 1.body體內，html標簽下面 // 2.body體外的下面 // 3.head頭部style標簽的下面// js動效的操作思路： // 1.操作誰先獲取誰； // var 創建、聲明變量 // 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.事件發生時需要做什么 // if,else事件判斷邏輯 // innerHTML===>元素的內容if(toggle.innerHTML=='開燈'){lamp.style.background='yellow';bg.style.background='white'; //開燈之后要將toggle改變為'關燈'toggle.innerHTML='關燈' }else{lamp.style.background='#ccc';bg.style.background='black';toggle.innerHTML='開燈' }} </script> </body>效果圖
總結
以上是生活随笔為你收集整理的javascript实现开关灯的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Fidget jQuery插件构建多
- 下一篇： 百度地图POI的边界GEOJSON数据采