欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

JS基础-开关灯案例

发布时间：2023/12/29 javascript 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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基础-开关灯案例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。