628案例演示开关灯 629 BOM概述

开关灯案例演示

也可以说成是图片之间的切换

<body>
    <!--指定图片路径 和id名称-->
    <img src = "img/off.gif" id="deng">

    <script>
        /*
            分析:
                1.获取图片对象
                2.绑定单机事件
                3.每次点击切换图片
                    规则：如果灯是 on，切换图片为off
                         如果灯是 off，切换图片为on
                    使用标记flag来完成
        */
        //1.获取图片对象
        let k1 = document.getElementById("deng");
        //代表灯是灭的
        var g1 = k1;
        //绑定单击事件
        k1.onclick = function() {
            //判断等是开的还是关的,则灭掉
            if (g1) {
                //绑定事件
                k1.src = "img/off.gif"
                //若等于false
                g1 = false;
            } else {
                //绑定事件
                k1.src = "img/on.gif"
                //不等于false则向下走
                g1 = true;
            }
        }
    </script>

 BOM

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

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

　　2.组成

　　　　1.Window：窗口对象

　　　　2.Navigator：浏览器对象

　　　　3.Screen：显示器屏幕对象

　　　　4.History：历史记录对象

　　　　5.Location：地址栏对象

 

　　

posted @ 2022-10-26 14:14  ja不会va  阅读(24)  评论(0)    收藏  举报