javascript实现开关灯

最新推荐文章于 2022-07-11 15:21:26 发布
最新推荐文章于 2022-07-11 15:21:26 发布
阅读量3.2k 收藏 3
点赞数
文章标签： javascript实现开关灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/style201904/article/details/90724159
版权

开关灯

 <style>
       body{background: black;cursor: pointer;}
       .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}
       .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;}
       .toggle{width: 80px;height: 40px;background: green;border-radius: 5px;margin-left: 10px;color: white;line-height: 40px;text-align: center;} 
    </style>

<body id="bg">
  <!-- 灯 -->
  <div class="lamp" id="lamp"></div>
  <!-- 灯线 -->
  <div class="pole"></div>  
  <!-- 开关 -->
  <div class="toggle" id="toggle">开灯</div>
  <script>
//    web前端三门语言
// html
// css  
// javascript===>脚本语言，丰富动画，操作事件等
// 需要写在script标签内，script标签可以放置在html的任意位置
// 比较常见的三个位置，
// 1.body体内，html标签下面
// 2.body体外的下面
// 3.head头部style标签的下面

//  js动效的操作思路：
//  1.操作谁先获取谁；
// var 创建、声明变量
// toggle 变量名
// document事件元素，事件流
// getElementById  获取元素通过ID名的形式。   
   var toggle = document.getElementById('toggle');
   var lamp = document.getElementById('lamp');
   var bg = document.getElementById('bg')
// 2.操作用什么事件
   toggle.onclick = function(){
    //验证当前操作
    // console.log代表打印某某某。
    // console.log(123456789)    
// 3.事件发生时需要做什么
//  if,else事件判断逻辑
//  innerHTML===>元素的内容
     if(toggle.innerHTML=='开灯'){
       lamp.style.background='yellow';
       bg.style.background='white'; 
      //开灯之后要将toggle改变为'关灯'
       toggle.innerHTML='关灯'    
     }else{
       lamp.style.background='#ccc';
       bg.style.background='black';
       toggle.innerHTML='开灯'  
     }
   }  



  </script>  
</body>

效果图
在这里插入图片描述
在这里插入图片描述

大可&不必
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现开关灯效果
10-16
主要为大家详细介绍了js实现开关灯效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现开关灯效果
爱酷码的博客
12-29 1307
题目默认是关灯图片，鼠标移动到图片上变成亮灯图片，鼠标离开变回关灯图片。在做成点击图片也可以切换图片 移动开关效果代码 <body> <div align="center"><img src="cankao/bulb_off.png" width="300px" onmouseover="onbulb()" onmouseout="offbulb()"></div><br/> </body> <script&g.
使用JavaScript做灯泡开关的效果
zyk262511的博客
10-13 363
使用JavaScript做灯泡开关的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>灯</title> <style> #a1{ float: left;...
JavaScript实现的开关灯泡点击切换特效示例
01-19
本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考，具体如下： 准备 首先要准备两张图片，一张是灯泡亮的图片，取名为on.jpg，另一张是灭的图片，取名为off.jpg，都放置到当前的目录下。 代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <title></title> <link rel=stylesheet href=> [removed] funct
JavaScript特效——开关灯泡
webbc的博客
08-15 5848
JavaScript特效非常炫，博主目前也正在学习，觉得挺有意思的。
JavaScript实现开关等效果
10-19
本文给大家分享一段简单的代码基于js实现开关灯效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
JavaScript实现电灯开关小案例
10-15
主要为大家详细介绍了JavaScript实现电灯开关小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
开灯问题
weixin_33713350的博客
06-30 45
开灯问题 时间限制：3000 ms | 内存限制：65535 KB 难度：1 描述 有n盏灯，编号为1~n，第1个人把所有灯打开，第2个人按下所有编号为2 的倍数的开关（这些灯将被关掉），第3 个人按下所有编号为3的倍数的开关（其中关掉的灯将被打开，开着的灯将被关闭），依此类推。一共有k个人，问最后有哪些灯开着？输入：n和k，输出开着的灯编号。k...
Allofthelights.js 网页开关灯特效代码
05-18
摘要:脚本资源,Ajax/JavaScript,开灯关灯特效,开关灯特效　　Allofthelights.js是一款专门用于网页上的开关灯特效插件，开关灯特效代码，点击关灯、点击开灯的效果，见到好多视频网站都有这种效果，关灯以后，只有视频窗口是下正常显示的，网页的其它部分都是黑的或不能看清楚，类似于把灯关了黑呼呼一片的效果，再次点击按钮则可开灯，网页内容就全部显示出来了。如果您需要这种开灯、关灯的效果，这个代码相必会很不错。
JS/jQuery实现简单的开关灯效果【案例】
10-17
主要介绍了JS/jQuery实现简单的开关灯效果,结合具体实例形式分析了javascript/jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
开关灯效果代码
11-07
开关灯效果代码
用js实现简单的灯的开关
Tao001100的博客
10-13 498
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表标题项目2创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用...
利用js实现电灯开关案例
小苏(º﹃º )的博客
01-18 548
  通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。   首先对本案例进行一个分析，过程如下：     1.获取图片属性     2.绑定单击事件     3.点击时切换图片 1.通过按钮实现电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body
js实现开关灯案例代码及做的时候出现的问题
mystic2220的博客
07-11 1168
js基础练习
帮我写一个js的点击开关按钮切换灯泡开关状态
最新发布
09-04
### 回答1： 我可以给你一个简单的示例，可以帮你实现点击开关按钮切换灯泡开关状态的功能：<script> var lightOn = false;function switchLight(){ if (lightOn == false) { lightOn = true; document.getElementById("lightBulb").src = "on.png"; } else { lightOn = false; document.getElementById("lightBulb").src = "off.png"; } } </script> ### 回答2： 当点击按钮时，需要在JavaScript中编写一个函数来切换灯泡的开关状态。首先，需要在HTML中创建一个按钮和一个灯泡的标签，并为按钮添加一个点击事件处理函数。 HTML代码如下： ```html <button id="toggleButton" onclick="toggleLight()">开关</button> <img id="lightBulb" src="light_off.png" alt="灯泡"> ``` 在JavaScript中，需要定义一个函数`toggleLight()`来处理按钮点击事件。函数将检查当前灯泡的状态，并相应地切换到另一个状态。可以使用JavaScript的`getElementById()`方法来获取按钮和灯泡的元素，然后使用`getAttribute()`和`setAttribute()`方法来获取和设置灯泡的开关状态。 JavaScript代码如下： ```javascript function toggleLight() { var lightBulb = document.getElementById("lightBulb"); var currentState = lightBulb.getAttribute("src"); if (currentState === "light_off.png") { lightBulb.setAttribute("src", "light_on.png"); } else { lightBulb.setAttribute("src", "light_off.png"); } } ``` 上述代码将在每次点击按钮时切换灯泡的开关状态。当灯泡处于关闭状态（`light_off.png`）时，点击按钮将把灯泡状态切换为开启状态（`light_on.png`）；反之，如果灯泡当前是开启状态，点击按钮将把灯泡状态切换为关闭状态。 记得将上述的HTML和JavaScript代码放在页面的合适位置，如`<head>`或`<body>`标签之间，以确保点击按钮时可以调用到`toggleLight()`函数，并正确地切换灯泡的开关状态。 ### 回答3： 以下是一个可以实现点击开关按钮切换灯泡开关状态的简单的 JavaScript 代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击开关按钮切换灯泡开关状态</title> <style> .bulb { width: 100px; height: 100px; background-color: gray; border-radius: 50%; } .on { background-color: yellow; } .off { background-color: gray; } </style> </head> <body> <button onclick="toggleBulb()">开关</button> <div id="bulb" class="bulb off"></div> <script src="script.js"></script> </body> </html> ``` JavaScript 代码（script.js）： ```javascript function toggleBulb() { var bulb = document.getElementById('bulb'); if (bulb.classList.contains('off')) { bulb.classList.remove('off'); bulb.classList.add('on'); } else { bulb.classList.remove('on'); bulb.classList.add('off'); } } ``` 这段代码首先给按钮绑定了一个 `onclick` 事件，当按钮被点击时，会触发 `toggleBulb` 函数。 `toggleBulb` 函数首先通过 `document.getElementById` 获取到 `bulb` 元素，然后通过 `classList` 属性判断炫耀是否具有 `off` 类。若有，则将其移除，并添加 `on` 类；若没有，则将 `off` 类添加进去，并移除 `on` 类。 这样，当灯泡处于关闭状态时，点击按钮会切换为开启状态，反之亦然。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值