案例_电灯开关和BOM_概述

案例_电灯开关

分析：

　　1.获取图片对象

　　2.绑定单击事件

　　3.每次点击切换图片

　　　　规则：

　　　　　　如果灯为开的 2,切换为1

　　　　　　如果灯为关的 1,切换为2

　　　　使用标记flag来完成

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关</title>
</head>
<body>
<img id="light" src="img/c1.jpg" onclick="fun();">

<script>
    //获取图片对象
    let light = document.getElementById("light");
    var flag = false;
    //绑定单击事件
    light.onclick = function () {
        if (flag){//判断如果灯是开的，则灭掉
            light.src = "img/c1.jpg";
            flag = false;
        }else {
            light.src = "img/c2.jpg";
            flag = true;
        }
    }
    
</script>
</body>
</html>

 

点击灯泡之后在点就会灭

 

 

 

 

 

BOM_概述

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

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

2.组成：

　　Window：窗口对象

　　Navigator：浏览器对象

　　Screen：显示器屏幕对象

　　History：历史记录对象

　　Location：地址栏对象

 

posted @ 2022-08-03 10:27  魔光领域  阅读(35)  评论(0)  编辑  收藏  举报