현재시간 화면에 표시하기

 

HTML과 CSS 학습에 조금 지루해 질 때 자바스크립트를 배워보면 다시 코딩에 대한 흥미를 느낄 수가 있습니다. HTML과 CSS가 웹디자인 영역이라면 자바스크립트는 웹프로그래밍 영역에 가까울 수 있겠지만 한번 배워 보는 것도 좋을 것 입니다.

그동안 자바스크립트에 대하여 잘 올리지 않은 것 같은데 이제 자바스크립트에 대하여 종종 포스팅을 해 보고자 합니다. 이번 시간에는 현재시간을 웹 화면에 출력하는 방법에 대하여 알아 보고자 합니다.

 

  자바스크립트 소스

<!DOCTYPE html>
<html>
  <head>
    <title>자바스크립트 현재시간</title>
  </head>

  <style type="text/css">
    body {
      background: #000;
      font-size: 40px;
      font-weight: bold;
      color: #fff;
    }
  </style>

 

  <script type="text/javascript">


    var nowDate = new Date();
    document.write(nowDate + "<br>");

   
    document.write("현재시간 : ");

 

    var newHours = nowDate.getHours();
    document.write(newHours + "시 ");

 

    var newMinutes = nowDate.getMinutes();
    document.write(newMinutes + "분 ");

 

    var newSeconds = nowDate.getSeconds();
    document.write(newSeconds  + "초");

 

  </script>

 

  <body>
  </body>
</html>

 

 

  브라우저 실행 결과

현재시간 표시 예제 결과

 

 

  소스설명

- var nowDate = new Date()

  • var nowDate : newDate라는 이름의 변수를 선언합니다.
  • new : 객체생성
  • Date() : 현재시간을 넘겨주는 함수
  • 즉, nowDate라는 변수에 현재시간 객체 생성하여 담아 둡니다.
  • new 라는 부분을 빼면 첫줄 부분은 나타나지만 현재시간 이후 값은 보이지 않게됩니다. 객체를 생성한 것이 아니기 때문입니다.

- document.write(nowDate + "<br>")

  • document.write() : 화면에 쓰기 기능을 합니다.
  • nowDate + "<br>" : 변수 nowDate 에 담긴 문자열 값과 줄바꿈을 화면에 표시 합니다.

- var newHours = nowDate.getHours()

  • var newHours : newHours라는 이름의 변수를 선언합니다.
  • nowDate.getHours() : nowDate라는 변수에 담아둔 객체에서 getHours() 함수를 호출하여 현재 시간을 가져 옵니다.

 

  마무리

자바스크립트를 활용하면 밋밋하던 웹화면을 더욱 역동적으로 만들 수 있습니다. 이 번 시간에는 Date() 함수를 이용한 현재시간을 웹 화면에 표시하는 방벙에 대하여 예제를 통하여 알아 보았습니다.

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. 발랄제시카 2018.06.20 12:10 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.

  2. 은이c 2018.06.20 15:28 신고  댓글주소  수정/삭제  댓글쓰기

    좀 어렵네요~~ ㅎㅎ
    좋은 하루 보내세요~~ ^^

  3. Travelholics 2018.06.25 23:08  댓글주소  수정/삭제  댓글쓰기

    물론 간단한 예제라서 그렇겠지만, document.write()는 현재 권유되는 방식이 아니라고 합니다.

    참조: https://stackoverflow.com/questions/2559189/what-damage-is-done-by-document-write

    또한.. 함수로 만들어 놓고, setTimeout(함수, 1000); 하면 페이지가 단위 시간당 자동 업데이트 되기도 하죠? ㅎㅎ

    (이상 쓸때 없는 이야기였습니다 ㅎㅎ)

  4. JOY [바가지] 2018.06.26 22:11 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 모두 맞는 이야기 입니다.
    두 함수를 최근에는 사용해본적이 없지만..
    그래도 예전엔 한번씩 사용했던 기억이 있는 함수네요.(재미로 자바스크립트로 게임 만들어볼때도..;;)
    아~ 최근에는 애드센스 적용하면서 사용했던 적도 있는 것 같네요 ㅎㅎ