라라리라
2023.09.13 / Step 5 [DOM_비동기] - 코딩 51 일차 본문
_0502_timeout1.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>
<!-- 3초 뒤에 무언가를 실행시키고 싶을 때 -->
<h1>일정 시간 간격으로 한번만 값 증감시키기</h1>
<p> 콘솔 패널을 열어 확인하세요.</p>
<script>
let num = 0;
function addNumber(){
num += 1;
console.log("num: " + num);
}
let auto = setTimeout(addNumber, 3000);
</script>
</body>
</html>
일정 시간 간격으로 한번만 값 증감시키기
콘솔 패널을 열어 확인하세요.
_0502_timeout2.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>
<p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다. </p>
<button onclick="showAlert()">눌러보세요</button>
<script>
function showAlert() {
setTimeout(popup, 3000);
}
function popup(){
alert("setTimeout()을 사용하여 표시됩니다.");
}
</script>
</body>
</html>
버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다.
_0502_timeout3.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>
<div id='clock'></div>
<script>
function setClock() {
let now = new Date();
let s = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
document.getElementById('clock').innerHTML = s;
setTimeout(setClock, 1000);
}
setClock();
</script>
</body>
</html>
_0503_속도중첩_미해결.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>
#bar {
width: 100%;
height: 30px;
background-color: lightgray;
}
#progress {
width: 10px;
height: 30px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="bar">
<div id="progress"></div>
</div>
<button onclick="progressFunction()">시작</button>
<script>
let width = 0;
let id = null;
function progressFunction() {
width = 0;
id = setInterval(move, 50);
}
function move() {
let element = document.getElementById("progress");
if(width == 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + "%";
}
console.log(width);
}
</script>
</body>
</html>
_0503_속도중첩_해결.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>
#bar {
width: 100%;
height: 30px;
background-color: lightgray;
}
#progress {
width: 10px;
height: 30px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="bar">
<div id="progress"></div>
</div>
<!-- 버튼 이벤트가 한번만 실행되도록 설정 -->
<button onclick="progressFunction();this.onclick=null;">시작</button> <!--누르면 버튼의 기능이 사라짐-->
<script>
let width = 0;
let id = null;
function progressFunction() {
width = 0;
id = setInterval(move, 50);
}
function move() {
let element = document.getElementById("progress");
if(width == 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + "%";
}
console.log(width);
}
</script>
</body>
</html>
_0504_setTimeout으로interval구현.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>
<button onclick="startCount()">시작</button>
<input type="text" id="number">
<button onclick="stopCount()">중지</button>
<script>
let id = 0;
let cnt = 0;
function startCount() {
setCount();
}
function setCount() {
document.getElementById("number").value = cnt;
cnt++;
id = setTimeout(setCount, 1000);
}
function stopCount() {
clearTimeout(id);
}
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.15 / Step 6 [DOM_이벤트응용] - 코딩 53 일차 (0) | 2023.09.15 |
|---|---|
| 2023.09.14 / Step 6 [DOM_이벤트응용] - 코딩 52 일차 (0) | 2023.09.14 |
| 2023.09.12 / Step 5 [DOM_비동기] - 코딩 50 일차 (0) | 2023.09.12 |
| 2023.09.11 / Step 4 [DOM_태그생성] - 코딩 49 일차 (0) | 2023.09.11 |
| 2023.09.08 / Step 4 [DOM_태그생성] - 코딩 48 일차 (0) | 2023.09.08 |