🎨 현재시간 표시

https://kirin059.github.io/my_website/

🐸 html

   <div class="clock-location"> 
       <div class="main-clock"></div>  
   </div>

🐸 css

/* 시계가 표시되는 공간 설정 */
.clock-location{
    width:100%;
    height:160px;
    margin: auto;
    background-color:var( --text-color);
    text-align: center;
    vertical-align: center;
    font-size: 100px;
    font-weight: var( --weight-bold);
}
/* 시계 표시(00:00:00) */
h1 {
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color:var(--point-color);
    text-align: center;
}

🐸 javascript

 const clock=document.querySelector('.main-clock');

    function getTime() {
      const time = new Date();
      const minutes = time.getMinutes();
      const hours = time.getHours();
      const seconds = time.getSeconds();
      //clock.innerHTML = hour + ":" + minutes + ":" + seconds;
      clock.innerHTML = `${    /* 시간이 두자리로 나오게 하는 명령문 */
        hours <10 ? `0${hours}` : hours
        }
        :${    
        minutes < 10 ? `0${minutes}` : minutes
        }
        :${
        seconds < 10 ? `0${seconds}` : seconds
        }`
    }

    function init(){
        getTime();
        setInterval(getTime, 1000);   /* 1초마다 시계 업데이트 */
    }

    init();

/* 
`${지정된 함수를 불러오는 것}`

ex)
function color(red, blue){
  return ( `I like ${red} and ${blue}`)
}

document.write(color("peru", "purple"));   // I like peru and purple
=> 위와 같이 인자 x,y를 지정해준 뒤 해당 값을 리턴할 때, ${리턴인자}를 넣어준다.
ES6 버전부터 사용 가능한 템플릿 문자열로, 백 쿼트(``)로 묶고 변수는 ${} 사이에 표시하여 출력한다.
*/

ex)
(1) document.querySelector("#showResult").innerHTML = "결과는 " + result + "입니다";
//showResult 라는 id 의 공간 내용 안에(inner) 있는 것을 스트링과 result로 변경한다
(2) document.querySelector("#showResult").innerHTML = `결과는 ${result} 입니다`;
//백 쿼트(``)로 묶고 변수는 ${} 사이에 표시하여 출력


/*
? 는 if 와 같은개념,  : 는 or 과 같은개념
${ hour < 10 ? `0${hour}` : hours }
hour가 10보다 작으면(if) `0을 hour앞에 붙여주고` 그렇지않으면(:) 그냥 hour를 써준다는 뜻 
*/