javascript+html灯泡开关 2种方式

原创已于 2023-08-14 10:23:18 修改 · 1.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2023-03-21 12:01:41 首次发布

文章展示了两种使用HTML和JavaScript实现灯泡开关效果的方法。通过点击按钮，动态改变图片源来模拟灯泡的开启和关闭状态，同时也更新按钮的文字提示。第一种方法使用了querySelector和addEventListener，第二种方法利用了onclick事件处理和全局变量进行状态管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯泡开关</title>
</head>
<body>
<!--设置一个图片,默认是关灯效果-->
<img src="image/1.gif" alt="" class="img">
<!--设置一个按钮,默认是用来点击触发事件-->
<input type="button" value="开灯">

</body>
</html>
<script type="text/javascript">
    //通过docment方法获取input标签属性
    let le = document.querySelector("input[type='button']");
    //给对应的按钮添加事件 addEvenListener 代表添加一个事件监听器,第一个参数为"click",代表点击,后面是函数,代表点击之后执行的函数
    le.addEventListener("click", function () {
        //通过document方法获取img对象
        let img = document.querySelector(".img");
        //在控制台打印图片路径,由于我图片是1.gif和2.gif命名的,我在控制台看到第57位正好是图片名称,于是我便开始替换
        console.log(img.src)
//通过switch判断当前图片属性是否为开关灯状态,注意由于他是默认字符串的,我是用parseInt转换为数字对象
        switch (parseInt(img.src.charAt(57))) {
//判断图片是1(即关灯状态),那么将上面获取的图片对象改为2(即开灯图片),并且设置input标签的状态,为关灯,case2则反之
            case 1:
                img.src = "image/2.gif";
                le.value = "关灯";
                break;
            case 2:
                img.src = "image/1.gif";
                le.value = "开灯";
                break;
            default:
                console.log("没找到");
                break;
        }
    });
</script>

第二种方式:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电灯开关</title>
</head>
<body>

<center>

    <img id="light" src="image/1.gif"/>
    <br>
    <input type="button" id="c1" value="开" onclick="run()"/>

</center>

</body>
<script type="text/javascript">
   var flag = false;

    function run() {
        //得到img标签的标签对象
        var l = document.getElementById("light")

        var l1 = document.getElementById("c1")

        if (flag) {
            l.src = "image/1.gif"
            flag = false
            l1.value = "开"
        } else {
            l.src = "image/2.gif"
            flag = true
            l1.value = "关"
        }
    }
</script>
</html>

主要是通过onclick点击触发事件,判断图片状态,来控制开关灯