通过js实现电灯开关案例

最新推荐文章于 2022-06-27 13:41:07 发布
最新推荐文章于 2022-06-27 13:41:07 发布
阅读量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 ch
最低0.47元/天 解锁文章
须臾~
关注
专栏目录
利用js实现电灯开关案例
小苏(º﹃º )的博客
01-18 607
  通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。   首先对本案例进行一个分析，过程如下：     1.获取图片属性     2.绑定单击事件     3.点击时切换图片 1.通过按钮实现电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body
JS电灯开关案例
小苏(º﹃º )的博客
04-20 773
利用js控制电灯开关题目：分析：实现方法：方法一：方法二： 题目：   通过js来控制电灯的开关 分析：   获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关 实现方法： 方法一：   获取图片元素，通过给按钮绑定点击事件来控制电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
【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实现开关灯效果
10-16
主要为大家详细介绍了js实现开关灯效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现开关灯案例
qq_43405603的博客
08-19 951
<!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> *{ pa.
JavaScript开关灯小案例
qq_52175048的博客
01-30 1367
JavaScript开关灯小案例
JavaScript中开关灯案例展示
m0_71345904的博客
06-27 1804
今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置； 在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
JavaScript案例开关灯
爱人io
05-10 1763
案例1：电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> /* 分析：
使用js编写一个开关灯案例？
weixin_47612165的博客
10-05 616
<!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> <button>按钮&
JavaScript实现电灯开关小案例
10-15
在JavaScript编程中，实现电灯开关小案例是一个基础但有趣的实践，它可以帮助初学者更好地理解事件处理、DOM操作以及变量状态的控制。在这个案例中，我们利用JavaScript来模拟现实世界中的电灯开关行为，通过点击...
JS/jQuery实现简单的开关灯效果【案例】
10-17
主要介绍了JS/jQuery实现简单的开关灯效果,结合具体实例形式分析了javascript/jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JS基础-开关灯案例
qq_43781887的博客
04-16 4120
要达到的效果图展示 初始状态 点击关灯之后变为 再点开灯又变为第一个状态。 整体思路：首先设置初始的状态body的背景色为白色，按钮中的文字为关灯，初始状态默认是开着灯的，然后设置一个初始的flag变量，flag=0，然后给按钮设置js事件，点击按钮，如果flag=0则把背景色变为黑色同时把按钮里面的文字改成开灯，同时设置flag=1；如果flag=1则把背景色变为白色，同时把按钮里面的文字改为关灯。 代码： <!DOCTYPE html> <html lang="e
js按钮开关灯小案例（点击按钮背景颜色内容转换）
weixin_45631722的博客
07-11 2184
点击按钮切换开灯和关灯 css代码 <style> body { background-color: aqua; } p { color: red; margin-top: 50px; text-align: center; } </style> html和js代码 <body>
js小案例：控制电灯开关
学亮编程手记
12-22 371
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var flag = false;//代表关闭 function fun(){ var light = document.getElementByI.
JavaScript基础开关灯案例
wgy-wtt
05-15 325
JavaScript基础开关灯案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点亮灯泡</title> </head> <body> <script> function changimage() { element=document.getElementById('myimage')
js写简单开关灯案例
weixin_46508703的博客
02-11 477
body部分 <button class="btn">开关灯</button> js部分 // 1、获取元素 var btn=document. querySelector (".btn"); var html=document. querySelector("html"); // 2、注册事件 var flag=0; btn. onclick=function(){ if(flag==0){ html. style. backgroundColor=
javascript案例6——开关灯、背景变化
努力、拼搏、奋进
05-07 727
一、案例描述 点击小人物，背景从白天切换到黑夜，并且小人物图片会切换到黑夜模式，再点击又会恢复成白天。逻辑和密码显示隐藏是相同的。 二、案例效果演示 三、案例局部代码 css代码 <style> img { position: absolute; right: 0; top: 0; } </style> html代码 <img src="./img/day.png" /> js代码 <script>
js案例---开关灯效果
wind的博客
02-01 674
实现： <!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> .current { .
Javascript简单学习小案例——开关灯
qq_51367068的博客
09-21 924
学习了一下js，这边做了一个小小的案列。 看的b站上黑马的教学视频，对他的灯泡案例进行了一点改变。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小pj的灯泡</title> <style> .d1{ /*border: 1px solid;*/
Java桥接模式详解：电灯开关实现与应用
Java使用桥接模式实现开关和电灯照明功能是一种设计模式，它在软件设计中被用来解决多维度变化的问题，特别是当一个类的抽象部分（如开关）必须独立于其实现部分（如电灯）时。本文将深入解析桥接模式的概念、原理，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值