잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (154)  |  자료실 (20)  |  끄적거림 (520)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 28일
내일내일을 끊어내어라. 만족은 끝이 없고 아무런 의미가 없다. 그저 다람쥐 쳇바퀴 뿐인 것을... - 바다아이
 




    javascript/jquery

javascript/jquery - javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체)
이 름 : 바다아이   |   조회수 : 2221         짧은 주소 : https://www.bada-ie.com/su/?601591779038
출처 : http://bbaksae.tistory.com/23?category=637511
 
 


안녕하세요, 오늘은 지금 시각을 표현할 수 있는 시계를 만들어 보려고 합니다.
자바스크립트로 만들 껀데 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>

function printClock() {
    
    var clock = document.getElementById("clock");            // 출력할 장소 선택
    var currentDate = new Date();                                     // 현재시간
    var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" 
+ currentDate.getDate() // 현재 날짜
    var amPm = 'AM'; // 초기값 AM
    var 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() 함수 호출
}

function addZeros(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>

<body onload="printClock()">
	<div style="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() 놓지 마시고 직접 실헹 하세요...

| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript , ... 바다아이 282
73 javascript/jquery , cookie class 바다아이 834
72 javascript/jquery select 3 바다아이 1249
71 javascript/jquery , ... 바다아이 1764
70 javascript/jquery , timezone, , ... moment.js 바다아이 1890
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 1818
68 javascript/jquery (block) , ... 바다아이 1760
67 javascript/jquery textarea cursor , , focus 바다아이 2364
66 javascript/jquery jquery ajax option .... 바다아이 1975
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 2037
64 javascript/jquery javascript , , , , () 바다아이 2131
현재글 javascript/jquery javascript (date ) 바다아이 2222
62 javascript/jquery CSS3 javascript 바다아이 2397
61 javascript/jquery javascript , cookie, , , , , 바다아이 2296
60 javascript/jquery javascript 바다아이 2610
59 javascript/jquery javascript / , , , 바다아이 2837
58 javascript/jquery url , , encode, decode ... 바다아이 2109
57 javascript/jquery javascript ... frame location.href 바다아이 2226
56 javascript/jquery File Upload Progress, .... . 바다아이 2569
55 javascript/jquery javascript, json , json Highlight 바다아이 2583
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 2666
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 2403
52 javascript/jquery javascript entity , , encode, decode 바다아이 2708
51 javascript/jquery javascript post, get , 바다아이 3915
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 2787
49 javascript/jquery jquery autocomplete , , . 바다아이 2545
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 2888
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 2641
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 2284
45 javascript/jquery url encode decode , , , javascript 바다아이 3491
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : vultr.com 서울  실행시간 : 0.2491
to webmaster... gogo sea. gogo sea.