用Html和JavaScript写一个灯泡变亮的代码案例

JavaScript实现的开关灯泡点击切换特效示例

作业目标–通过图片开关来控制灯泡的切换并且还要显示什么时间灯亮了和灯灭了

代码如下：

这是html代码：

	<div>
			<div style="float: left;"><img src="05.jpg" id="imgShow" height="1800px" width="1200px" />

				<img src="03.jpg" id="show" οnclick="changeImg()" height="300px" width="500px" /></div>

			<div id="text" style="font-size:100px; float: left; color:coral;"></div>
		</div>

这是js代码：

<script type="text/javascript">
		/**
		 * 定义时间的全局变量
		 */
			var date;
			var year;
			var month;
			var day;
			var hour;
			var minute;
			var second;
			var str;
			/**
		 	* 获取时间的方法
			 */
			function time() {
				date = new Date();
				year = date.getFullYear();
				month = date.getMonth() + 1;
				day = date.getDate();
				hour = date.getHours();
				minute = date.getMinutes();
				second = date.getSeconds();
				str = year + "年" + month + "月" + day + "日" + hour + "小时" + minute + "分" + second + "秒";

			}

			/**
			 * 控制灯亮和灯灭
		 	*/
			function changeImg() {
				light = document.getElementById("imgShow");
				time();
				setInterval(time(), 1000);
				if (light.src.match("06.jpg")) {
					light.src = "05.jpg";
					document.getElementById("show").src = "03.jpg";
					document.getElementById("text").innerHTML += str + "灯灭了" + "<br >";

				} else {
					light.src = "06.jpg";
					document.getElementById("show").src = "04.jpg";
					document.getElementById("text").innerHTML += str + "灯亮了" + "<br >";
				}

			}
		</script>

点击开启按钮显示什么时间灯亮了的效果如下：

点击关闭按钮显示什么时间灯灭了的效果如下：