[JavaScript知识库] Javascript简单学习小案例—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Javascript简单学习小案例——开关灯 -> 正文阅读

[JavaScript知识库]Javascript简单学习小案例——开关灯

学习了一下js，这边做了一个小小的案列。

看的b站上黑马的教学视频，对他的灯泡案例进行了一点改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小pj的灯泡</title>
    <style>
        .d1{
            /*border: 1px solid;*/
            margin: auto;
            width: 50%;
            height: 70%;
            text-align: center;
        }

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            height: 400px;
        }

    </style>
</head>
<body>
    <div class="d1">

    <img class="t" id="light" src="image/off.jpg" alt="light">
    <button id="on">打开</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="off">关闭</button>

    <script>
        //获取图片对象
        var bt1=document.getElementById("on");
        var bt2=document.getElementById("off");
        var light=document.getElementById("light");
        var f=false; //false代表灯关
        //绑定单击事件
        bt1.onclick=function (){
            light.src="image/on.jpg";
        }
        bt2.onclick=function (){
            light.src="image/off.jpg";
        }

        /*
        light.onclick=function (){
            if(f){//灯打开 则关闭他
                light.src="image/off.jpg";
                f=false;
            }
            else {
                light.src="image/on.jpg";
                f=true;
            }
        }

         */
    </script>


    </div>

</body>
</html>

刚调出来的网页上的灯泡是关闭状态，点击打开灯泡就亮，点击关闭灯泡就不亮了

这里是执行结果：