javascript+html灯泡开关 2种方式

amz_java

已于 2023-08-14 10:23:18 修改

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript html 前端

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

本文链接：https://blog.youkuaiyun.com/amz_java/article/details/129685401

<!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="开" οnclick="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点击触发事件,判断图片状态,来控制开关灯