案例：电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif" alt="">
<script>
    /*
    * 分析
    * 1.获取对象
    * 2.绑定事件
    * 3.设置事件：每次点击切换图片
    *   规则：开——关，关——开
    *   使用flag来完成
    * */
    //1.获取对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的
    //2.绑定事件
    light.onclick = function () {
        if (flag) {
            //灯是开的就灭掉
            light.src = "img/off.gif";
            flag=false;
        } else {
            //灯是关的就打开
            light.src = "img/on.gif";
            flag=true;
        }
    }
</script>
</body>
</html>