當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS基础-开关灯案例
生活随笔
收集整理的這篇文章主要介紹了
JS基础-开关灯案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要達到的效果圖展示
初始狀態
點擊關燈之后變為
再點開燈又變為第一個狀態。
整體思路：首先設置初始的狀態body的背景色為白色，按鈕中的文字為關燈，初始狀態默認是開著燈的，然后設置一個初始的flag變量，flag=0，然后給按鈕設置js事件，點擊按鈕，如果flag=0則把背景色變為黑色同時把按鈕里面的文字改成開燈，同時設置flag=1；如果flag=1則把背景色變為白色，同時把按鈕里面的文字改為關燈。
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>開關燈案例</title><style>.open {background-color: white;}.close {background-color: black;}</style> </head><body><button>關燈</button><script>// 獲取按鈕var btn = document.querySelector('button');var flag = 0;// 獲取bodyvar bodys = document.body;// 點擊事件btn.onclick = function() {if (flag == 0) {bodys.className = 'close';flag = 1;btn.innerText = '開燈'} else {bodys.className = 'open';flag = 0;btn.innerText = '關燈'}}</script> </body></html>總結
以上是生活随笔為你收集整理的JS基础-开关灯案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Camtasia studio编辑、合成
- 下一篇： JSPatch