- 步骤分析
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
图片如下：
off.gif
on.gif
- 步骤实现
第一步：定义img标签，指定电灯图片
<img id="light" src="./img/on.gif">
第二步：定义一个方法，鼠标点击，换电灯图片
<script> function fun(flag) { // 1.获取图片对象 var light = document.getElementById("light"); // 2.绑定单击事件 light.onclick = function() { if(flag) { // 判断如果灯是开的，则灭掉 light.src = "img/off.gif"; flag = false; } else { // 如果灯是灭的，则打开 light.src = "img/on.gif"; flag = true; } } } </script>
第三步：使用该方法
<script> fun(true); </script>
- 所有步骤代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> <script> function fun(flag) { // 1.获取图片对象 var light = document.getElementById("light"); // 2.绑定单击事件 light.onclick = function() { if(flag) { // 判断如果灯是开的，则灭掉 light.src = "img/off.gif"; flag = false; } else { // 如果灯是灭的，则打开 light.src = "img/on.gif"; flag = true; } } } </script> </head> <body> <img id="light" src="./img/on.gif"> <script> fun(true); </script> </body> </html>