[JSP 웹 프로그래밍] 페이지 공간 나누기 2 - Header (1초 마다 시간을 지나게 하는 방법 / 홈페이지 카운트 하는 방법

1초 마다 시간을 지나게 하는 방법 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

	<div id="divTm">2024-06-26 14:09:39 오전</div>
	
<script type="text/javascript">
//시간을 달리는 J/S

function fnCt(){

	let today = new Date();
	//today : Wed Jun 26 2024 14:15:22 GMT+0900 (한국 표준시)
	console.log("today : " + today)
	
	//연도
	//year : 2024
	let year = today.getFullYear(); //전체 연도(2024)를 가져옴 
	console.log("year : " + year)
	
	//월
	//month : 6
	// 달을 할때 +1을 하는 이유 : 1월을 0으로 12월을 11로 표시하기 때문에 월을 계산할 때 +1을 해줘야 한다.
	// 즉, 달은 인덱스로 가져오기 때문에 그렇다.
	// 06월을 만들기 위함 하지만 '051'로 나옴 (모두 문자로 출력되서) 따라서 더하기를 괄호로 감싸줌 
	// 10,11,12월인 경우에는 앞에 0 이 붙으면 안되니깐 slice를 사용함 
	// - 역발향, 2 : 2글자
	let month =('0'+ (today.getMonth() + 1)).slice(-2); 
	console.log("month : " + month)
	
	//일
	//day : 26
	let day = ('0'+today.getDate()).slice(-2);
	console.log("day : " + day);
	
	//오늘 날짜 출력 
	//dateString : 2024-06-26
	let dateString = year + "-" + month + "-" +day;
	console.log("dateString : " + dateString);
	
					//쿼리를 통해서 요소를 셀렉트 하는자 -> divTm의 요소를 가져옴 
	let divTcenter = document.querySelector('#divTm');
	
	//02:55:17 로 시간을 만들기 
	// 02는 숫자 2이기 때문에 앞에 문자 0을 붙여 줘야함 
	
	let hours = ('0'+today.getHours()).slice(-2);
	let minutes = ('0'+today.getMinutes()).slice(-2);
	let seconds = ('0'+today.getSeconds()).slice(-2);
	
	let timeString = hours+":"+minutes+":"+seconds;
	console.log("timeString : "+ timeString)
	
	//오전 , 오후 구분 
	let ampm = "";
	if(hours < 12) {
		ampm="오전";
	}else {
		ampm="오후";
	}
	
	//현재 시간을   날짜, 시간, 오전/오후로 작성 하기 위함 
	divTcenter.innerHTML= "<p>" + dateString + " " + timeString + " " + ampm + "</p>"; //HTML태그도 같이  
}

setInterval(fnCt,1000); //1초 마다 fuCt 함수를 실행 

</script>