자바스크립트를 이용하여 흘러가는 시계를 만들어 보았습니다.



new Data() - 현재 날짜와 시간세팅 

setTimeout() - 시간지연함수


Data를 받아서 오전오후 시 분 초를 각각 나타내었습니다.






코드


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
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
    function showClock()
    {
        var currentDate=new Date();
        var divClock=document.getElementById("divClock");
        var apm=currentDate.getHours();
        if(apm<12)
        {
            apm="오전";
        }
        else
        {
            apm="오후";
        }
        
        var msg = "현재시간 : "+apm +(currentDate.getHours()-12)+"시";
        msg += currentDate.getMinutes() + "분";
        msg += currentDate.getSeconds() + "초";
        
        divClock.innerText=msg;
        
        setTimeout(showClock,1000);
    }
</script>
</head>
<body onload="showClock()">
    <div id="divClock" class="clock"></div>
    
</body>
</html>
cs







코드설명

9  -현재 시간 받아오기

10-시계 공간 div

11~19 - 오전 오후 나타내기 

21~23 - 시간 나타내기

27 - 1초에 한번씩 나타내기

저작자표시

'JavaScript' 카테고리의 다른 글

[Java Script]글자 나타내기  (0) 2018.10.23
[JavaScript]랜덤 이미지 변경  (0) 2018.10.23
JavaScript 를 이용한 달력 만들기  (2) 2018.10.19
JavaScript를 이용한 배경색 바꾸기  (1) 2018.10.19
Java Script 이용 계산기 만들기  (0) 2018.10.18

+ Recent posts

티스토리툴바