하루 하루

[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 10 본문

IT/Web

[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 10

san_deul 2020. 5. 14. 02:02

3-1 Making a JS Clock part One

www.youtu.be/f0nBj0YMBUI

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link  rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class = "js-clock"> 
      <h1 class="js-title">
        
      </h1> 
    </div>
    <script src="clock.js"></script>
  </body>
</html>
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime(){
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  clockTitle.innerText = `${hours}:${minutes}`;
}
function init(){
  getTime();
}
init();

3-2 Making a JS Clock part Two

www.youtu.be/jstjlCZa7nA

/* setInterval(실행할 함수, 해당 함수를 실행하고 싶은 시간)*/
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 seconds = date.getSeconds();
  clockTitle.innerText = 
  `${hours< 10 ? `0${hours}` : hours} : ${minutes< 10 ? `0${minutes}` : minutes} : ${seconds< 10 ? `0${seconds}` : seconds}`;
  /* 삼항연산자 -> 조건 ? t 일 때 실행문 : f일 때 실행문 */
}
function init(){
  getTime();
  setInterval(getTime,1000)
;}
init();
저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

자바스크립트와 웹프론트엔드 - 3  (0) 2020.05.14
자바스크립트와 웹프론트엔드 - 2  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 8  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 7  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 6  (0) 2020.05.13
'IT/Web' Related Articles more
Comments