javascript 定时器实现时间自动更新的特效-优快云博客

本文链接：https://blog.youkuaiyun.com/stairheaven/article/details/84369789

本文介绍了一个使用HTML和JavaScript实现的动态时间显示页面。页面通过不断更新图片来实时展示当前的时间，包括年、月、日、时、分、秒等信息。通过简单的脚本和图片替换，可以轻松创建一个具有动态效果的时钟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片自己找几个替换下就OK了!


<!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=utf-8" />
<title>无标题文档</title>
<style>
img{padding:0 ;margin:0;}
</style>
<script type="text/javascript">

window.onload = function() {
	var num = null ;
	var aImg = document.getElementsByTagName("img");


	function toDouble(num){
		return num < 10 ? "0" + num : ""+num ;
	}

	function fnTime(){
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth()+1;
		var day = date.getDate();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var seconds = date.getSeconds();

		var time = toDouble(year) + toDouble(month) + toDouble(day)  + toDouble(hours) +  toDouble(minutes) + toDouble(seconds);


		for(var i = 0 ,length = time.length; i < length; i++){
			aImg[i].src = "images/"+ time.charAt(i)+".gif";	
		}
	}
	setInterval( fnTime , 1000);
	fnTime();
}

</script>
</head>

<body>

   <div id="time"> 
			<img src=images/0.gif /><img src=images/0.gif /><img src=images/0.gif /><img src=images/0.gif />年
			<img src=images/0.gif /><img src=images/0.gif />月
			<img src=images/0.gif /><img src=images/0.gif />日
			<img src=images/0.gif /><img src=images/0.gif />时 	
			<img src=images/0.gif /><img src=images/0.gif />分
			<img src=images/0.gif /><img src=images/0.gif />秒
   	</div>
</body>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{padding:0 ;margin:0;}
</style>
<script type="text/javascript">

window.onload = function() {
	var num = null ;
	var pic = "";
	var oSpan = document.getElementsByTagName("span")[0];
	for(var i = 0 ; i < 4; i++){
		num = Math.floor(Math.random()*10) ;
		pic += "<img src=images/"+num+".gif />";
	}
	oSpan.innerHTML = pic; //alert(oSpan.innerHTML);

	function toDouble(num){
		return num < 10 ? "0" + num : ""+num ;
	}


	function fnTime(){
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth()+1;
		var day = date.getDate();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var seconds = date.getSeconds();

		var arrTime = [toDouble(year) ,"年",toDouble(month) ,"月", toDouble(day) ,"日", 
					   toDouble(hours) ,"时", toDouble(minutes) ,"分", toDouble(seconds),"秒"];

		pic = "";
		var index = null;
		for(var i = 0 ; i < arrTime.length; i++){
			index = arrTime[i];
			if(isNaN(index)){
				pic += index;
			} else {
				for(var n = 0 ; n < index.length; n++){
					pic += "<img src=images/"+ index.charAt(n)+".gif />" ;	
				}		
			}
		}
 		var oSpan = document.getElementById("time");
		oSpan.innerHTML =  pic;
	}
	setInterval( fnTime , 1000);
	fnTime();
}


</script>
</head>

<body>

   <input type="text" value=""  /> <span></span><br /><span id="time"></span>
</body>
</html>