案例电灯开关以及BOM概述

案例电灯开关

分析：

　　1、获取图片对象

　　2、绑定单击事件

　　3、每次点击切换图片

　　　　规则：

　　　　　　如果灯是开的on，切换图片为off

　　　　　　如果灯是关的off，切换图片为on

　　　　使用标记flag来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

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

    <script>
        /*
            分析：
            　　1、获取图片对象
            　　2、绑定单击事件
            　　3、每次点击切换图片
            　　　　规则：
            　　　　　　如果灯是开的on，切换图片为off
            　　　　　　如果灯是关的off，切换图片为on
            　　　　使用标记flag来完成
         */
        //1、获取图片对象
        var light = document.getElementById("light");
        var flag = false;//代表灯是灭的  off图片
        //2、绑定单击事件
        light.onclick = function () {
            if (flag){  //如果灯是开的，则灭掉
                light.src = "img/off.gif";
                flag = false;
            }else {
                light.src = "img/on.gif";
                flag = true;
            }
        }
    </script>

</body>
</html>

 

 

 

 

 

 

 

 

BOM概述

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

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

2、组成：

　　　　Location：地址栏对象

　　　　Navigator：浏览器对象

　　　　Screen：显示器屏幕对象

　　　　History：历史记录对象

　　　　Window：窗口对象

 

posted @ 2022-08-03 13:21  xjw12345  阅读(64)  评论(0)    收藏  举报