Javascript 자바스크립트 날짜 표시하기 / Date(); setInterval();

<p id = "demo">p태그입니다</p>
<br>
<button type = "button" onclick = "displayDate()">클릭</button>

<script type="text/javascript">

function displayDate(){
	document.getElementById("demo").innerHTML = Date();
}

//timer 동작 
setInterval("displayDate()", 1000);

</script>

Date();를 활용하면 현재 시각을 넣어줄수가 있습니다. 단순하게 시간만 표시해주는것에서 더 나아가 우리가 정한 간격에 맞춰 시간의 변화를 보여줄수도 있겠습니다. 

위에서 버튼을 클릭하면 displayDate()함수가 실행되도록 만들어놨죠? 클릭하면 위처럼 현재 시각을 알려줍니다. 그런데 여기에 덧붙여서 setInterval("displayDate()", 1000);을 설정해주면 1초에 한 번씩 시간이 바뀌게 됩니다. 10000이 아니라 10000으로 설정해주면 10초에 한 번씩 시간이 바뀌게 되겠죠? setInterval()함수는 우리가 지정한 일정한 시간간격에 따라 반복적으로 실행됩니다. 첫 번째 인자에는 그렇게 간격을 두고 실행할 함수를 넣어주면 됩니다. 이번 경우에는 displayDate()함수가 되겠네요, 두 번째 인자로는 시간 정보입니다. ms기준으로, 1000ms는 1s입니다. 당연한 이야기지만 1000보다 작은 숫자는 작동이 되지 않습니다. 

<p id = "date"></p>
<script type="text/javascript">
let d = new Date();

d = new Date(2021,9-1,8,12,30,10,0); //1번 방법

d = new Date("October 12, 2021 14:24:34");//2번 방법

document.getElementById('date').innerHTML = d; 
document.getElementById('date').innerHTML = d.getFullYear();
document.getElementById('date').innerHTML = d.getMonth()+1;
document.getElementById('date').innerHTML = d.getDate();
document.getElementById('date').innerHTML = d.getDay();
document.getElementById('date').innerHTML = d.getHours();
document.getElementById('date').innerHTML = d.getMinutes();
document.getElementById('date').innerHTML = d.getSeconds();

//1 ->01, 한 자리 수로 표기 x

</script>

이번에는 id를 date로 준 p태그를 활용해서 현재시간이 아니라 우리가 지정한 시간을 표현하는 방법을 익혀보겠습니다. new Date()를 정해주는 방법은 숫자만 나열하는 방법과, 우리가 좀더 익숙한, 영어식으로 October 이렇게 월 표기에 시계처럼 표현하는 방법이 있습니다. 간단하지만 한 가지 주의해야하는 부분이 있습니다. 그것은 바로 표기 할 때에 한 자리 숫자로 표기를 지양해야하며,getMonth()는 0에서 11까지로 세기 때문에 12를 읽지 못합니다. 따라서 만약 1번 방법으로 할 경우에는 위에처럼 -1을 빼줘야하고(1월이 0이고 12월이 11이기 때문입니다. ) 2번 방법으로 할 경우에는 똑같이 하되 October가 getMonth()를 만나 1개월이 빠지게 되기 때문에 +1을 해줘야하고, 더불어서 1번은 굳이 +1을 해줄 필요가 없는데 +1이 들어가는 것이기 때문에 숫자를 입력할 때 1을 빼고 넣어줘야 합니다. 정말 복잡하죠?^^한 마디로 말해서 January, February등 영어식으로 쓸때에만 getMonth() + 1을 해주는 것이라고 외우면 되겠습니다.