개발 무지렁이

[JavaScript] 시계 움직이기, setInterval 본문

Frontend/JavaScript

[JavaScript] 시계 움직이기, setInterval

Gaejirang-e 2023. 4. 14. 08:49

자바스크립트 Date 객체

let now = new Date();

Wed Apr 12 2023 20:57:29 GMT+0900 (한국 표준시)


[clock.html]

  <head>
    <style type="text/css">
      div {
          text-align: center;
        padding-top: 22px;
        width: 400px;
        height: 50px;
        border: 3px solid red;
        font-size: 20px;
      }
    </style>

    <script type="text/javascript">
      window.onload = function() { // window. 생략가능, 문서가 load되면 바로 호출
        let myInterval = setInterval(function() {
          let now = new Date();
          document.getElementById("result").innerHTML = now.toLocaleString();
        }, 1000); // 1000ms, 1초마다 계속불러옴

        function intervalStop() { // 함수 정의
          clearInterval(myInterval); 
        }

        document.getElementById("btn").onclick = intervalStop; // 자바스크립트 함수 호출은 ()쓰지 않는다.
      }  
    </script>  
  </head>

  <h1>시계 움직이기...</h1>
  <div id="result"></div>
  <input type="button" value="중지" id="btn">

⭐. myInterval = setInterval(function, 1000); // 1초마다 계속 (단, 처음 1초가 지난 후에)

  • 멈추기: clearInterval(myInterval);

⭐. myTimeout = setTimeout(function, 1000); // 1초가 지나면 딱 한 번

  • 재귀호출에서 많이 사용
  • 멈추기: clearTimeout(myTimeout);
📌 toLocaleString() -- Date객체의 내장메서드

날짜의 현지화
날짜를 언어별로 구분하여 문자열로 반환

'Frontend > JavaScript' 카테고리의 다른 글

[jQuery] write less, do more: jQuery 기본  (0) 2023.04.19
[JavaScript] DOM과 BOM  (0) 2023.04.19
[JavaScript] V8 자바스크립트 엔진과 브라우저 외부에서 실행 가능한 런타임 환경 NodeJS  (0) 2023.02.20
[JavaScript] 자바스크립트(ECMAScript6)와 호이스팅  (0) 2023.02.19
[JavaScript] 프로그래밍이란?  (0) 2023.02.19
'Frontend/JavaScript' Related Articles more
Comments