Javascript简单学习小案例——开关灯

最新推荐文章于 2023-03-21 12:01:41 发布

阿喵酱ovo

最新推荐文章于 2023-03-21 12:01:41 发布

阅读量875

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_51367068/article/details/120402433

版权

学习了一下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>

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

这里是执行结果：

阿喵酱ovo

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
Javascript简单学习小案例——开关灯

学习了一下js，这边做了一个小小的案列。看的b站上黑马的教学视频，对他的灯泡案例进行了一点改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小pj的灯泡</title> <style> .d1{ /*border: 1px solid;*/
复制链接

扫一扫