pbj0812의 코딩 일기

[JavaScript] 탭 제목 변경을 통한 시계 만들기 본문

ComputerLanguage_Program/JavaScript

[JavaScript] 탭 제목 변경을 통한 시계 만들기

pbj0812 2020. 6. 22. 23:44

0. 목표

 - JavaScript로 시계를 만들기

1. 상황

 1) 서핑하다 보니 시간이 너무 빨리 지남

 2) 시계를 보기 위해서는 마우스를 올려서 시간을 봐야됨.

 3) 귀찮음

2. 코드 작성

 1) index.html

  - title에만 head라는 클래스를 둠(추적용)

<!DOCTYPE html>
<head>
    <title class="head"></title>
    <script src="./clock.js"></script>
</head>
<body>
</body>
</html>

 2) clock.js

  (1) querySelector로 head탐색

  (2) Date로 현재 시각을 할당

  (3) getHours, getMinutes, getSeconds로 현재 시각의 시, 분, 초를 받음

  (4) 9시 9분 9초 일때는 9:9:9로 표출되기 때문에 10보다 작을때는 앞에 0을 붙이도록 zeroGenerator 함수 작성

  (5) dummy 변수를 이용하여 각 함수 결과 값을 받음

  (6) 처음에 생성한 clockTitle의 텍스트 값을 (5)에서 받은 시:분:초 값으로 지정

  (7) init 함수를 적용하여 실행되게 함

  (8) 새로고침 효과를 주기 위하여 getInterval 함수를 사용하고 1초(1000ms)마다 새로고침 되게 지정

const clockTitle = document.querySelector(".head");

function getTime(){
    const date = new Date();
    const hours = date.getHours(); 
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    let hours_dummy = zeroGenerator(hours);
    let minutes_dummy = zeroGenerator(minutes);
    let seconds_dummy = zeroGenerator(seconds);

    clockTitle.innerText = `${hours_dummy}:${minutes_dummy}:${seconds_dummy}`;
}

function zeroGenerator(inp) {
    if (inp < 10){
        return `0${inp}`;
    } else {
        return inp;
    }
}

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

init();

3. 결과

 - 잘 적용된 것을 볼 수 있음

 - 버퍼링이 좀 있음

4. 참고

 - [스터디_자바스크립트] 16. 함수의 리턴

 - 바닐라 JS로 크롬 앱 만들기

저작자표시 비영리 동일조건

'ComputerLanguage_Program > JavaScript' 카테고리의 다른 글

[JavaScript] React 환경설정 및 테스트  (0) 2020.07.26
[JavaScript] Youtube Player API를 사용한 홈페이지 내 youtube 동영상 삽입  (0) 2020.07.20
[JavaScript] url 변경하기(눈에만...)  (0) 2020.07.19
[JavaScript] 조건문, 반복문 예제  (0) 2020.01.29
'ComputerLanguage_Program/JavaScript' Related Articles more
Comments