利用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。
运行结果:点击电灯泡时,电灯明暗依次交替
相关图片:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。