通过js实现电灯开关案例

最新推荐文章于 2024-07-06 00:11:00 发布
最新推荐文章于 2024-07-06 00:11:00 发布
阅读量1.7k 收藏 9
点赞数 3
分类专栏： web前端 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52220195/article/details/110692906
版权
本文通过WebStorm展示了如何使用JavaScript实现电灯开关的案例。点击开关按钮，电灯会呈现亮起和熄灭的状态。文章提供了代码示例，并鼓励读者亲自尝试。
摘要由CSDN通过智能技术生成

用Js实现电灯的开关

在生活中，我们用手一按，就能让灯亮和熄灭，今天让我们一起来康康如何通过Js实现电灯开关的案例吧

使用的工具是WebStorm

展示效果如下：

这是运行的效果：
在这里插入图片描述
当点击这个开关按钮时，电灯会熄灭此时效果展示：
在这里插入图片描述
再次点击，电灯会呈现亮起和熄灭的状态

接下来已经迫不及待的想要看看代码了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
最低0.47元/天 解锁文章
须臾~
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript源代码】js实现电灯开关效果.docx
12-29
js实现电灯开关效果 　　本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下　　通过对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
帮我写一个js的点击开关按钮切换灯泡开关状态
weixin_42596246的博客
02-18 342
<p>我可以给你一个简单的示例，可以帮你实现点击开关按钮切换灯泡开关状态的功能：<script> var lightOn = false;function switchLight(){ if (lightOn == false) { lightOn = true; document.getElementById("lightBulb").src = "o...
JS基础-开关灯案例
qq_43781887的博客
04-16 4055
要达到的效果图展示 初始状态 点击关灯之后变为 再点开灯又变为第一个状态。 整体思路：首先设置初始的状态body的背景色为白色，按钮中的文字为关灯，初始状态默认是开着灯的，然后设置一个初始的flag变量，flag=0，然后给按钮设置js事件，点击按钮，如果flag=0则把背景色变为黑色同时把按钮里面的文字改成开灯，同时设置flag=1；如果flag=1则把背景色变为白色，同时把按钮里面的文字改为关灯。 代码： <!DOCTYPE html> <html lang="e
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 5984
js实现开关灯效果
JavaScript中开关灯案例展示
m0_71345904的博客
06-27 1751
今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置； 在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
前端小练习JS实现网页开灯和关灯
weixin_51983027的博客
11-30 1325
思路：首先是获取开关灯按钮元素和body元素，然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色，按钮的背景色变为白色，按钮由关灯字样变为开灯字样，然后再点击按钮，又由开灯变为关灯，页面背景色变为白色。基于javascript，css，html实现的一个简单好用的关灯开灯小案例
javaScript:操作元素-开关灯小案例(4)
heitu_的博客
12-27 206
实现页面模拟开关灯小案例
JavaScript实现网页关灯效果
jakelihua
12-07 1769
简介：本文讲解的是，如何使用JavaScript实现我们经常看见的网页的关灯效果。
JavaScript实现电灯开关小案例
10-15
主要为大家详细介绍了JavaScript实现电灯开关小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Java使用桥接模式实现开关和电灯照明功能详解
08-27
"Java使用桥接模式实现开关和电灯照明功能详解" Java 使用桥接模式实现开关和电灯照明功能的主要思想是将一个系统的抽象化和实现化分离，使得它们可以独立地变化。桥接模式可以将一个系统的多维度变化降低到最小，...
JS实现灯泡开关特效
10-16
总结来说，这个JS灯泡开关特效通过结合HTML、CSS和JavaScript实现了交互式的灯泡开关效果。用户点击按钮时，不仅灯泡图像会相应地改变，而且还能看到实时的时间显示。这种效果可以作为学习JavaScript事件处理、DOM...
基于LN074B探测器实现电灯节能自动开关的设计
01-20
电灯节能自动开关外围器件很少，节约了空间和成本及调试时间，提高整机可靠胜，如图l为整体结构框图。路灯使用这种节能装置后，将会随着周围光线变化自动开关，不会再出现周围可见度较高而路灯依然亮着的情况。而到...
Javascript简单学习小案例——开关灯
qq_51367068的博客
09-21 873
学习了一下js，这边做了一个小小的案列。 看的b站上黑马的教学视频，对他的灯泡案例进行了一点改变。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小pj的灯泡</title> <style> .d1{ /*border: 1px solid;*/
js实现开关灯案例代码及做的时候出现的问题
mystic2220的博客
07-11 1185
js基础练习
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
繁依Fanyi的博客
10-15 1358
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
JS电灯开关案例
小苏(º﹃º )的博客
04-20 747
利用js控制电灯开关题目：分析：实现方法：方法一：方法二： 题目：   通过js来控制电灯的开关 分析：   获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关 实现方法： 方法一：   获取图片元素，通过给按钮绑定点击事件来控制电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
javascript案例6——开关灯、背景变化
努力、拼搏、奋进
05-07 684
一、案例描述 点击小人物，背景从白天切换到黑夜，并且小人物图片会切换到黑夜模式，再点击又会恢复成白天。逻辑和密码显示隐藏是相同的。 二、案例效果演示 三、案例局部代码 css代码 <style> img { position: absolute; right: 0; top: 0; } </style> html代码 <img src="./img/day.png" /> js代码 <script>
操作元素之修改样式属性
leechoy
06-12 627
<!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>..
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 770
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
声控模式通过口令实现电灯开关及亮度调节设计电路
06-01
5. 通过控制继电器模块的通断，实现灯光的开关。 6. 使用PWM信号控制可调光电路，以调节灯光的亮度。 需要注意的是，以上是一个简单的电路设计方案，实际的电路设计可能会更加复杂。此外，还需要考虑可靠性、稳定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值