js 实现一个开灯关灯操作

男娘i 2023-01-16 02:43 178阅读 0赞

<html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    	
    <script>
    function changeImage()
    { 
    	element=document.getElementById('myimage')
    	var lamp=document.getElementById('lamp')
    	if (element.src.match("bulbon"))
    	{ 
    		element.src="/images/pic_bulboff.gif";
    		lamp.innerHTML="ON"
    	}
    	else
    	{ 
    		element.src="/images/pic_bulbon.gif";
    		lamp.innerHTML="OFF"
    	}
    }
    </script>
    <img  id="myimage"   src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>
    	<div  id="lamp" style=" cursor: pointer;" onclick="changeImage()" >ON</div>
    	
    </body>
    </html>

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

图片提供：

[https://download.csdn.net/download/weixin\_45932157/17113607][https_download.csdn.net_download_weixin_45932157_17113607]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/965720ea93c24ab68ff5aaab3b9a4186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/fe78d694063247a3ae2a4b194a0bfed9.png
[https_download.csdn.net_download_weixin_45932157_17113607]: https://download.csdn.net/download/weixin_45932157/17113607

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关开关灯（网页版）

开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

客官°小女子只卖身不卖艺/ 2023年10月03日 15:21/ 0 赞/ 19 阅读

相关 js实现开关灯游戏

需求：点击三个按钮，页面出现不同数量的“灯” 所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。代码在这里~~~ [https

冷不防/ 2023年06月05日 08:10/ 0 赞/ 23 阅读

相关开关灯案例

效果图： ![在这里插入图片描述][20200613113612416.gif] 源代码 <!DOCTYPE html> <html lang="en">

女爷i/ 2023年02月17日 08:56/ 0 赞/ 57 阅读

相关 js 实现一个开灯关灯操作

<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>

男娘i/ 2023年01月16日 02:43/ 0 赞/ 179 阅读

相关 jquery开关灯案例_jQuery----操作类样式（依托开关灯案例）

在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css()方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案

冷不防/ 2022年12月31日 15:23/ 0 赞/ 171 阅读

相关 gsap+svg开关灯切换按钮js特效

[下载地址][Link 1] gsap+svg开关灯切换按钮特效，很有创意JavaScript开关特效。 ![1632803095.png][] dd: [Link

r囧r小猫/ 2022年09月13日 14:21/ 0 赞/ 313 阅读

相关 JavaScript开关灯投影效果

[下载地址][Link 1]JavaScript实现的开关灯投影效果，CSS3左右摇摆动画特效。 ![1631561784.png][] dd: [Link 1]: h

痛定思痛。/ 2022年09月11日 09:18/ 0 赞/ 186 阅读

相关使用javascript实现开灯关灯案例

使用javascript实现开灯关灯案例 <!DOCTYPE html> <html lang="en"> <head> <met

一时失言乱红尘/ 2022年02月03日 15:07/ 0 赞/ 263 阅读

相关 30个Python物联网小实验3：使用按钮开灯关灯

使用按钮开灯关灯接线图非常简单，LED接`GPIO17`号口，按钮接`GPIO2`号口，负极接GND地线。代码也非常简单： from gpio

我就是我/ 2022年01月18日 23:27/ 0 赞/ 369 阅读

相关 jQuery实现开关灯效果案例

效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

﹏ヽ暗。殇╰゛Y/ 2021年06月22日 15:35/ 0 赞/ 569 阅读