자바스크립트에서 Date()로 시스템의 시간을 받아올 수 있다.
또한, Date()가 가지고 있는 getHours, getMinutes, getSeconds 메소드를 이용 하여 시간, 분, 초 의 정보를 받아올 수 있다.
Date()로 시간을 받고 현재 시간의 시,분,초 로 나타내고 시간을 기준으로 오전과 오후로 나누어 보았다.
|
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
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#divClock{
font-size: 30px;
color: green;
}
</style>
<script type="text/javascript">
function showClock(){
var currentDate = new Date();
var divClock = document.getElementById('divClock');
var msg = "현재 시간 : ";
if(currentDate.getHours()>12){ //시간이 12보다 크다면 오후 아니면 오전
msg += "오후 ";
msg += currentDate.getHours()-12+"시 ";
}
else {
msg += "오전 ";
msg += currentDate.getHours()+"시 ";
}
msg += currentDate.getMinutes()+"분 ";
msg += currentDate.getSeconds()+"초";
divClock.innerText = msg;
if (currentDate.getMinutes()>58) { //정각 1분전부터 빨강색으로 출력
divClock.style.color="red";
}
setTimeout(showClock,1000); //1초마다 갱신
}
</script>
</head>
<body onload="showClock()">
<div id="divClock" class="clock">
</div>
</body>
</html>
|
cs |
'html, javacript' 카테고리의 다른 글
| [HTML] 회원가입 폼 만들기 (0) | 2020.07.04 |
|---|---|
| [HTML][Java Script] 배열 메소드 (push, pop, shift, sort, reverse) (0) | 2020.07.04 |
| [HTML] CSS, 자바스크립트 외부에서 호출하기 (0) | 2020.07.04 |
| [HTML] 쿠키와 세션 (0) | 2020.07.04 |
| [HTML] 파일의 절대주소와 상대주소 (0) | 2020.07.02 |
댓글