用js控制电灯开关

这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了用js控制电灯开关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

利用js控制电灯开关，供大家参考，具体内容如下

题目：

通过js来控制电灯的开关

分析：

获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关

实现方法：

方法一：

获取图片元素，通过给按钮绑定点击事件来控制电灯开关

				?

									<!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>

									</head>

									<body>

									    <img src="./img/关.gif" alt="">

									    <button id="open">开灯</button>

									    <button id="close">关灯</button>

									</body>

									<script>

									    var open=document.getElementById("open");

									    var close=document.getElementById("close");

									    var img=document.getElementsByTagName("img")[0];

									    open.onclick=function(){

									        img.src="./img/开.gif"

									    }

									    close.onclick=function(){

									        img.src="./img/关.gif"

									    }

									</script>

									</html>

总结：这种方式比较简单，也不容易出错，通过按钮绑定，直接获取对应的电灯开关图片

运行结果：

用js控制电灯开关

相关方法：

document.getElementById():通过id名获取对应的元素,
document.getElementsByTagName():通过元素名获取对应的元素，获取出来的是一个类数组对象
onclick：单击事件，通过鼠标点击触发

方法二：

获取图片元素，直接给图片绑定开关事件

				?

									<!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>

									</head>

									<body>

									    <img src="./img/关.gif" alt="">

									</body>

									<script>

									    var img=document.getElementsByTagName("img")[0];

									    var flag=false;

									    img.onclick=function(){

									        if(flag){

									            img.src="./img/关.gif";

									            flag=false;

									        }else{

									            img.src="./img/开.gif";

									            flag=true;

									        }

									    }

									</script>

									</html>