안녕하세요, 오늘은 지금 시각을 표현할 수 있는 시계를 만들어 보려고 합니다.
자바스크립트로 만들 껀데 Date() 객체를 이용할 겁니다.
우선 실행된 화면을 보시죠.
보시는 바와 같이 잘 동작하죠?
간단하게 설명을 하자면, 오전과 오후를 우측에 표시를 해주고,
한자리 수일때는 0을 채워주어 항상 두자리를 유지할 수 있도록 하였습니다.
마지막으로 초가 50초 이상일 때는 빨간색으로 색을 바꿔주는 기능도 있습니다.
그렇다면 소스를 한 번 보시죠!!!
자바스크립트에서 new Date(); 라는 내장 객체를 사용할 수 있습니다.
사용할 수 있는 메서드가 매우 많이 있지만, 그 중 가장 유용한 것들만 보여드리겠습니다.
getYear() 연도를 리턴합니다.
getMonth() 0에서 11사이의 정수 달을 리턴합니다. 1월=0, 12월=11
getDate() 한 달 내의 날짜를 리턴합니다.
getDay() 한 주 내의 요일의 수를 리턴합니다. 일요일=0
getHours() 0에서 23사이의 정수 시간을 나타냅니다.
getMinutes() 0에서 59까지의 정수 분을 나타냅니다.
getSeconds() 0에서 59까지의 정수 초를 나타냅니다.
getTime() 1970년 1월 1일 이후의 시간을 천분의 1초 단위로 리턴합니다.
- setTimeout("함수명","시간")을 입력하게 되면 시간마다 함수명에 해당하는 함수를 호출합니다.
- addZeros() 함수는 한자리 수일 때는 앞에 '0'을 붙여 줌으로써 시,분,초 어떠한 상황에서도 두자리수로 출력 되도록 도와주는 함수
- 현재시각이 12시 보다 클 때는 -12를 빼줌과 동시에 PM을 표시해줄 수 있도록 함
<script>functionprintClock() {
var clock = document.getElementById("clock"); // 출력할 장소 선택var currentDate = newDate(); // 현재시간var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-"
+ currentDate.getDate() // 현재 날짜var amPm = 'AM'; // 초기값 AMvar currentHours = addZeros(currentDate.getHours(),2);
var currentMinute = addZeros(currentDate.getMinutes() ,2);
var currentSeconds = addZeros(currentDate.getSeconds(),2);
if(currentHours >= 12){ // 시간이 12보다 클 때 PM으로 세팅, 12를 빼줌
amPm = 'PM';
currentHours = addZeros(currentHours - 12,2);
}
if(currentSeconds >= 50){// 50초 이상일 때 색을 변환해 준다.
currentSeconds = '<font color="#de1951">'+currentSeconds+'</font>'
}
clock.innerHTML = currentHours+":"+currentMinute+":"+currentSeconds +" <span style='font-size:50px;'>"
+ amPm+"</span>"; //날짜를 출력해 줌
setTimeout("printClock()",1000); // 1초마다 printClock() 함수 호출
}
functionaddZeros(num, digit) { // 자릿수 맞춰주기var zero = '';
num = num.toString();
if (num.length < digit) {
for (i = 0; i < digit - num.length; i++) {
zero += '0';
}
}
return zero + num;
}
</script><body><bodyonload="printClock()"><divstyle="border:1px solid #dedede; width:600px; height:250px; line-height:250px;
color:#666;font-size:100px; text-align:center;"id="clock"></div></body>
p.s
안되면 body onload 에 printClock() 놓지 마시고 직접 실헹 하세요...
|
|
번 호
카테고리
제 목
이름
조회수
Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.06387 초 to webmaster... gogo sea. gogo sea.
살인!
javascript/jquery
