案例电灯开关以及BOM概述

案例_电灯开关

<body>

    <img src="img/off.gif" id="light1">

<script>
    /*
        分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                 规则：
                    如果灯是开的 on 切换图片为 off
                    如果灯是开的 off 切换图片为 on
                  使用标记flag来完成
     */
    //1.获取图片对象
    let light = document.getElementById("light1");

    var flag = false;

    light.onclick = function (){//点击事件
        if (flag){//判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;
        }else {
            //如果灯是灭，则打开
            light.src = "img/on.gif";
            flag = true;
        }

    }
</script>
</body>

 

BOM概述

概念：Browser  Object  Model 浏览器对象模型

　　将浏览器的各个部分封装成对象

2、组成：

　　　　Location：地址栏对象

　　　　Navigator：浏览器对象

　　　　Screen：显示器屏幕对象

　　　　History：历史记录对象

　　　　Window：窗口对象

 

posted @ 2022-11-18 11:44  monkey大佬  阅读(29)  评论(0)    收藏  举报