Date 관련 메서드
1. 날짜 출력
먼저 날짜를 찍어 볼까요?
<script type="text/javascript">
var d = new Date();
document.write(d);
</script>
실행하면
Wed Oct 24 17:37:57 UTC+0900 2012
이처럼 표시됩니다.
2. 요일 표시하기
이번에는 요일을 표시해 보도록 하겠습니다.
getDay()메서드를 이용하여 요일을 뽑아낼 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to display todays day of the week.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var d = new Date();
var weekday = new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
</body>
</html>
이렇게 하고 실행한 후 버튼을 클릭하면
Wednesday
라고 해당하는 배열값을 출력합니다.
3. 시계 만들기
getHours()로는 시간을 얻을 수 있고,
getMinutes()로는 분을 얻을 수 있고,
getSeconds()로는 초를 얻을 수 있습니다.
10보다 작으면 앞에 0을 붙여 주는 함수만들어서 사용하면 간단하게 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h+":"+m+":"+s;
t = setTimeout(function(){startTime()},500); //0.5초 마다 함수실행 타이머
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
'WEB_TECH > javascript' 카테고리의 다른 글
| 자바스크립트 디버깅 (0) | 2012.10.18 |
|---|---|
| String객체 (0) | 2012.09.13 |
| javascript 객체기반언어 (0) | 2012.08.17 |
| Try...Catch 구문 (0) | 2012.08.17 |
| 이벤트 (0) | 2012.08.17 |
| 자바스크립트 함수 Function (0) | 2012.08.17 |
| pop up boxes (0) | 2012.08.17 |
| 반복문 (0) | 2012.08.17 |
| 조건문 (0) | 2012.08.17 |
| 연산자 (0) | 2012.08.17 |
