JavaScript基础开关灯案例

最新推荐文章于 2023-05-15 19:36:36 发布
最新推荐文章于 2023-05-15 19:36:36 发布
阅读量292 收藏
点赞数
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46362428/article/details/106146113
版权

JavaScript基础开关灯案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点亮灯泡</title>
	</head>
	<body>
		<script>
			function changimage()
			{
				element=document.getElementById('myimage')
				if(element.src.match("bullbon"))
				{
					element.src="../img/bullboff.gif";
				}
				else
				{
					element.src="../img/bullbon.gif";
				}
				
			}
		</script>
		
		<img id="myimage" src="../img/bullboff.gif"onclick="changimage()" alt="my image gallery">
		![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051517193456.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MzYyNDI4,size_16,color_FFFFFF,t_70)
		<p>太暗了，开一下灯吧！</p>
	</body>
</html>

在这里插入图片描述
.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/

憨憨的官
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础-开关灯案例
qq_43781887的博客
04-16 4011
要达到的效果图展示 初始状态 点击关灯之后变为 再点开灯又变为第一个状态。 整体思路：首先设置初始的状态body的背景色为白色，按钮中的文字为关灯，初始状态默认是开着灯的，然后设置一个初始的flag变量，flag=0，然后给按钮设置js事件，点击按钮，如果flag=0则把背景色变为黑色同时把按钮里面的文字改成开灯，同时设置flag=1；如果flag=1则把背景色变为白色，同时把按钮里面的文字改为关灯。 代码： <!DOCTYPE html> <html lang="e
入门级HTML5案例，开关灯效果。
11-26
在开灯状态下，有笑脸的形状。在关灯状态下，会有小鬼移动。主要运用的是css技术，JavaScript只用了一个。适合刚刚入门的选手，欢迎指出问题。。
JavaScript中开关灯案例展示
m0_71345904的博客
06-27 1709
今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置； 在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
HTML5实现点击触发灯泡开关
m0_52239519的博客
11-14 2511
效果图 提示：以下是本篇文章正文内容，下面案例可供参考 代码 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
案例 --开关灯
weixin_54902466的博客
06-20 485
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&..
操作元素之修改样式属性
leechoy
06-12 606
<!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>..
JavaScript实现电灯开关小案例
10-15
主要为大家详细介绍了JavaScript实现电灯开关小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现的开关灯泡点击切换特效示例
10-16
主要介绍了JavaScript实现的开关灯泡点击切换特效,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JS/jQuery实现简单的开关灯效果【案例】
10-17
主要介绍了JS/jQuery实现简单的开关灯效果,结合具体实例形式分析了javascript/jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 5885
js实现开关灯效果
开关灯案例
fdsal的博客
10-04 1131
开关灯案例 开始背景颜色为白色，当单机按钮的时候，背景变成黑色，再单击的时候背景又变成白色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
javascript案例6——开关灯、背景变化
努力、拼搏、奋进
05-07 653
一、案例描述 点击小人物，背景从白天切换到黑夜，并且小人物图片会切换到黑夜模式，再点击又会恢复成白天。逻辑和密码显示隐藏是相同的。 二、案例效果演示 三、案例局部代码 css代码 <style> img { position: absolute; right: 0; top: 0; } </style> html代码 <img src="./img/day.png" /> js代码 <script>
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1280
灯泡开关
JavaScript实现网页关灯效果
jakelihua
12-07 1522
简介：本文讲解的是，如何使用JavaScript实现我们经常看见的网页的关灯效果。
js开关灯
weixin_69491512的博客
05-15 473
【代码】js开关灯。
Javascript简单学习小案例——开关灯
qq_51367068的博客
09-21 844
学习了一下js，这边做了一个小小的案列。 看的b站上黑马的教学视频，对他的灯泡案例进行了一点改变。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小pj的灯泡</title> <style> .d1{ /*border: 1px solid;*/
点击开关灯效果html,js实现电灯开关效果
weixin_32043813的博客
06-09 2112
本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片属性2.绑定单击事件3.点击时切换图片1.通过按钮实现电灯开关Title 关function f1() {//开let bt1=document.getElementById("bt1");//获取按钮idlet im...
js+html实现电灯的打开与关闭
q_2540638774的博客
10-23 1166
js+html实现电灯的打开与关闭 第一次写博客，有什么不好的地方还请告知 一、介绍 其实就是不同图片的转换来实现电灯的打开和关闭 ，并且显示打开和关闭的时间 1.当点击on或短灯绳时电灯变亮，并显示打开时间 2.点击off或长灯绳时，电灯不亮，并显示关闭时间 这是代码实现之后的界面，接下来看代码 二、先写好界面的代码，如图： <div style="width: 900px; heigh...
js实现开关灯案例代码及做的时候出现的问题
mystic2220的博客
07-11 1167
js基础练习
js开关灯案例
最新发布
05-30
以下是一个基于JavaScript的简单开关灯案例： HTML部分： ``` <!DOCTYPE html> <html> <head> <title>开关灯</title> </head> <body> <button onclick="switchLight()">开关灯</button> <img id="myImage" src="light_off.png"> <script src="switchLight.js"></script> </body> </html> ``` JavaScript部分（switchLight.js）： ``` function switchLight() { var image = document.getElementById("myImage"); if (image.src.match("light_off")) { image.src = "light_on.png"; } else { image.src = "light_off.png"; } } ``` 在这个案例中，我们使用了一个按钮和一个图片。当按钮被点击时，我们调用了`switchLight()`函数。这个函数会获取图片元素，然后检查它的`src`属性是否包含“light_off”字符串。如果包含，就将它的`src`属性修改为“light_on.png”，灯就亮了；如果不包含，就将它的`src`属性修改为“light_off.png”，灯就灭了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值