# Intervals
*한 파일에 모든 코드를 작성하지 말고 입력하는 내용에 따라서 파일, 폴더 따로 만들어두기
setInterval은 어떤 함수를 일정 간격으로 호출해주는 것
setInterval(함수이름, 함수주기);
함수주기(시간 간격)는 1/1000초 단위임
setInterval(function, 1000); -> 1초마다 호출
setInterval(function, 3000); -> 3초마다 호출
[JS]
@@ -0,0 +1,7 @@
const clock = document.querySelector("h2#clock");
function sayHello() {
console.log("hello");
}
setInterval(sayHello, 5000);
[html]
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="css/style.css" />
<title>Momentum App</title>
</head>
<body>
@@ -16,7 +16,9 @@
/>
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<script src="app.js"></script>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
# Timeouts & dates
setInterval(sayHello, 1000);
sayHello() 라는 펑션을 1초마다 반복한다는 의미.
단 바로 실행되지 않고 1초 후 첫 시작이 되고 계속 1초마다 반복된다.
setTimeout(sayHello, 1000);
1초 기다렸다가 한번만 실행.
[JS]
const clock = document.querySelector("h2#clock");
function sayHello() {
console.log("hello");
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
setInterval(sayHello, 5000);
getClock();
setInterval(getClock, 1000);
[html]
/>
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
# PadStart
number를 string으로 바꾸는 방법은 String() 안에 감싸는 방법이 있다.
String(new Date().getHours()).padStart(2,'0');
0> 00 로 바꾸고 싶을 때는 padStart(x, 'y') 를 사용하면 된다.
-> padStart는 내가 갖고 있는 string 을 길게 만들어 주고 싶을 때 사용.
-> 뒤에서 추가하고 싶을 때는 padEnd를 사용하면 된다.
-> x는 원하는 length, y는 앞에 채워줄 내용.
[JS]
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
# Recap
setInterval(sayHello, 5000);
- 매초, 매분마다 반복되는 일을 해야할 때 실행하는 함수.
- 함수이름, 시간 순으로 적음.
- 1초는 1000임
setTimeout(sayHello,1000);
- 함수를 바로 실행하고 싶지 않을 때 사용
- 위 예시는 1초 뒤에 sayHello를 실행시킨다는 의미임.
*1. != 2. 비슷하게 생겼지만 전혀다름.
getHourse().padStart(2,"0");
getHourse()
한 자릿수의 시간이 두 글자(ex.01)로 나오게 하도록 사용하는 함수
padStart(2,"0")
두 글자가 되지 않으면 0을 앞에 추가한다는 의미
+ 뒤에 글자를 추가하고 싶으면 padEnd를 사용하면 됨
'Web > JavaScript' 카테고리의 다른 글
| [JS/이론 정리] script 태그 ~ 형 변환 (0) | 2022.07.30 |
|---|---|
| [JS] Quotes & Background 구현 (0) | 2022.07.28 |
| [JS] Login 구현 - Input, Form, Events (0) | 2022.07.27 |
| [JS] CSS in JavaScript (0) | 2022.07.27 |
| [JS] document, html, elements, events (0) | 2022.07.21 |