用HTML.JS制作一个简单的灯泡

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Mr_hanghang/article/details/102534134

作业目标
使用图片制作简单的灯泡开关操作
步骤
实现的最终结果
1

2
图片中点击灯泡可以使灯泡发光
图片中点击开关可以使灯泡发光并且右边文本框中显示什么时间灯亮和灯灭

代码块

CSS样式

<style>
	#xianshi{
		background: black;
	     color: red;
	}	

HTML具体代码

	<img src="3.PNG" width="300px" height="400px" id="imgShow" onclick="chang()" />
			<textarea rows="20" cols="40" id="xianshi"></textarea>
			<img src="8.PNG"  width="40px" height="60px" id="img" onclick="chang(),init()"/>

JS具体代码

<script type="text/javascript">
				
				function init(){
					var date=new Date();
					//年
				    var year=date.getFullYear();
				    //月
				    var month=date.getMonth()+1;
				    //日
				    var day=date.getDate();
				    //时
				    var hh=date.getHours();
				    //分
				    var mm=date.getMinutes();
				    //秒
				    var ss=date.getSeconds();
				    var rq=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss+time;
				    document.getElementById("xianshi").innerHTML=rq;
					//alert(rq);
				
				}
				//3.PNG为灯泡关闭图片
				//4.PNG为灯泡开启图片
				//7.PNG是开关"OFF"
				//8.PNG是开关"ON"
				
				var i=0;
				var time="";
				var imgs=["4.PNG","3.PNG"];
				var imgx=["7.PNG","8.PNG"];
				function chang(){
					document.getElementById("imgShow").src=imgs[i];
					document.getElementById("img").src=imgx[i];
					if(i==0){
						i=1
					time="----灯亮了";
					}else{
						i=0;
					time="----灯灭了";
					}
					
				}
				
			</script>

PS：代码有点乱