您的位置：首页 > Web前端 > JavaScript

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

2013-04-24 09:42 555 查看

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

Java代码

<!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>

Java代码

<!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 定时器 实现时间自动更新的特效

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