最终效果是这样的:js动态时钟和添加图片
首先要有img文件,文件里要有这几张图片:
新建文件time.html,具体实现
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>动态时间</title>
<script>
window.οnlοad=function(){
var oBody=document.body;
var oP=document.getElementById('time');
var aImg=document.getElementsByTagName('img');
//定时器(每一(1000毫秒)秒钟执行一次)
setInterval(fnTime,1000);
function fnTime()
{
//获取时间
var mytime=new Date();
//获取小时
var iHours=mytime.getHours();
//获取分钟
var iMin=mytime.getMinutes();
//获取秒数
var iSec=mytime.getSeconds();
//alert(iMin);
var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
oP.innerHTML=str;
//循环六次(有六张图片)
for(var i=0;i<str.length;i++)
{
aImg[i].src='img/'+str.charAt(i)+'.JPG';
}
}
}
function toTwo(n)
{
return n<10?'0'+n:''+n;
}
</script>
</head>
<body>
<p id="time" style="font-size:60px;"></p>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</body>
</html>