[ToDoList] Timer - 1
웹/ToDoList2019. 1. 3. 10:14
ToDoList
- index.html
기본적인 timer markup - clock.js
현재 시간을 출력할 수 있도록 작성한 js
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="index.css"> <title>Timer</title> </head> <body> <div class="wrap"> <div class="js-clock"> <h1 class="js-clock-text">00:00</h1> </div> </div> <script src="clock.js"></script> </body> </html>
clock.js
// js-clock을 가진 요소에 접근 // js-clock 내에 있는 h1 요소에 접근 const clockContainer = document.querySelector(".js-clock"); const clockText = clockContainer.querySelector("h1"); function getTime() { // Date 객체 생성 const date = new Date(); // 시 분 초 받아 오기 const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); // clockText 대체 clockText.innerText = `${hours}:${minutes}:${seconds}`; } function init() { getTime(); } init();
결과
'웹 > ToDoList' 카테고리의 다른 글
| [ToDoList] todo - 2 (0) | 2019.01.03 |
|---|---|
| [ToDoList] todo - 1 (0) | 2019.01.03 |
| [ToDoList] Name (0) | 2019.01.03 |
| [ToDoList] Timer - 2 (0) | 2019.01.03 |
| [ToDoList] ToDoList (0) | 2019.01.03 |
댓글()
