1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>자바스크립트</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
 
<body>
    <h1 id="title" class="btn">This Works!</h1>
    
    <div class="js-clock">
        <h1 class="js-title">00:00</h1>    
    </div>
 
    <script src="index.js">    </script>
    <script src="clock.js">    </script>
</body>
 
</html>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();
    
    //현재초가 10보다 작으면 0${seconds} 아니면 seconds 조건문 추가
    clockTitle.innerText = `
     ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}
    `;
 
}      
 
function init(){
    getTime();
    setInterval(getTime, 1000);
}
 
init();
cs


저작자표시

'JavaScript' 카테고리의 다른 글

console 날짜, 시간 불러오기  (0) 2019.07.22
버튼 이벤트설정하기  (0) 2019.07.21
id선택 후 글씨 변경하기  (0) 2019.07.21
이미지클릭시 새창으로 원본이미지 보기 img태그이용  (0) 2019.07.12
이미지를 클릭하면 경고창이 발생하는 이벤트를 작성해보자  (0) 2019.07.11

+ Recent posts

티스토리툴바