javascpirt + HTML实现开关点亮灯泡

首先需要几张图片:
亮了的灯泡
灭了的灯泡
处于打开的开关
处于关闭状态下的开关
接下来就到写代码了(大体思路是先插入上面的图片,点击图片自动切换,利用document.getElementById()找到图片中的id并根据点击onclick:switch()来变换图片并将点击图片时所对应的时间显示在灯泡右边):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灯泡演示图</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height:100%;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			*{
				margin: 0px;
				padding: 0px;
			}
			
			body > div{
				float: left;
				width: 50%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="pic_bulboff.gif" style="width: 150px;height: 250px;margin-left: 100px;margin-top: 80px;"id="light"/><br/>
			<img src="on.png" id="c1" style="width: 100px;height: 150px;margin-left: 125px;margin-top: 20px;" onclick="switch1()"/>
		</div>
		
		<div id="show" >
			
		</div>
	</body>
	<script type="text/javascript">
		var i = 0;
		var pic = ["pic_bulbon.gif","pic_bulboff.gif"];
		var switch2 = ["off.png","on.png"];
		function switch1(){
			document.getElementById("light").src = pic[i];//获取灯泡并赋值
			document.getElementById("c1").src = switch2[i];//获取开关并赋值
			//时间
			var time = new Date();
			var x = document.getElementById("show");
			//判断是打开还是关闭
			if(i == 0){
				i = 1;
				x.innerHTML += time.getFullYear()+":"+(time.getMonth()+1)+":"+time.getDate()+":"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"灯亮了"+"<br/>"+"<br/>";
			}else{
				i = 0;
				x.innerHTML += time.getFullYear()+":"+(time.getMonth()+1)+":"+time.getDate()+":"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"灯灭了"+"<br/>"+"<br/>";
			}
		}
	</script>
</html>

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

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答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`);反之,如果灯泡当前是开启状态,点击按钮将把灯泡状态切换为关闭状态。 记得将上述的HTMLJavaScript代码放在页面的合适位置,如`<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、付费专栏及课程。

余额充值