[JavaScript] 자바스크립트로 아날로그 시간(시계) 표시하기

087_자바스크립트로 아날로그 시간(시계) 표시하기 [적용] 아날로그 형식의 시계를 표시하고 싶을 때 [내용] 아날로그 시계를 구현하여 Date 객체를 좀 더 자세히 알아보자. div 요소를 사용해 시계바늘의 컨테이너를 만든다. 원의 중심을 기준으로 각도를 계산하기 때문에 컨테이너를 사용하면 처리가 더욱 간단하다. 기본적인 상태는 바늘이 모두 12시를 가리키고 있다. HTML index.html CSS style.css body {background-color: #000000;} .clock { border-radius: 50%; border: 3px solid white; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.1); positi..

2022.06.13

[JavaScript] 자바스크립트에서 카운트다운 만들기

086_자바스크립에서 카운트다운 만들기 [적용] 제한 시간을 지정하여 카운트다운하고 싶을 때 [문법] 메소드 의미 setInterval(함수, 밀리초) 밀리초 후 함수 실행 [내용] 시간의 차이를 계산하여 카운트 다운을 만들어 보자. setInterval()은 지정한 밀리초마다 함수를 실행한다. 목표 시간과 경과 시간의 차를 구하여 카운트다운을 처리해 보자. const totalTime = 10000; // 10초 const oldTime = Date.now(); const timerId = setInterval(() => { const currentTime = Date.new(); // 시간의 차를 구함 const diff = currentTime - oldTime; // 남은 밀리초 계산 const ..

2022.06.11

[JavaScript] 자바스크립트에서 경과 시간 확인하기

085_자바스크립트에서 경과 시간 확인하기 [적용] 데이터 통신 시간을 확인하고 싶을 때 자바스크립트의 저리 시간을 확인하고 싶을 때 [문법] 메소드 의미 반환 Date.now() 기준시에서 현재 시간을 밀리초로 가져오기 숫자 [내용] Date 객체로 시간의 차이를 계산할 수 있다. 측정 시작 시점에 Date.now()를 사용해 절대 시간을 구할 수 있다. 측정이 끝나는 시점에 다시 Date.now()를 사용하여 두 값을 빼면 밀리초 단위의 경과 시간을 구할 수 있다. 알아보기 쉬운 초(Second) 단위 변환은 1000으로 나누고 소수점을 처리한다. // 초(Second) 단위 변환하기 const sec = Math.floor(diff / 1000); // 스크립트 시작 지점의 기록 const oldT..

2022.06.11

[JavaScript] 자바스크립트에서 날짜와 시간 차이 구하기

084_자바스크립트에서 날짜와 시간 차이 구하기 [적용] 두 날짜의 차이를 구하고 싶을 때 두 시간의 차이를 구하고 싶을 때 [내용] 비교하고 싶은 날짜와 시간을 Date 인스턴스에 넣고 getTime()을 사용하여 밀로초를 구한다. 밀리초는 자바스크립트에서 가장 간단한 시간 단위로 두 날짜의 밀리초를 계산하여 차이를 구한다. 계산 후 알아보기 쉬운 단위로 변환이 필요하다. 일수(Day)는 결과값을 '24*60*60*1000'으로 나누면 확인할 수 있다. const dateA = new Date('2022/06/01'); const dateB = new Date('2022/05/01'); const diffMSec = dateA.getTime() - dateB.getTime(); const diffDat..

2022.06.11

[JavaScript] 자바스크립트에서 날짜 계산하기

083_자바스크립트에서 날짜 계산하기 [적용] 하루 뒤의 날짜를 알고 싶을 때 달을 넘겨 계산하고 싶을 때 [내용] 날짜를 가져오거나 설정하는 메소드에서 지정한 날짜로부터 몇 개월 전이나 몇일 후의 날짜 등을 구할 수 있다. 계산 결과가 날짜의 유효 범위를 넘어서는 경우에는 Date 객체가 환산작업을 한다. 12월에서 2개월을 더하면 결과는 14가 되지만, Date 객체는 적절한 환신을 통해 2월을 반환하다. const date = new Date('2022/06/01'); date.setMonth(date.getMonth() - 1); // 1개월 전 console.log(date.toLocaleDateString()); // 결과: '2022.5.1.' date.setDate(date.getDate(..

2022.06.10

[JavaScript] 자바스크립트에서 날짜 설정하기

082_자바스크립트에서 날짜 설정하기 [적용] 날짜와 시간을 설정하고 싶을 때 [생성자(Constructor)를 사용하는 방법] 날짜와 시간 정보를 생성자의 인수로 전달한다. 전달된 정보는 자동적으로 타입에 맞춰지며, 문자열로 날짜와 시간을 설정할 수 있다. const date1 = new Date('2022/06/09 20:01:10'); const date2 = new Date('Thu Jun 09 2022 20:01:10'); 숫자로도 지정이 가능하다. 숫자는 년, 월, 일, 시, 분, 초 밀리초의 순서로 기입한다. 월은 0~11의 범위에서 사용되므로 주의가 필요하다.(숫자 0부터 1월을 나타낸다.) 생략하면 0이 대입된다. const date3 = new Date(2020, 06, 09, 20, ..

2022.06.09

[JavaScript] 자바스크립트 날짜 문자열의 타임스탬프 확인하기

081_자바스크립트 날짜 문자열의 타임스탬프 확인하기 [적용] 타임스탬프로 날짜와 시간을 계산하고 싶을 때 [문법] 메소드 의미 반환 Data.parse() 날짜 문자열 타임스탬프 가져오기 숫자 [내용] Data.parse()는 인수를 타임스탬프로 변환한다. 타임스탬프는 1970년 1월 1일 00:00:00부터 현재까지의 경과 시간을 나태는 것으로 단위는 밀리초(1/1000초)다. 프로그래밍 시 타임스탬프를 기준으로 하여 시간을 계산하는 경우 해당 메소드의 사용이 가능하다. Data.parse() 메소드는 Date 인스턴스의 getTime() 메소드와 같은 값을 가진다. const num1 = Date.parse('2022/06/09') console.log(num1); // 결과: 16547004000..

2022.06.09

[JavaScript] 자바스크립트에서 현재 시간과 날짜 가져오기

080_자바스크림트에서 현재 시간과 날짜 가져오기 [적용] 간단히 날짜 정보를 출력하고 싶을 때 언어별 날짜 표시 형식으로 출력하고 싶을 때 [문법] 메소드 의미 반환 toLocaleDateString() 현재 날짜를 문자열로 가져오기 문자열 toLocaleTimeString() 현재 시각을 문자열로 가져오기 문자열 [내용] getDate()와 getHours()를 사용하면 정보를 세부적으로 가져올 수 있으나, 코드가 복잡해지기 쉽다. toLocaleString()을 사용하면 간결한 표현이 가능하며, 사용자의 언어 환경에 따라 날짜 형식을 지정하여 가져온다. 한국어 환경에서는 '2022/06/08 21:22:01'의 형식으로 가져오지만, 영어는 '08/06/2022, 9:22:01 PM'의 형식을 따른다..

2022.06.08

[JavaScript] 자바스크립트에서 요일 다루기(가져오기)

079_자바스크립트에서 요일 다루기(가져오기) [적용] 요일을 표시하고 싶을 때 날짜 정보에서 요일을 확인하고 싶을 때 [문법] 메소드 의미 반환 getDay() 요일 가져오기 숫자 [내용] Date 객체 getDay()는 요일 정보를 가져온다. 날짜 정보를 가져오는 getDate()와 비슷해 헷살리기 쉽다.반환값이 숫자이므로 변환이 필요하며, 0은 일요일, 6은 토요일을 나타낸다. 값 해당 요일 0 일요일 1 월요일 2 화요일 3 수요일 4 목요일 5 금요일 6 토요일 [예시] 다음 예시를 확인해 보자. 일요일부터 토요일까지 해당하는 문자열을 배열에 넣고 getDay()의 반환값에 따라 배열에서 해당하는 요일을 가져온다. const date = new Date(); const day = date.get..

2022.06.08

[JavaScript] 자바스크립트에서 시간 다루기(가져오기)

078_자바스크립트에서 시간 다루기(가져오기) [적용] 현재 시각을 불러오고 싶을 때 시간을 디지털 형식으로 표시하고 싶을 때 [문법] 메소드 의미 반환 getHours() 시간(Hour) 가져오기 숫자 getMunuites() 분(Minute) 가져오기 숫자 getSeconds() 초(Second) 가져오기 숫자 getMilliseconds() 밀리초(Millisecodn) 가져오기 숫자 [내용] 이 메소드를 이용해 현재 시간 정보를 가져온다. getHours()는 0~23의 정수, getMinutes(), getSeconds()는 0~59의 정수를 반환한다. 24:00의 경우 getHours()의 반환값은 24가 아닌 0이므로 주의하자. const date = new Date(); const hour..

2022.06.08