利用js实现电灯开关案例

最新推荐文章于 2024-01-11 10:13:54 发布

小苏(º﹃º )

最新推荐文章于 2024-01-11 10:13:54 发布

阅读量548

点赞数 1

分类专栏： Java 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/112709631

版权

Java 专栏收录该内容

39 篇文章 3 订阅

订阅专栏

通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。

首先对本案例进行一个分析，过程如下：

1.获取图片属性

2.绑定单击事件

3.点击时切换图片

1.通过按钮实现电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" alt="" id="img"> <br><!--图片-->
<input type="button" id="bt1" value="开" onclick="f1()"><!--按钮-->
<button id="bt2" onclick="f2()">关</button>
</body>
<script>
function f1() {//开
    let bt1=document.getElementById("bt1");//获取按钮id
    let img=document.getElementById("img");//获取图片id
    img.src="imgs/on.gif";//修改图片
}
function f2() {//关
    let bt2=document.getElementById("bt2");
    let img=document.getElementById("img");
    img.src="imgs/off.gif";
}
</script>
</html>

运行结果：
在这里插入图片描述

2.通过点击电灯，实现开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/off.gif" alt="" id="img"> <br>
</body>
<script>
    let img=document.getElementById("img");
    img.onclick=f;
    let flag=false;
    function f() {
        if (flag==true){
            img.src="imgs/off.gif"
            flag=false;
        }else {
            img.src="imgs/on.gif"
            flag=true;
        }
    }
</script>
</html>

简化版（利用三元运算符）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()">
</body>
<script>
    let img = document.getElementById("img");
    let i=0;
    function f() {
        img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
    }
</script>
</html>

运行结果
通过点击实现电灯的开关
在这里插入图片描述

电灯素材：
在这里插入图片描述

小苏(º﹃º )

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
利用js实现电灯开关案例

通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下： 1.获取图片属性 2.绑定单击事件 3.点击时切换图片1.通过按钮实现电灯开关<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body
复制链接

扫一扫