light.gif
JS实现一个开关灯的效果，这是JS事件的一个基础示例，同学们好好学习一下吧。实现方式其实有很多种的，给大家一个简单的实现。
HTML代码
<img id="light" src="light-off.png"/>
<input id="button" type="image" src="close.png"/>
JS代码
- 添加框架
window.onload = function(){
}
- 获取元素
var light = document.getElementById("light");
var button = document.getElementById("button");
- 设置单击事件
增加一个全局变量，用来保存开关状态。默认状态与HTML初始图片保持一致，即默认为关闭状态。
var open = false;
给开关加上单击事件。通过开关状态判断，设置不同图片。
button.onclick=function(){
if(open){
this.src="close.png";
light.src="light-off.png";
open = false;
}else{
this.src="open.png";
light.src="light-on.png";
open = true;
}
};
OK，三步完成JS开关灯效果，简单吧~。
JS代码总汇
window.onload = function(){
var light = document.getElementById("light");
var button = document.getElementById("button");
var open = false;
button.onclick=function(){
if(open){
this.src="close.png";
light.src="light-off.png";
open = false;
}else{
this.src="open.png";
light.src="light-on.png";
open = true;
}
};
};
图片资源如下：
open.png
close.png
light-on.png
light-off.png
