Trio 홈페이지 시간 계속 표시 예제 Javascript 예제 메인페이지


단추 '안녕!'를 눌렀을 때 메세지가 나타난다.
아래 부분은 <TEXTAREA>안에 시계의 부분을 보여준다.

HTML Code

<head>
..
</head>

<body>
<a name="top"></a>
<center>

<h1><img src="../../gif/ictrio.gif" alt="trio"> 시간 표시 예제</h1>
<table width=95% border=1><tr><td>
<img src=../gif/rfbtexm1.gif>
<div class=brown>
<div class=indent>
단추 '안녕!'를 눌렀을 때 메세지가 나타난다.
<table><tr><td>
<form name="fclock">
  <input type="text" size="11" name="Clock">
  <input type="button" value="안녕!" onclick="alert('안녕!')">
</td></tr></table>

<table><tr><td class=brown>아래 부분은 <textarea>안에 시계의 부분을 보여준다.<br><br>
<textarea  rows="10" cols="50">

<script language = "javascript">
<!-- 감춤
function show(){
  var now=new Date();
  var hr=now.getHours();
  var mn=now.getMinutes();
  var sc=now.getSeconds();
  var ampm="AM";
  if (hr>=12) ampm="PM";
  if (hr>12) hr=hr-12;
  if (hr==0) hr=12;
  if (mn<=9) mn="0"+mn;
  if (sc<=9) sc="0"+sc;
  document.fclock.Clock.value=hr+":"+mn+":" +sc+" "+ampm;
  setTimeout("show()",1000);
}
show();
// 감춤 끝  -->
</script>
</textarea>
</td></tr></table>
</form>

<script language = "javascript">
<!-- 감춤
function show(){
  var now=new Date();
  var hr=now.getHours();
  var mn=now.getMinutes();
  var sc=now.getSeconds();
  var ampm="AM";
  if (hr>=12) ampm="PM";
  if (hr>12) hr=hr-12;
  if (hr==0) hr=12;
  if (mn<=9) mn="0"+mn;
  if (sc<=9) sc="0"+sc;
  document.fclock.Clock.value=hr+":"+mn+":" +sc+" "+ampm;
  setTimeout("show()",1000);
}
show();
// 감춤 끝  -->
</script>
</div></div>
</td></tr></table>
</body>
설명 중요 사항
  • 변수 document.fclock.Clock.value를 계속 변경시켜 움직이는 시계를 만든다.
    fclock은 FORM의 name이고, Clock은 name이다.
  • onclick="alert('안녕!')"로 경고창을 열어 표시한다.
  • TEXTAREA에 값을 주어 초기값을 지정하고 변경도 가능하게 한다. 여기서는 시계부분의 Code를 설정하였다.
  • 시간, 날자 변수를 수정하여 원하는 형태의 표현을 할 수 있다.
  • function() 기능의 정의를 HEAD에 표시하던가, BODY에 위치시킬 수 있다.
번역문 소유자 - Trio 홈페이지 제공 이 문서(http://trio.co.kr/webrefer/jsex/xclockd.html)는
자유로이 연결 사용이 가능함.		 예제 메뉴로