GRN WEB SITE - Java Script 画像時計 (2)

Java Script 画像時計 (2)

画像を使った動く時計+α

smple

画像を変えるだけでいろいろな表示ができます。

Java Script ソース

document.write('<img src="am.jpg" name="p0"><IMG src="0.jpg" name="p1"><IMG src="0.jpg" name="p2">');
document.write('<img src="ten.jpg" name="p7"><IMG src="0.jpg"name="p3"><IMG src="0.jpg" name="p4">');
document.write('<img src="ten.jpg" name="p8"><IMG src="0.jpg" name="p5"><IMG src="0.jpg" name="p6">');

function jikoku3(){
  data   = new Date();

hour   = data.getHours();
  
  if((hour >= 12)){
  		hour   = hour - 12;
		hour2  = hour % 10;
  		hour1  = (hour-hour2) / 10 ;
		ampm = "pm";
  }else{
    	hour2  = hour % 10;
  		hour1  = (hour-hour2) / 10 ;
		ampm = "am";
  }

mine   = data.getMinutes();
  mine2  = mine % 10;
  mine1  = (mine - mine2) / 10;
  
  sec    = data.getSeconds();
  sec2   = sec % 10;
  sec1   = (sec - sec2) / 10;

document.p0.src =  ampm + ".jpg";  
document.p1.src =  hour1 + ".jpg";
document.p2.src =  hour2 + ".jpg";
document.p3.src =  mine1 + ".jpg";
document.p4.src =  mine2 + ".jpg";
document.p5.src =  sec1 + ".jpg";
document.p6.src =  sec2 + ".jpg";

document.p7.src =  "ten.jpg";
document.p8.src =  "ten.jpg";

}

setInterval("jikoku3()",1000);

// -->
</script>

* 時計に使う画像はソースが書いてあるHTMLの置いてあるフォルダと同じ場所に置いてください。

数字の画像はこちらからどうぞ

Java Script 画像時計 (2)

Java Script - 入門

Java Script - 小技

Total:620392

Java Script 画像 時計 (2)

Java Script - 入門

Java Script - 小技

Total:620392

Java Script 画像時計 (2)