javascript 定时器实现时间自动更新的特效

413899327

浏览: 529245 次
性别:
来自: 北京

最近访客更多访客>>

hjz

lgkw

wuxiandeng

柠檬小瑞

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript html xhtml

图片自己找几个替换下就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>

分享到：

javascript 内存和性能闲聊 | java 对象深拷贝通用方法

2012-12-19 14:15
浏览 2151
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 定时器实现时间自动更新的特效

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 定时器 实现时间自动更新的特效

评论

发表评论

相关推荐

java 和 javascript split 的区别！

javascrip如何创建命名空间

阿里电话面试

setTimeout 和 setInterval最小执行时间问题

IE6用setAttribute添加事件无效

在IE6下 a标签添加行间onclick事件导致页面跳转失败原因分析

如何禁用浏览器的后退/刷新，backspace退格键

javascript阻止事件冒泡和浏览器的默认行为

JavaScript中两个等于号和三个等于号之间的区别

javascript中一些数据类型以及奇怪的特性

javascript中为5种为假的情况测试

javascript中变量声明提升（Hoisting）的理解 ---What is hoisting in Javascript?

JavaScript中两个等于号和三个等于号之间的区别

javascript的函数参数arguments 并不是数组

弹出层居中问题版1

javascript中字符串格式json如何转化成json对象

javascript 内存和性能闲聊

最近访客更多访客>>

javascript 定时器实现时间自动更新的特效