날짜, 시간 설정하기(setter) / 년, 월, 일, 요일, 시, 분, 초 출력하기(getter)

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="today"></p>
<p id="Mydate"></p>
<p id="year"></p>
<p id="month"></p>
<p id="date"></p>
<p id="day"></p>
<p id="hour"></p>
<p id="min"></p>
<p id="second"></p>

<script type="text/javascript">

let day = new Date();
document.getElementById('today').innerHTML = "오늘날짜 : " + day;
let d = new Date();// 현재년월 현재시간 
d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter
document.getElementById('Mydate').innerHTML = "설정날짜 : " + d;
document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();
document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);	 
document.getElementById('date').innerHTML = "일 : " + day.getDate();		
document.getElementById('day').innerHTML = "요일 : " + day.getDay();		 // 요일(일:0~토:6)			
document.getElementById('hour').innerHTML = "시 : " + day.getHours();	
document.getElementById('min').innerHTML = "분 : " + day.getMinutes();	
document.getElementById('second').innerHTML = "초 : " + day.getSeconds();	

</script>
</body>
</html>

 

실행화면

 

 

 

 

 

 

 

 

 

 

 

 

 

설명

d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter

날짜 설정시 2가지 방법이 있습니다.

다만, d = new Date(2021, 1 - 1, 23, 01, 30, 10); 이 방법으로 진행 시 월 = 월 -1 해주어야 합니다.

document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();

getFullYear() : "년"을 반환

getElementById(id명)으로 연결되어 (Id=year)의 문자열을 "년도 : day.getFullYear()"으로 변경

document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);

getMonth() : "월-1"을 반환 , 정확한 월을 구하기 위해선 +1을 해주어야 합니다. getMonth()의 반환형이 문자형이라 parseInt를 사용하여 숫자형으로 변환해 주어야 연산이 가능합니다.

getElementById(id명)으로 연결되어 (Id=month)의 문자열을 "월 : parseInt(day.getMonth()+1)"으로 변경

document.getElementById('date').innerHTML = "일 : " + day.getDate();

getDate() : "일"을 반환

getElementById(id명)으로 연결되어 (Id=date)의 문자열을 "일 : day.getDate()"으로 변경

document.getElementById('day').innerHTML = "요일 : " + day.getDay();

getDay() : 해당 "요일"에 해당하는 숫자를 반환 ( 일=0, 월=1, 화=2, 수=3, 목=4, 금=5, 토=6 ) 

getElementById(id명)으로 연결되어 (Id=day)의 문자열을 "요일 : day.getDay()"으로 변경

document.getElementById('hour').innerHTML = "시 : " + day.getHours();

getHours() : "시"을 반환

getElementById(id명)으로 연결되어 (Id=hour)의 문자열을 "시 : day.getHours()"으로 변경

document.getElementById('min').innerHTML = "분 : " + day.getMinutes();

getMinutes() : "분"을 반환

getElementById(id명)으로 연결되어 (Id=min)의 문자열을 "분 :  day.getMinutes()"으로 변경

document.getElementById('second').innerHTML = "초 : " + day.getSeconds();

getSeconds() : "초"을 반환

getElementById(id명)으로 연결되어 (Id=second)의 문자열을 "초 :  day.getSeconds()"으로 변경

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04

1초당 갱신되는 시계 만들기

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>시계는 똑딱똑딱</h2>
<p id="demo"></p>
<script type="text/javascript">
function displayDate() {
	document.getElementById("demo").innerHTML = Date();	// 현재시각이 나옴.
}
// timer -> 초당 시간이 흘러가게 하는법 (1초마다 값이 갱신된다.)
setInterval("displayDate()", 1000); // 호출할함수, 1000 <- 1초 
</script>
</body>
</html>

 

실행화면

시계는 똑딱똑딱

 

 

 

설명

document.getElementById("demo").innerHTML = Date();

Date() : 현재 날짜의 정보를 제공하는 객체

getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 Date()로 변경

setInterval("displayDate()", 1000);

setInterval(호출할 함수,시간간격(ms)) : setInterval는 일정한 시간간격으로 값을 갱신해 주는 함수

ms 단위로 1000 = 1초이다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

+ Recent posts

티스토리툴바