📂 JAVASCRIPT/그외
[ 자바스크립트 ] 오늘 날짜와 현재 시각 ─ Date() 🕔 2015. 1. 14. 20:04
참고 사이트 : 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>
이 내용이 도움이 되셨나요? *^^*
'JAVASCRIPT > 그외' 카테고리의 다른 글
| [ 자바스크립트 ] IE 버전 체크용 함수 (1) | 2015.08.06 |
|---|---|
| [ 자바스크립트 ] Date()함수에 프로토타입 추가하기 (0) | 2015.04.12 |
| [ 자바스크립트 ] className 사용법 (0) | 2015.02.17 |
| [ 자바스크립트 ] table 태그 만들기 - createElement() (0) | 2015.01.15 |
| 나의 자바스크립트 입문기 (js를 왜 하는가) (0) | 2014.12.09 |