首先需要几张图片:
接下来就到写代码了(大体思路是先插入上面的图片,点击图片自动切换,利用document.getElementById()找到图片中的id并根据点击onclick:switch()来变换图片并将点击图片时所对应的时间显示在灯泡右边):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灯泡演示图</title>
<style type="text/css">
html,body{
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
*{
margin: 0px;
padding: 0px;
}
body > div{
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="pic_bulboff.gif" style="width: 150px;height: 250px;margin-left: 100px;margin-top: 80px;"id="light"/><br/>
<img src="on.png" id="c1" style="width: 100px;height: 150px;margin-left: 125px;margin-top: 20px;" onclick="switch1()"/>
</div>
<div id="show" >
</div>
</body>
<script type="text/javascript">
var i = 0;
var pic = ["pic_bulbon.gif","pic_bulboff.gif"];
var switch2 = ["off.png","on.png"];
function switch1(){
document.getElementById("light").src = pic[i];//获取灯泡并赋值
document.getElementById("c1").src = switch2[i];//获取开关并赋值
//时间
var time = new Date();
var x = document.getElementById("show");
//判断是打开还是关闭
if(i == 0){
i = 1;
x.innerHTML += time.getFullYear()+":"+(time.getMonth()+1)+":"+time.getDate()+":"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"灯亮了"+"<br/>"+"<br/>";
}else{
i = 0;
x.innerHTML += time.getFullYear()+":"+(time.getMonth()+1)+":"+time.getDate()+":"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"灯灭了"+"<br/>"+"<br/>";
}
}
</script>
</html>
效果视图: