<head>
..
<script language="Javascript">
<!--
c1=new Image(); c1.src="gif/c1.gif";
c2=new Image(); c2.src="gif/c2.gif";
c3=new Image(); c3.src="gif/c3.gif";
c4=new Image(); c4.src="gif/c4.gif";
c5=new Image(); c5.src="gif/c5.gif";
c6=new Image(); c6.src="gif/c6.gif";
c7=new Image(); c7.src="gif/c7.gif";
c8=new Image(); c8.src="gif/c8.gif";
c9=new Image(); c9.src="gif/c9.gif";
c0=new Image(); c0.src="gif/c0.gif";
cb=new Image(); cb.src="gif/cb.gif"; // 각 숫자의 그래픽을 배열변수에 넣음
am=new Image(); am.src="gif/am.gif";
pm=new Image(); pm.src="gif/pm.gif";
function getChr(hr,mn,sc,ap){ // 각 디짓트에 그라픽 찾아 설정
if (!document.images) return;
if (hr<=9){
document.images.p1.src=cb.src;
document.images.p2.src=eval("c"+hr+".src");
} else{
document.images.p1.src=eval("c"+Math.floor(hr/10)+".src");
document.images.p2.src=eval("c"+(hr%10)+".src");
}
if (mn<=9){
document.images.p4.src=c0.src;
document.images.p5.src=eval("c"+mn+".src");
} else {
document.images.p4.src=eval("c"+Math.floor(mn/10)+".src");
document.images.p5.src=eval("c"+(mn%10)+".src");
}
if (sc<=9){
document.p7.src=c0.src;
document.images.p8.src=eval("c"+sc+".src");
} else {
document.images.p7.src=eval("c"+Math.floor(sc/10)+".src");
document.images.p8.src=eval("c"+(sc%10)+".src");
}
if (ampm=="AM") document.p9.src=am.src
else
document.images.p9.src=pm.src;
}
function show(){
if (!document.images) return;
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
ampm="AM"; // 우선 모두 오전으로 설정
if ((hours>=12)&&(minutes>=1)||(hours>=13)){
ampm="PM"; // 12 시 넘으면 오후로 하고 12 시간 뺌
hours=hours-12;
}
if (hours==0) hours=12;
getChr(hours,minutes,seconds,ampm);
setTimeout("show()",1000); // 1초 간격으로 실행
}
// 감춤 끝 -->
</script>
</head>
<body onload="show()">
<a name="top"></a>
<center>
..
<h1><img src="../../gif/ictrio.gif" alt="trio"> 디지탈 시간 표시 예제</h1>
<img src=../gif/rfbtexm1.gif><br><br>
<div class=brown>
<div class=indent>
<img src="gif/cb.gif" name="p1"
height=30><img src="gif/cb.gif" name="p2"
height=30><img src="gif/colon.gif" name="p3"
height=30><img src="gif/cb.gif" name="p4"
height=30><img src="gif/cb.gif" name="p5"
height=30><img src="gif/colon.gif" name="p6"
height=30><img src="gif/cb.gif" name="p7"
height=30><img src="gif/cb.gif" name="p8"
height=30><img src="gif/am.gif" name="p9" height=30>
</div><br><! 빈깐을 안넣기 위해 태그 안에서 줄바꿈 했슴>
..
<body>
 중요 사항
- 각 숫자의 그래픽을 배열변수에 넣고, 수치를 점거하여 해당 그라픽을 찾아 화면에 설정 함
document.images.p1.src: images 배열변수, p1 이미지(IMG) name
- eval(...)로 검정하여 시행
- setTimeout("show()",1000): 기능 show()를 1초 간격으로 시행, 수치는 mili-second 단위
|
제공