JavaScript - Clock

<div>

  • <div> tag : The <div> tag defines a division or a section in an HTML document.
  • <div> 요소는 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있습니다.

대박 짱신기한거

const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");
  • javascript 에서는 쉼표를 경계로 두개의 변수를 선언과 동시에 초기화 할 수 있다

setInterval(function, time)

setInterval(function, time)
function : first argument, function to execute
time - milliseconds : second argument, how long it will execute

시계 웹사이트에 구현하기 –> 너무신기해

  • HTML 코드
<!DOCTYPE html>
<html>
    <head>
        <title>ClockChallenge</title>
        <link rel="stylesheet" href="index.css"/>
    </head>

    <body>
        <div class="js-clock">
            <h1>00:00</h1>
        </div>
        <script src="clock.js"></script>
    </body>
</html>
  • CSS 코드
body {
    background-color: seashell;
}

h1 {
    color: black;
}
  • JavaScript 코드
const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");

function getTime() {
    const date = new Date(); // create Data object
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
    getTime();
    setInterval(getTime, 1000); // every seconds
}

init();

You May Also Enjoy