javascriptタイマーが時間自動更新の特効を実現します。
4440 ワード
写真は自分でいくつか探して換えてもいいです。
<!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>