[자바스크립트] setInterval(), Date(), padStart(), 시/분/초 구하기
반응형
setInterval(), Date(), padStart(), 시/분/초 구하기
- intervals와 timeout에 대해서 알아보자
setInterval(function, milliseconds)
- 함수를 지정한 시간 주기마다 반복 호출하는 메소드
- 사용 경우
- 갤러리 형식의 뷰를 만들어서 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우
- 일정 시간 간격으로 배너 광고를 바꾸면서 보여줄 경우
- 일정 주기로 계속해서 서버와 통신이 필요한 경우
- 사용 예 :
setInterval(sayHello, 5000);
clearInterval(변수)
- setInterval를 종료시키는 메소드
- 즉, 생성한 타이머 함수를 제거하는 메소드
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
</body>
</html>
setTimeout(function, milliseconds)
- 일정 시간이 지난 후에 함수를 한 번만 실행하는 방법
clearTimeout(변수)
- setTimeout를 취소하는 메소드
- setTimeout에서 설정한 시간 전에 clearTimeout를 설정해 놓은 버튼을 클릭하면 setTimeout을 취소하는 역할
Date()
- Date() 객체는 다음 포스팅에서 자세하게 정리할 예정
const date = new Date()처럼 생성자로 호출할 경우 Date 객체를 반환한다.- getFullYear() - 년도
- getMonth() - 월, 1월은 0으로 표시된다. (0~11)
- getDate() - 일
- getDay() - 요일, 일요일~토요일(0~6)
- getHours() - 시간
- getMinutes() - 분
- getSeconds() - 초
- getMilliseconds() - 밀리초
padStart()
- 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.
- 채워 넣기 문자열의 앞에 추가
- 그러나 Date 객체에는 사용할 수 없다.
- Date()는 number 타입으로 넘겨줘서... 그래서 string으로 바꿔줘서 사용하면 된다.
String(new Date().getHours())이렇게!
"1".padStart(2,"0")-> "01""12".padStart(2,"0")-> "12"- 이미 2글자이기 때문에 아무런 변화가 없다.
padEnd()
- padStart와 반대이다.
- 대신 채워 넣기는 문자열 뒤에 추가
"1".padEnd(2, "0")-> "10"
시, 분, 초 구하기
const date = new Date()
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] Date 객체 (0) | 2021.07.06 |
|---|---|
| [자바스크립트] Math 객체 (0) | 2021.07.06 |
| [자바스크립트] Map과 Set (0) | 2021.07.05 |
| [자바스크립트] window 창 크기 (0) | 2021.07.04 |
| [자바스크립트] 이벤트 등록, addEventListener() (0) | 2021.07.04 |