js+html实现电灯的打开与关闭

js+html实现电灯的打开与关闭

第一次写博客，有什么不好的地方还请告知
一、介绍
其实就是不同图片的转换来实现电灯的打开和关闭 ，并且显示打开和关闭的时间
1.当点击on或短灯绳时电灯变亮，并显示打开时间
2.点击off或长灯绳时，电灯不亮，并显示关闭时间

这是代码实现之后的界面，接下来看代码
二、先写好界面的代码，如图：

<div style="width: 900px; height:500px; margin: 0 auto;">
			<div style="float: left; width: 70px;margin-top: 100px;">
				<img src="img/shout.png" id="lampCord" onclick="on_off()" />
			</div>
			<div style="width: 300px; height: 500px;text-align: center;float: left;">
				<div>
					<img src="img/pic_bulboff.gif" style="width: 150px; height: 300px;" id="bulbImage" />
				</div>
				<div>
					<img src="img/on.gif" style="width: 250px; height: 100px;" onclick="on_off()" id="on_off_img" />
				</div>
			</div>
			<div style="width: 400px; height: 500px;text-align: left;float: left;" id="div">

			</div>
		</div>

接下来就是js的实现了，请看：
先把每个功能的图片放入数组里面，然后通过 i 的值来获取更换的图片

<script type="text/javascript">
			var i = 0;
			var a = 1;//显示打开关闭电灯时间的次数
			var on_off_img = ["img/off.gif", "img/on.gif"];//存储打开和关闭按钮图片
			var bulbImg = ["img/pic_bulbon.gif", "img/pic_bulboff.gif"];//存储发光和不发光的电灯图片
			var lampCord =  ["img/long.png", "img/shout.png"];//存储灯绳图片
			var time = ["电灯打开时间：", "电灯关闭时间："];//存储显示电灯打开和关闭时间的文本

然后再来实现on_off()方法

//电灯打开或关闭
			function on_off() {
				document.getElementById('on_off_img').src = on_off_img[i];//获取开关按钮图片
				document.getElementById('bulbImage').src = bulbImg[i];//获取电灯图片
				document.getElementById('lampCord').src = lampCord[i];//获取灯绳图片
				on_time();//打开或关闭电灯时间的方法
				//判断如果i=0,让i=1(电灯发光)，否则i=0(电灯不发光)
				if(i == 0) {
					i = 1;
				} else {
					i = 0;
				}
			}

最后在写一个获取 打开和关闭的时间 的方法，如下：

//打开和关闭的时间
			function on_time() {
				var date = new Date();
				var myYear = date.getFullYear(); // 获取当前年份
				var myMonth = date.getMonth() + 1; // 获取当前月份
				var myDay = date.getDate() // 获取当前日（1- 31）
				var myHours = date.getHours() // 获取当前小时(0-23)
				var myMinu = date.getMinutes() // 获取当前分钟(0-59)
				var mySec = date.getSeconds() // 获取当前秒数(0-59)
				//让获取的打开或者关闭时间的文本进行累加
				document.getElementById("div").innerHTML += a + time[i] + myYear + "年" + myMonth + "月" + myDay + "日    " + myHours + ":" + myMinu + ":" + mySec + "<br/>";
				a++;//显示文本次数进行累加
				//若果显示次数大于21，则进行文本清空，并继续进行文本显示
				if(a > 21){
					document.getElementById("div").innerHTML = "";
					document.getElementById("div").innerHTML += time[i] + myYear + "年" + myMonth + "月" + myDay + "日    " + myHours + ":" + myMinu + ":" + mySec + "<br/>";
					a = 1;
				}
			}
</script>

–谢谢浏览
扫下面二维码关注微信公众号 回复：js1013 领取源代码