JavaScript实例:开关灯泡

最近我们来写一些JS的实例,来辅助学习JS.这次实现的是简单的灯泡开关效果.这个实例主要是利用两张图片来完成.考虑到的知识点有点击事件和标签元素属性的操作.

首先我们默认的灯泡是一个关闭的状态

<img src="http://www.w3school.com.cn/i/eg_bulboff.gif" />

文章的图片来源w3school中文教程网.

我们先从思路来讲,然后在上代码.

点击事件应用在这个图片标签上,默认的时候我们的图片标签的灯泡是关闭状态.那这时候我们应该给与这个图片标签一个状态属性(我们例子中使用的是state属性,这个是自定义的属性)

然后就是对state属性和src属性进行操作了,要把他们的状态和图片的属性相对应,不要搞混乱了.

现在我们将代码贴上:

document.images[0].onclick = function(){

    var state = this.getAttribute("state", 0, 0);

    if(state === "on"){

        this.src = "http://www.w3school.com.cn/i/eg_bulboff.gif";

        this.setAttribute("state", "off", 0, 0);

    }else{

        this.src = "http://www.w3school.com.cn/i/eg_bulbon.gif";

        this.setAttribute("state", "on")

    }

}

代码是不是很简单.给图片点击事件,然后改变状态和对应的图片.这个例子,状态也可以使用一个全局属性来替代,但是如果应用在项目中,代码量一大就会容易混乱和修改.尽量用利于管理的方式.

效果图贴上: