html语言开关控制灯泡 用js控制电灯开关

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

题目：

通过js来控制电灯的开关

分析：

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

实现方法：

方法一：

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

电灯开关案例

开灯

关灯

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

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

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

open.οnclick=function(){

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

}

close.οnclick=function(){

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

}

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

运行结果：

相关方法：

document.getElementById():通过id名获取对应的元素,

document.getElementsByTagName():通过元素名获取对应的元素，获取出来的是一个类数组对象

onclick：单击事件，通过鼠标点击触发

方法二：

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

电灯开关案例

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

var flag=false;

img.οnclick=function(){

if(flag){

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

flag=false;

}else{

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

flag=true;

}

}

注意：这种方法需要先做一个标记(flag)来判断电灯初始的状态，直接给图片绑定点击事件的时候，需要注意标记(flag)的初始赋值为false。

运行结果：点击电灯泡时，电灯明暗依次交替

相关图片：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。