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

最新推荐文章于 2021-09-21 16:03:49 发布

原创最新推荐文章于 2021-09-21 16:03:49 发布 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#初学者 #萌新 #HMTL #JS

这篇博客旨在帮助初学者通过HTML和JS创建一个互动的灯泡开关效果。用户点击灯泡图片可使其发光，同时点击开关会显示灯泡亮灭的时间。文章包含CSS样式、HTML结构及JS实现代码。

作业目标
使用图片制作简单的灯泡开关操作
步骤
实现的最终结果
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：代码有点乱