开关灯效果HTML,JS特效：开关灯

light.gif

JS实现一个开关灯的效果，这是JS事件的一个基础示例，同学们好好学习一下吧。实现方式其实有很多种的，给大家一个简单的实现。

HTML代码

JS代码

添加框架

window.onload = function(){

}

获取元素

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

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

设置单击事件

增加一个全局变量，用来保存开关状态。默认状态与HTML初始图片保持一致，即默认为关闭状态。

var open = false;

给开关加上单击事件。通过开关状态判断，设置不同图片。

button.οnclick=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.οnclick=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