JS特效：开关灯

light.gif

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

HTML代码

JS代码

1. 添加框架

window.onload = function(){
}

2. 获取元素

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

3. 设置单击事件
   增加一个全局变量，用来保存开关状态。默认状态与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