當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中开关灯案例展示
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中开关灯案例展示
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今天講一個開關燈的案例，這里邏輯思維重點在于打標記法。
代碼展示，
需求：點擊關燈按鈕，頁面顏色變成黑色，同時按鈕的關燈變成開燈，再次點擊頁面會變成黃色，按鈕又變回關燈，可以自定義去設置；
<style>.hover {background-color: black;}body {background-color: yellow;}.hover1{background-color: aqua;}.hover2{background-color: red;}.hover3{background-color: green;}.hover4{background-color: orchid;}.hover5{background-color: blue;}</style> </head><body ><button id="on-off">關燈</button><button id="cut">點擊跑馬燈</button><script>var Switch = document.getElementById('on-off');var bodys = document.body;var flag = false;Switch.onclick = function () {flag = !flagif (flag) {bodys.className = 'hover'Switch.innerHTML = '開燈'}else {bodys.className=''Switch.innerHTML='關燈'}} </script> </body>在html中添加一個按鈕標簽（button）。
因為需求是通過點擊按鈕來實現(xiàn)頁面的顏色改變，所以首先獲取這兩個事件源
body元素較特殊，直接用document.body就可以獲取到
獲取完，給按鈕添加點擊事件屬性（onclick）
重難點是我們每次點完他需要切換效果，而不是保留上一個觸發(fā)事件，所以可以用標記法，來做一個if判斷，首先聲明一個變量把false賦值給他，點擊后讓結果為非false，也就是true，
做判斷，結果為真，執(zhí)行點擊后要實現(xiàn)需求，結果為假，點擊下一次時要把效果為空“”null
按鈕內容改變，這樣基本就可以了
效果圖點擊qian
點擊后
?拓展：我在這里加了一個簡單的跑馬燈，就是點擊一次變次色，需要用到隨機數(shù)綁定到classname里面
看代碼
var cut=document.getElementById('cut'); var flag=false; cut.onclick=function(){flag=!flagif(flag){var num=Math.floor(Math.random()*5+1)bodys.className = 'hover'+num;}else{bodys.className=''} }就可以了
總結
以上是生活随笔為你收集整理的JavaScript中开关灯案例展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [R]R语言的module工程化
- 下一篇： Springboot入门小项目（CURD