[javascript ] 자바스크립트 시간, 날짜 가져오기

1. new Date(); 를 이용하여 시간 나타내기

function getTime(){
	const date = new Date();
	// console.dir(new Date())을 하면 일,월,시,분,초 등 의 정보가 다 있다.
	const hours = date.getHours();
	const minutes = date.getMinutes();
	const seconds = date.getSeconds();

	return `${hours} : ${minutes} : ${seconds}`
}

2. 10초 미만이라서 한 자릿수가되는 시간앞에 addZero라는 함수를 이용하여 0을 붙힘

function getTime(){
	const date = new Date();
	const hours = date.getHours();
	const minutes = date.getMinutes();
	const seconds = date.getSeconds();

	return `${addZero(hours)} : ${addZero(minutes)} : ${addZero(seconds)}`
}

// 시간이나 분, 초가 한 자릿수가 나올 때 앞에 0을 붙히는 것
// ex) 2 -> 02
function addZero(numbers){
	return numbers < 10 ? `0${numbers}` : numbers;
	// 삼항 연산자로 나타낸 것을 if 문으로 작성한 것
	// if(numbers < 10 ){
	//     return numbers = `0${numbers}`
	// }else{
	//     return numbers
	// }
}
console.log(getTime());
getTime();

3. setInterval을 이용하여 매초마다 불러옴 & 화면에 출력

const body = document.body;
const pTag = document.createElement('p');
body.append(pTag);

function getTime(){
	const date = new Date();
	const hours = date.getHours();
	const minutes = date.getMinutes();
	const seconds = date.getSeconds();

	pTag.innerText = `${addZero(hours)} : ${addZero(minutes)} : ${addZero(seconds)}`
}

function addZero(numbers){
	return numbers < 10 ? `0${numbers}` : numbers
}

setInterval(getTime,1000);

==== 번외로 요일 가져오기

getDay()는 요일을 숫자값으로 넘겨준다. 1은 월요일, 2는 화요일 이렇게.

그래서 생각나는대로 dayNames 라는 배열에 요일을 넣고 각 switch 문과 for문으로 코드를 짰다.

const body = document.body;
const spanTag = document.createElement('span');
body.append(spanTag);

function dayName(){
	const date1 = new Date();
	const dayNames = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
	const day = date1.getDay();
    
    // switch
    switch(day){
      case 1:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 2:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 3:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 4:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 5:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 6:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      case 7:
      	return dayNames[day-1]
      	// document.write(dayNames[day-1])
      	break;
      default : 
      	return 'anyday'
     }
}

spanTag.innerText = dayName()

const body = document.body;
const spanTag = document.createElement('span');
body.append(spanTag);

function dayName(){
	const date1 = new Date();
	const dayNames = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
	const day = date1.getDay();
	//for / if
	for(let i = 0 ; i<dayNames.length+1 ; i++){
        	if(day === i){
        		return dayNames[day-1]
        	}
	}
}

spanTag.innerText = dayName()