简单的JS动效——点击灯泡使其点亮或熄灭

我们需要准备的素材有：2张灯泡图片，状态分别是点亮和熄灭，图片宽高必须一致。

首先打开页面是这个已经点亮的状态

当我们点击他时，就会呈现出这个样子。

下面让我们来学习如何实现吧！

首先，写好页面布局。

插入图片：<img src="light_on.gif" onclick="changeimage()" id="myimage">

这里插入的图片是已经点亮的状态，设置一个点击事件为"changeimage"  id为"myimage"

然后再下方写下<p>点击灯泡使其点亮或熄灭</p>这个简单的页面布局就弄好了，接下来是js代码。

首先，写一个function changeimage()

然后用document.getElementById获取要选择的ID，上面我们ID写为"myimage"

然后用if判断条件，当match（匹配）到light_on.gif，就表示当前图片匹配，则应该点击时更换图片，所以写上element.src="light_off.gif"来更换为熄灭的图片。

否则，else更换为点亮的图片，然后我们的整个页面就可以实现灯泡的点亮了！

希望各位对各位读者老爷有所帮助，不足之处欢迎提出一起进步。