HTML + JavaScript 实现简单的电灯开关

步骤分析

分析：
    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>