JavaScript 자바스크립트 시계 만들기

타이머 관련 예제를 보다가 급 티켓팅할 때 애용했던 네이비즘 서버시간 사이트가 떠올라 간단하게 시계를 만들었다 ㅋㅋㅋ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시계 만들기</title>
<script>
window.onload = function() {
    
    var clock = document.getElementById('clock');
    
    function getClock() {
    var now = new Date();
        
        let day = ['일','월', '화', '수', '목', '금', '토'];
        
        let DateFormat = now.getFullYear() + '년 ' + (now.getMonth()+1) + '월 ' + now.getDate() + '일 '
                        + day[now.getDay()] + '요일 '
                        + now.getHours() + '시 ' + now.getMinutes() + '분 ' + now.getSeconds() + '초' ;
        
        clock.innerHTML = DateFormat;    
    }
    
    getClock();
    setInterval(getClock, 1000);
};
</script>
<style type="text/css">
.t {
    background-color: #000;
    color: yellow;
    padding: 5px 5px 5px 5px;
    border-radius: 6px;
    margin-bottom: 0;
    width: 918px;
    letter-spacing: -2px;
}
#clock {
    letter-spacing: -2px;
    font-size: 40pt;
    color: #FF6815;
    font-weight: bold;
    text-shadow: rgb(80, 80, 80) -1px -1px 1px;
    float: left;
}
</style>
</head>
<body>
<h3 class="t">어서 와 . . . 쓸데없지만 아무나 다 알려준다는 표준시간부터 보여줄게 . . .</h3>
<div id='clock'></div>
</body>
</html>
Colored by Color Scripter
cs

코드 전문

Date의 getDate() 메서드는 요일을 0~6의 숫자로 표현해준다. 따라서 요일을 담는 배열을 생성해 가져다 쓸 수 있도록 작성
getFullYear() 메서드부터 getSeconds() 메서드를 이용, 문자열을 조합하여 시간을 표현해줌

처음에 setInterval 메서드에 Date 객체 뽑아오는걸 바로 작성 했었는데 그러면 시계가 바로 나오지 않고 1초 뒤에 나오게 된다.

그래서 함수를 따로 만들어 빼주고 그 함수를 호출 해준 뒤 setInterval()이 돌아가게 하면 끝!

재밌다 ㅎ

화면 디자인 완전히 따라 만들진 않았고 이렇게만.. (그래서 css도 따로 안 빼고 ㅎ...)

UI 내 취향대로 예쁘게 입혀서 나만의 현재 시간 사이트를(?) 만들어보는 것도 재미있겠다. 그럼 네이비즘을 쓰지 않아도 되는거지 홀홀..

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

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

자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) (0)	2023.04.29
자바스크립트 프로토타입? (0)	2023.04.10
DOM(Document Object Model) 문서 객체 모델 (0)	2023.04.08
카카오맵 api 좌표와 마커 이동(수정)하기 (0)	2023.03.22
다음 우편번호 api와 카카오 맵 api 사용기 (0)	2023.03.07