vanila.js

시계만들기

FnMask 2020. 11. 28. 04:25

 

 

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Something</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>

 

clock.js

const clockContainer = document.querySelector(".js-clock"),
    clockTitle=clockContainer.querySelector("h1");

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

function init(){
    getTime();
    setInterval(getTime,1000);
}
init();