##JavaScript灯泡开关

最新推荐文章于 2023-10-15 23:00:40 发布
最新推荐文章于 2023-10-15 23:00:40 发布
阅读量356 收藏
点赞数 2
分类专栏： JavaScript 文章标签： 灯泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44890539/article/details/102533272
版权

JavaScript–灯泡开关可以点击开关按钮，灯泡亮或关闭，旁边有显示的灯泡亮或关闭的时间

这是点击后的效果(图片是自己P的，有点难看，不要见怪)
在这里插入图片描述
下面是代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灯泡开关</title>
		<style>
			#div1{
				width: 500px;
				height: 500px;
				float: left;
			}
			#bulb1{
				width: 400px;
				height: 400px;
			}
			#div2{
				float: right;
				margin-right: 200px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img src="img/bulb1.png" id="bulb1"/>
		</div>
		<div id="div2">
		</div>
		<div>
			<input type="button" value="开关" id="btn" onclick="getStr()">
		</div>
		<script>
			var flag = true;
			function getStr(){
				var bulb = document.getElementById("bulb1");
				if(flag){
					bulb.src = "img/bulb2.png";
					document.getElementById("div2").innerHTML = date()+"灯开了";
					flag = false;
				}else{
					bulb.src = "img/bulb1.png";
					document.getElementById("div2").innerHTML = date()+"灯关了";
					flag = true;
				}
			}
			
			/**
			 * 本地时间方法
			 */
			function date(){
				var strTime = new Date();
				var year = strTime.getFullYear();
				var month = strTime.getMonth()+1;
				var date = strTime.getDate();
				var hour = strTime.getHours();
				var minute = strTime.getMinutes();
				var miao = strTime.getSeconds();
				var time = year +"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+miao+"秒";
				//必须由返回值,才能显示时间
				return time;
			}
		</script>
	</body>
</html>
奥申
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 点击灯泡开关
qq_43623306的博客
05-30 2521
JavaScript 点击灯泡开关 首先导入两张照片： 方法一: <img src="./img/1.gif" alt="" onclick="toggle()" id="bulb"> <script> var bulbImg = document.getElementById('bulb'); ...
js灯泡开关编写
ssscxs的博客
10-13 176
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> //图片路径 ```<img src="1.png.png" id="image" width...
JavaScript简单实现灯泡开关功能
weixin_45745895的博客
10-13 678
在写这程序之前 先准备两个图片 如图???? 实现之后的效果 如图???? 代码如下 首先写一个图片的样式 和一个开关的方法名 接下来就是JS代码实现功能 时间方法实现 ...
js做轮播图（简单版的）
datuzidppd5556的博客
08-09 325
js做轮播图（简单版的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
JavaScript 开关灯泡
chaichai_0810的博客
05-09 642
实现:点击按钮让图片关灯变为开灯，循环点击则同步更新状态。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点灯开关</title> </head> <body> <!-- 设置点击事件 --> <input type="button" value="开/关灯" onclick="c...
JavaScript实现灯泡开关
jb18602754485的博客
03-29 1554
实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img src="img/off.gif" id="light"> <script> var light = document.getElementById(
JavaScript实现的开关灯泡点击切换特效示例
10-16
在JavaScript编程中，实现交互效果是一项常见的任务，例如在网页上创建一个开关灯泡的点击切换特效。这个特效可以通过监听用户的点击事件，并根据灯泡图片的状态进行改变来实现。在这个例子中，我们主要关注以下几个...
JS实现灯泡开关特效
10-16
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个灯泡开关的特效。这个特效包括了在点击“开灯”或“关灯”的按钮时，改变灯泡图像的状态，同时更新显示的时间。我们将从HTML结构、CSS样式以及...
javascript实现点亮灯泡特效示例
12-13
通过以上分析，我们可以了解到这个简单的网页应用是如何利用HTML、CSS和JavaScript实现灯泡开关效果的。用户点击灯泡图片时，JavaScript会根据当前图片的状态来切换图片，达到模拟灯泡点亮和熄灭的效果。这种技术...
js+css3灯泡开关黑白切换特效
06-24
在本文中，我们将深入探讨如何使用JavaScript（js）和CSS3技术实现一款创新的"灯泡开关黑白切换特效"。这个特效是一个具有圆形灯泡形状的按钮，当用户点击时，它会展示出黑夜和白天的交互动画，从而营造出独特的视觉...
319. 灯泡开关（JS实现）
zjw_python的博客
08-17 499
1 题目 初始时有 n 个灯泡关闭。 第 1 轮，你打开所有的灯泡。 第 2 轮，每两个灯泡你关闭一次。 第 3 轮，每三个灯泡切换一次开关（如果关闭则开启，如果开启则关闭）。第 i 轮，每 i 个灯泡切换一次开关。 对于第 n 轮，你只切换最后一个灯泡的开关。 找出 n 轮后有多少个亮着的灯泡。 示例: 输入: 3 输出: 1 解释: 初始时, 灯泡状态 [关闭, 关闭, 关闭]. 第一轮后, 灯泡状态 [开启, 开启, 开启]. 第二轮后, 灯泡状态 [开启, 关闭, 开启]. 第三轮后, 灯泡状态
轻松学习JavaScript四：JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
热门推荐
life is wonderful
11-18 1万+
我们开始解释JS在HTML中作用。对于因特网和视窗操作系统，JavaScript都意味着未来。        (1)JavaScript：写入HTML输出        实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
JavaScript控制灯泡开关
H_zhiyi的博客
11-16 784
在html中使用<button>按钮去控制灯泡的开关。 首先写出HTML中的灯泡和开关按钮： HTML： <div id=""> <img src="guan.jpg" ><br> <button onclick="kaiGuan()" id="kg">开</button> </div> JS: //使用变量获取到html中的灯泡和按钮； var deng = document.getEl
JS中用一个button按钮实现开关灯效果
fightingfjj的博客
11-15 5251
JS中用一个button按钮实现开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1520
灯泡开关
JS小练习---开关灯泡
gabby____的博客
08-10 1427
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script&gt; function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/i/eg_bulb...
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
繁依Fanyi的博客
10-15 1400
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
javascript灯泡闪烁
最新发布
07-10
JavaScript中创建灯泡闪烁效果通常涉及到定时器和改变元素样式。你可以通过设置一个循环，周期性地切换灯泡的CSS属性，如`opacity`（透明度）或者`brightness`（如果支持的话），来模拟灯泡闪烁的效果。下面是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值