라라리라
2023.09.12 / Step 5 [DOM_비동기] - 코딩 50 일차 본문
_0501_setInterval1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
[개념] setInterval() 메서드
(1) setInterval(함수명, 시간)
(1) 지정된 간격(밀리초)으로 함수를 호출한다.
(2) 메서드는 창이 닫힐 때까지 setInterval() 을 계속 호출한다.
(3) 1초 = 1000밀리초
-->
<h1>일정 시간 간격으로 값 증감시키기</h1>
<!-- clearInterval()은 Interval함수를 정지시킴 -->
<button onclick="clearInterval(auto)">증가 정지</button>
<script>
let num = 0;
function addNumber(){
num += 1;
console.log("num: " + num);
}
// setInterval(함수(){}, 밀리세컨드)
// 해당 시간간격만큼 해당 함수를 호출함(애니메이션)
let auto = setInterval(addNumber, 100); // 0.1초 간격으로 addNumber함수 호출
</script>
</body>
</html>
일정 시간 간격으로 값 증감시키기
_0501_setInterval2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
[개념] clearInterval() 메서드
(1) setInterval() 메서드에서 반환된 ID를 저장한다.
(2) clearInterval(ID명)
(3) 설정된 타이머를 지운다.
-->
<body onload="changeColor()">
<div id="target">
<p>This is a Text.</p>
</div>
<button onclick="stopTextColor()">중지</button>
<script>
let id = null;
function changeColor() {
id = setInterval(flashText, 500); // 0.5초 간격으로 호출
}
function flashText() {
let elem = document.getElementById("target");
elem.style.color = (elem.style.color == "red") ? "blue" : "red";
elem.style.backgroundColor =
(elem.style.backgroundColor == "green") ? "yellow" : "green";
}
/*
color => red, blue
backgroundColor => green, yellow
*/
function stopTextColor() {
clearInterval(id);
}
</script>
</body>
</html>
This is a Text.
_0501_setInterval3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
width: 300px;
height: 300px;
font-size: 100px;
text-align: center; /* 텍스트 가로 가운데 정렬 */
line-height: 300px; /* 텍스트 세로 가운데 정렬 */
border: 1px solid black;
}
</style>
</head>
<body>
<div id="content">
0
</div>
<script>
let element = document.getElementById("content");
let cnt = 0;
// 익명 함수 구조
/*
setInterval(function() {
cnt++;
element.innerHTML = cnt;
}, 1000);
*/
// 일반 함수 구조
function addCnt() {
cnt++;
element.innerText = cnt;
}
setInterval(addCnt, 1000);
</script>
</body>
</html>
0
_0501_setInterval4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
width: 300px;
height: 300px;
font-size: 100px;
text-align: center; /* 텍스트 가로 가운데 정렬 */
line-height: 300px; /* 텍스트 세로 가운데 정렬 */
border: 1px solid black;
}
</style>
</head>
<body>
<div id="content">
0
</div>
<button onclick="stopCnt()">중지</button>
<script>
let element = document.getElementById("content");
let myTimer = setInterval(addCnt, 1000);
let cnt = 0;
function addCnt() {
cnt++;
element.innerHTML = cnt;
}
function stopCnt() {
clearInterval(myTimer);
}
</script>
</body>
</html>
0
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.14 / Step 6 [DOM_이벤트응용] - 코딩 52 일차 (0) | 2023.09.14 |
|---|---|
| 2023.09.13 / Step 5 [DOM_비동기] - 코딩 51 일차 (0) | 2023.09.13 |
| 2023.09.11 / Step 4 [DOM_태그생성] - 코딩 49 일차 (0) | 2023.09.11 |
| 2023.09.08 / Step 4 [DOM_태그생성] - 코딩 48 일차 (0) | 2023.09.08 |
| 2023.09.07 / Step 3 [DOM_이벤트] - 코딩 47 일차 (0) | 2023.09.07 |