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 领取源代码