Archive

Calender

«   2019/09   »
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          
참고 사이트 : w3schools.com (영문)

1. JavaScript Dates
2. JavaScript Date Reference


 
<p id="basicUse"></p>

<script type="text/javascript">  document.getElementById ( "basicUse" ).innerHTML = Date();  </script>
 


 
<p id="usingVar"> </p>


<script type="text/javascript">

var d = new Date(); 
var localeDate  =  d.toLocaleDateString(); 
var localeTime  =  d.toLocaleTimeString(); 

document.getElementById ( 'usingVar' ).innerHTML = localeDate  +  " / "  +  localeTime;

</script>
 


 

<p id="usingFunction"></p>

<script type="text/javascript"> function locale (){ return new Date().toLocaleString(); } document.getElementById( 'usingFunction' ).innerHTML = locale(); // 추가로, 실시간 타이머 표시 방법 ㅡ 1000 밀리초(=1초)에 한번씩 함수 실행하기 setInterval ( function() { document.getElementById("usingFunction").innerHTML = locale(); } , 1000 ); </script>


이외에도 날짜와 관련해서 사용할 수 있는 것들이 많지만, 일단 필요한 것들만, 위 사이트에서 가져와서 응용함.


 

<p id="demo"></p>

<script type="text/javascript"> var getYear = new Date().getFullYear(); document.getElementById( 'demo' ).innerHTML = getYear; </script>
 

getMonth : <p id="demo1"></p> currentMonth : <p id="demo2"></p> getFromArray : <p id="demo3"></p>

<script type="text/javascript"> var arrMonths = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]; var getMonth = new Date().getMonth(); var currentMonth = getMonth + 1; var getFromArray = arrMonths [ getMonth ]; document.getElementById( 'demo1' ).innerHTML = getMonth; document.getElementById( 'demo2' ).innerHTML = currentMonth; document.getElementById( 'demo3' ).innerHTML = getFromArray; </script>
 

<p id="demo4"></p>

<script type="text/javascript"> var getDay = new Date().getDate(); document.getElementById( 'demo4' ).innerHTML = getDay; </script>
 

getWeek : <p id="demo5"></p> getFromArray : <p id="demo6"></p>

<script type="text/javascript"> var arrWeek = [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일" ]; var getWeek = new Date().getMonth(); var getFromArray = arrWeek [ getWeek ]; document.getElementById( 'demo5' ).innerHTML = getWeek; document.getElementById( 'demo6' ).innerHTML = getFromArray; </script>
 

getHour : <p id="demo7"></p> twelveHour : <p id="demo8"></p> ampm : <p id="demo9"></p>

<script type="text/javascript"> var getHour = new Date().getHours(); var twelveHour = getHour % 12 || 12; var ampm = ""; if ( getHour < 12 || getHour == 24 ) ampm = "A.M."; else ampm = "P.M."; document.getElementById( 'demo7' ).innerHTML = getHour; document.getElementById( 'demo8' ).innerHTML = twelveHour; document.getElementById( 'demo9' ).innerHTML = ampm; </script>
 

getMinute : <p id="demo10"></p> addZero : <p id="demo11"></p>

<script type="text/javascript"> var getMinute = new Date().getMinutes(); var addZero = ( getMinute < 10 ) ? "0" + getMinute : getMinute; document.getElementById( 'demo10' ).innerHTML = getMinute; document.getElementById( 'demo11' ).innerHTML = addZero; </script>
 

getMinute : <p id="demo12"></p> addZero : <p id="demo13"></p>

<script type="text/javascript"> var getSecond = new Date().getSeconds(); var addZero = ( getSecond < 10 ) ? "0" + getSecond : getSecond; document.getElementById( 'demo12' ).innerHTML = getSecond; document.getElementById( 'demo13' ).innerHTML = addZero; </script>
 

getMsec : <p id="demo14"></p> addZero : <p id="demo15"></p>

<script type="text/javascript"> var getMsec = new Date().getMilliseconds(); var addZero = "00" + getMsec; var toString = getMsec.toString(); for ( var x = 1; x < toString.length; x++ ) { addZero = addZero.replace(/^0/, ""); } document.getElementById( 'demo14' ).innerHTML = getMsec; document.getElementById( 'demo15' ).innerHTML = addZero; </script>

위의 내용을 토대로 만든, 실시간 타이머.



 
<!DOCTYPE html>
<html>
<head>
<title> 자바스크립트 - 실시간 타이머 </title>

<style type="text/css"> 

#realTimer  {
       padding: 2px 10px;   width: 260px;   border: 2px outset #dfeaea;   font-family: sans-serif;   font-size: 16px;
} 

</style> 
 
 
<script type="text/javascript">

function timer () { 

	 var date = new Date(); 

	 var hour = date.getHours(); 

	 var ampm = ( hour  < 12 || hour == 24 ) ? " A.M." : " P.M."; 


	      hour = hour % 12 || 12; 


	 var minute = date.getMinutes(); 
	      minute = ( minute > 9 ) ? minute : "0" + minute; 

	 var second = date.getSeconds(); 
	      second = ( second > 9 ) ? second : "0" + second; 

	 var millisec = date.getMilliseconds(); 
	      millisec = ( millisec > 99 ) ? millisec : ( millisec > 9 ) ? "0" + millisec : "00" + millisec; 



	 var timeString = hour + ":" + minute + ":" + second + ampm; 
	 // 또는,  var timeString = hour + ":" + minute + ":" + second + ":" + millisec + ampm; 


	 var year = date.getFullYear(); 
	 var month = date.getMonth() + 1; 
	 var day = date.getDate(); 


	 var arrayWeek = [ "Sun. " , "Mon. " , "Tue. " , "Wed. " , "Thur. " , "Fri. " , "Sat. " ]; 
	 // 또는, var arrayWeek = [ "일. " , "월. " , "화. " , "수. " , "목. " , "금. " , "토. " ]; 


	 var week = date.getDay(); 
	       week = arrayWeek [ week ]; 


	 var dateString = year + ". " + month + ". " + day + ". " + week; 


	 return  dateString + timeString; 
} 
</script>
</head>
 
 
<body>

<p id="realTimer"></p>


<script type="text/javascript">

var tag = document.getElementById( "realTimer" ); 

     tag.innerHTML = timer(); 

setInterval ( function() { tag.innerHTML = timer(); } , 1000 ); 

</script>
</body>
</html>
 


이 내용이 도움이 되셨나요? *^^*

5 Comments

  1. Favicon of http://kimkoonho91.tistory.com 김군호 🕔 2018.03.05 14:47 신고 AddressModify/DeleteReply

    감사합니다.

  2. Favicon of https://aldkzm.tistory.com ze.law 🕔 2019.03.30 02:11 신고 AddressModify/DeleteReply

    위의 코드를 응용하여 date() 대신 document.write()를 넣어봤는데, 기존의 창이 새로고침 되면서 document.write() 내용만 나오더군요.
    해당 페이지 내에서 document.write가 새로고침 되도록 할 수 있나요?

    • Favicon of https://tonks.tistory.com 통스 블로거 🕔 2019.04.19 01:42 신고 AddressModify/Delete

      답변이 너무 늦어서 죄송합니다. ─.─;;
      그런데요...
      date대신에 document.write를 넣으셨다는 게 무슨 뜻인지요...
      innerHTML 대신에 document.write를 사용하셨다는 것인지요...
      또 하나, document.write가 새로고침 되도록...??
      이건 무슨 말인지 전혀 모르겠네요...

  3. Favicon of https://aldkzm.tistory.com ze.law 🕔 2019.04.19 13:53 신고 AddressModify/DeleteReply

    아, 해결했습니다. document.write() 특징이 반복 해서 부르면 기존 것을 지우고 새로운 것을 덧 쓴다는 것이였습니다. 그래서 님이 말한 innerHTML로 해결했습니다.
    https://aldkzm.tistory.com/449
    답변 감사합니다.