您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
指定某时间进行图片路径的调换
发布时间：2015-03-06 12:39:44编辑：雪饮阅读（）
最近项目要求每天7-19点之间网页中某处要放置一个图片（设为图片a），其余时间段要放置另一个图片（设置为图片b），毕竟如此替换毕竟麻烦，特别是在做站群的时候最是浪费时间，现在为了节约时间于是做了自动实现图片的替换，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Untitled Document</title>
<style type="text/css">
#tishi{
width:500px;
height:50px;
background:pink;
margin:0 auto;
text-align:center;
line-height:50px;
}
#logo{
width:100px;
height:100px;
margin:0 auto;
}
#logo img{
width:120px;
height:100px;
}
#dangqianshijian{
width:500px;
height:50px;
line-height:50px;
text-align:center;
margin:0 auto;
background:pink;
}
</style>
<script type="text/javascript">
function dingshi(){
var myDate = new Date();
var shi=myDate.getHours();
var fen=myDate.getMinutes();
var miao=myDate.getSeconds();
document.getElementById("dangqianshijian").innerHTML="当前时间："+shi+"时"+fen+"分"+miao+"秒";
if(shi>7 & shi<19){
document.getElementById("tupian").src="jyzj.jpg";
}
else{
document.getElementById("tupian").src="anli001.jpg";
}
setTimeout("dingshi()",1000);
}
</script>
</head>
<body onload="dingshi()">
<div id="tishi">下面是logo到了设定的时间后会变化</div>
<div id="logo"><!--<img src="jyzj.jpg"/>--><img src="anli001.jpg" id="tupian"/></div>
<h3 id="dangqianshijian"></h3>
</body>
</html>
值得注意的是本实验针对于客户端，所以对于本地时间的修改也是会影响到的，当你修改本地时间之后你又会发现webkit内核的机制在此时的弊端了，你修改的时间不能立马记录，而ie、火狐却是可以随时更新的。若是要想要最准确的还是用ajax来获取服务器端时间比较好吧。
关键字词：js,图片路径,雪饮个人博客