最近我们来写一些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")
}
}
代码是不是很简单.给图片点击事件,然后改变状态和对应的图片.这个例子,状态也可以使用一个全局属性来替代,但是如果应用在项目中,代码量一大就会容易混乱和修改.尽量用利于管理的方式.
效果图贴上: