컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 니콘 DSLR] D40X, D40 미러업 촬영, CCD 클리닝 미러락업 기능 있나요? Mu...Perl 펄] 스와치 시계의 인터넷 타임(Swatch Internet Time) 구하기Perl 펄] 루프 건너뛰기, 특정 조건 생략, C의 continue문에 해당하는 예약어 ...Perl 펄] switch문, case문 구현, 스위치 모듈로; default 예약어는?Perl 펄] 무한루프 만들기/탈출, C언어의 break문에 해당하는 예약어; while,...윈도우2000에서 클리어타입 폰트 사용할 수 있나요? 맑은고딕 등; Windows 2000...디카] 모니터 화면 촬영 방법, 컴퓨터 바이오스 캡쳐; How to Shoot Monito...Perl 펄] 패스워드/암호 유효성 검사, 최소 글자 수 제한; Get Verify Pas...Perl 펄] 암호, 패스워드 입력 받기; 글자 화면에 보이지 않게; Input Passw...Perl 펄] 사용자 문자열 입력 받기; 키보드 문장 입력; Input STDIN

자바스크립트, 리얼타임 시계 만들기, 1초마다 자동 갱신; JavaScript Real-time Clock

Monday, May 21, 2007

현재 날짜와 시각이 자동으로 1초 단위로 바뀌는 자바스크립트 시계입니다. 브라우저의 F5키를 눌러 웹페이지를 갱신하지 않아도 리얼타임(실시간;Real-time)으로 변경됩니다.

JavaScript: 실시간으로 업데이트되는 시계


소스 파일명: example.html
<html>
<head>
<title>자바스크립트: 리얼타임 시계</title>
<script type="text/javascript">

function realtimeClock() {
  document.rtcForm.rtcInput.value = getTimeStamp();
  setTimeout("realtimeClock()", 1000);
}


function getTimeStamp() { // 24시간제
  var d = new Date();

  var s =
    leadingZeros(d.getFullYear(), 4) + '-' +
    leadingZeros(d.getMonth() + 1, 2) + '-' +
    leadingZeros(d.getDate(), 2) + ' ' +

    leadingZeros(d.getHours(), 2) + ':' +
    leadingZeros(d.getMinutes(), 2) + ':' +
    leadingZeros(d.getSeconds(), 2);

  return s;
}


function leadingZeros(n, digits) {
  var zero = '';
  n = n.toString();

  if (n.length < digits) {
    for (i = 0; i < digits - n.length; i++)
      zero += '0';
  }
  return zero + n;
}

</script>
</head>


<body onload="realtimeClock()">

<form name="rtcForm">
<input type="text" name="rtcInput" size="20" readonly="readonly" />
</form>


</body>
</html>


위의 예제 소스를 example.html 이라는 파일로 저장한 후, 브라우저로 열어서 보면, 읽기전용 입력 상자 안에

2007-05-21 13:47:35

이런 식으로 현재 날짜/시간이 표시되고, 1초 단위로 저절로 갱신됩니다.


body 태그에 onload 속성을 지정해야 하기에, 블로그의 경우 특정 포스트에만 리얼타임 시계를 표시하는 것은 잘 안됩니다.


▶▶ 자바스크립트] 오늘 날짜 시간 구하기, 년월일/시분초 출력; Date Time Print JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top