javascpirt + HTML实现开关点亮灯泡

最新推荐文章于 2024-03-17 08:00:00 发布

qq_2417580538

最新推荐文章于 2024-03-17 08:00:00 发布

阅读量591

点赞数 3

本文链接：https://blog.csdn.net/qq_2417580538/article/details/102531771

版权

首先需要几张图片：
亮了的灯泡
灭了的灯泡
处于打开的开关
处于关闭状态下的开关
接下来就到写代码了(大体思路是先插入上面的图片，点击图片自动切换，利用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>