开关灯

最新推荐文章于 2021-03-19 02:49:24 发布
最新推荐文章于 2021-03-19 02:49:24 发布
阅读量33 收藏
点赞数
分类专栏： 案例 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49893750/article/details/108474640
版权 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/dark.jpg" alt="" style="width: 200px;" id="img">
    <script>
        // 效果描述： 点击图片切换到第二章, 点击第二章切换回第一张
        var img = document.getElementById('img');
        console.log(img);
        // 不知道当前是第几张的话，设置一个变量存一下当前是第几个
        var flag = 1;

        // 点击
        img.onclick = function(){
            // 更改图片地址
            // 知道当前点击的是第几张
            // console.log(img.src); // file:///D:/20200727/day03/img/dark.jpg
            // img.src = './img/bright.jpg';
            console.log(flag);
            // 判断如果是flag等于1, 表示当前等灯按, 需要将灯点亮
            if(flag == 1){
                img.src = './img/bright.jpg';
                flag = 2;
            } else {
                // flag不等于1的时候，当前灯亮, 需要将灯熄灭
                img.src = './img/dark.jpg';
                flag = 1;
            }
        }
    </script>
</body>
</html>

 

吴机智
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现开关灯效果
10-16
本文将详细介绍如何使用JavaScript实现一个简单的开关灯效果。首先，我们需要了解JavaScript在网页动态效果中的作用。JavaScript是一种脚本语言，常用于丰富网页的动态效果和处理用户交互事件。它可以在HTML文档中的...
jQuery实现开关灯效果
10-15
主要为大家详细介绍了jQuery实现开关灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
开关灯游戏
12-23
"开关灯游戏"是一种经典的逻辑思维游戏，通常用于锻炼编程初学者的逻辑推理能力和编程技巧。这个游戏的目标是在一个二维网格中，通过一系列操作使所有灯泡的状态改变，即原本亮着的灯泡熄灭，原本熄灭的灯泡点亮。...
开关灯电路仿真Proteus仿真电路.rar
07-12
《开关灯电路仿真Proteus仿真电路》 开关灯电路是电气工程初学者入门的经典案例，它涵盖了基本的电路原理，如电源、开关、负载等元素。在这个项目中，我们将探讨如何利用Proteus软件进行开关灯电路的仿真，帮助理解...
切换图片（箭头）
m0_49893750的博客
09-10 1040
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ...
面向对象 tab栏切换 案例
m0_49893750的博客
03-19 590
功能： 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字,可以修改里面的文字内容. html部分 <body> <main> <h4> Js 面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> .
点击按钮修改样式
m0_49893750的博客
09-10 391
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { ...
切换图片（箭头+圆点）
m0_49893750的博客
09-10 286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
scroll回到顶部
m0_49893750的博客
09-10 241
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button{ display: none; .
发送验证码按钮
m0_49893750的博客
09-10 238
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div { ...
加减按钮改变字体大小
m0_49893750的博客
09-10 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ ...
切换图片（圆点）
m0_49893750的博客
09-10 227
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...
点击按钮改变样式
m0_49893750的博客
09-10 221
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
选项卡及删除按钮
m0_49893750的博客
11-04 158
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> <style> ul{ border:1px solid; width: 300.
切换图片（随机按顺序）
m0_49893750的博客
09-10 155
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...
信息登记表
m0_49893750的博客
11-04 143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>信.
生成不重复随机数
m0_49893750的博客
09-10 137
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 获取6位随.
切换图片（输入框）
m0_49893750的博客
09-10 120
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ ...
多个的展开收起
m0_49893750的博客
09-10 104
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div{ width: 300px;heigh...
js开关灯案例
最新发布
05-30
以下是一个基于JavaScript的简单开关灯案例： HTML部分： ``` <!DOCTYPE html> 开关灯 ()">开关灯 <script src="switchLight.js"></script> ``` JavaScript部分（switchLight.js）： ``` function ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值