js按钮点击事件开关灯亮（点击开关按钮，js实现电灯开关效果）
导读：初识js，跟大家分享js实现电灯开关灯效果的具体代码，利用简单的html+js模拟电灯开关的小案例。...
初识js，跟大家分享js实现电灯开关灯效果的具体代码，利用简单的html+js模拟电灯开关的小案例。
首先进行案例分析：
1.获取图片属性
2.判断变量的值
3.点击时切换图片
通过点击按钮实现电灯开关
以下是两张需要的图片，接下来添加html内容。
1.创建一个div，把亮的灯泡图片放入div，加入一个button按钮开关
<body> <div class="box"> <img id="img1" src="./img/on.png" height="180" width="109"/> <br> <button onclick="openOrClose()" >开/关</button> </div> </body>2.设置js，定义一个变量。
首先获取元素
设置一个旗子f=true，true表示开，false表示关
判断变量的值来切换图片如果为ture则图片为亮的等，false为暗的灯。
<script> var img1 = document.getElementById("img1"); var f=true;//true表示开，false表示关 function openOrClose(){ if(f){ img1.src="./img/off.png" f=false }else { img1.src="./img/on.png" f=true } } </script>效果如下：
另一种方法是js中的绑定点击事件来实现开关灯的效果，这个是实现页面整体变色的简易开关灯：
代码如下：
1.同样搭建好html样式，设置button按钮用来绑定点击事件
2.获取元素，同样设置一个变量，给button按钮设置绑定事件。
<!-- 页面开关灯 --> <button type="button" class="btn">关灯</button> <script> //获取元素 var btn = document.querySelector(.btn); var bd = document.body; //这里我们要先定义一个变量，给变量一个值为false； var flag = false; //给button按钮绑定点击事件 btn.onclick = function() { flag = !flag if (flag) { bd.style.backgroundColor = black; this.innerHTML = 开灯; } else { bd.style.backgroundColor = white; this.innerHTML = 关灯; } } </script>效果如下：
页面开关灯效果
以上就是利用ls实现简易开关灯效果的小案例！大家可以试一试！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！