[JavaScript] 오늘 날짜, 현재 시간 띄우기 (0 붙이기, 오전 오후 구분)

자바스크립트로 오늘 날짜와 현재 시간을 띄우고 시간의 흐름에 따라 자동으로 변경되도록 만들어보겠습니다.

 

1. 오늘 날짜 보여주기 (YYYY-MM-DD 형식으로)

2. 오전 or 오후 띄우기

3. 현재 시간 보여주기 (HH-MM 형식으로)

4. 오후 시간을 한 자리 수부터 보여주기 (13시가 아닌 01시로)

5. 시간이 지나면 자동으로 날짜, 시간 바꿔주기

 

이 5가지 동작이 들어가야 합니다. 아래에서 코드 확인할 수 있습니다.

function showDateTime(){

	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth()+1;
	let day = date.getDate();
	let hour = date.getHours();
	let min = date.getMinutes();
    //내장 메소드로 날짜와 시간 받아오기
    
	let ampm = hour < 12 ? '오전' : '오후';
    //오전, 오후 붙이기
    
	let pmHour = hour % 12;
    //12시 이후면 한 자리수로 보여주기 (13시가 아닌 1시로)
    
	let changeHour = hour > 12 ? pmHour : hour;
    // 낮 12시 이후면 1,2,3시로 보여주고 이전이면 기존 시간으로 보여주기
	
	let changeHour2 = changeHour < 10 ? '0' + changeHour : changeHour;
    	let changeMin = min < 10 ? '0' + min : min;
	let changeMonth = month < 10 ? '0' + month : month;
	let changeDay = day < 10 ? '0' + day : day;
    //1,2,3를 01,02,03 형태로 바꾸기
    
	$("header .top .date").text(year + '-' + changeMonth + '-' + changeDay + '\u00A0' + '\u00A0' + ampm + '\u00A0' + changeHour2 + ':' + changeMin);
    //원하는 곳에 결과물 넣기 
        
   }
    
   showDateTime(); //처음에 화면에 뿌려주기
   setInterval(showDateTime,10000); //1분마다 초기화해주기
   
   //결과
   //2021-11-11 오후 03:37