[ToDoList] Timer - 2

웹/ToDoList|2019. 1. 3. 10:26

ToDoList

  • index.html
    기본적인 timer markup

  • clock.js
    현재 시간을 출력할 수 있도록 작성한 js
    (추가) 시 분 초가 1자리 수인 경우 앞에 0 추가해주기
    (추가) 1초 지날 때마다 시간 실시간으로 얻어오기

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() {
    const date = new Date();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

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

init();

// 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();

    // 숫자가 1자리 수인 경우 앞에 0 붙여주기
    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
    getTime();
    // 1000 밀리세컨드(1초) 당 1번 getTime 실행시키기
    setInterval(getTime, 1000);
}

init();

결과




저작자표시 비영리 변경금지

'웹 > ToDoList' 카테고리의 다른 글

[ToDoList] todo - 2  (0) 2019.01.03
[ToDoList] todo - 1  (0) 2019.01.03
[ToDoList] Name  (0) 2019.01.03
[ToDoList] Timer - 1  (0) 2019.01.03
[ToDoList] ToDoList  (0) 2019.01.03

댓글()

티스토리툴바