π»νμ΄λ¨Έπ»
- μΌμ ν μκ° νμ λλ μΌμ ν κ°κ²©μΌλ‘ ν¨μλ₯Ό μ€ννκ±°λ, μΌμ ν μκ° νμ μ½λλ₯Ό μ€ννλ€.
νμ΄λ¨Έ μμ
1. id setTimeout(function , milliseconds)
- 1νμ± νμ΄λ¨Έ
- function: μ€νν ν¨μλ₯Ό μ§μ νλ€.
- milliseconds: ν¨μκ° μ€νλ λκΈ° μκ°(λ°λ¦¬μ΄)μ μ§μ νλ€.
2. id setInterval(function , milliseconds)
- λ°λ³΅ νμ΄λ¨Έ
- function: μ€νν ν¨μλ₯Ό μ§μ νλ€.
- milliseconds: ν¨μκ° μ€νλ λκΈ° μκ°(λ°λ¦¬μ΄)μ μ§μ νλ€.
νμ΄λ¨Έ μ’ λ£
1. void clearTimeout(id)
- setTimeout()μ μν΄ μ€μ λ νμ΄λ¨Έλ₯Ό μ·¨μνλ€.
- id: setTimeout()μμ λ°νλ νμ΄λ¨Έ μλ³μ
2. void clearInterval(id)
- setInterval()μ μν΄ μ€μ λ νμ΄λ¨Έλ₯Ό μ·¨μνλ€.
- id: setInterval()μμ λ°νλ νμ΄λ¨Έ μλ³μ
π»νμ΄λ¨Έ μμ&μ’ λ£π»
κΈ°μ΄μ½λ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>νμ΄λ¨Έ</h1>
<form name="form1">
<fieldset>
<legend>setTimeout</legend>
<input type="button" value="λ²νΌ" name="btn1">
<input type="text" name="txt1">
</fieldset>
<fieldset>
<legend>setInterval</legend>
<input type="button" value="λ²νΌ" name="btn2">
<input type="text" name="txt2">
</fieldset>
<fieldset>
<legend>μ‘°μ</legend>
<input type="button" value="μμ" name="btn3">
<input type="button" value="λ©μΆ€" name="btn4">
<input type="text" name="txt3">
</fieldset>
</form>
</body>
</html>νμ΄λ¨Έ μμ
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var txt1 = document.form1.txt1;
var txt2 = document.form1.txt2;
btn1.onclick = m1;
function m1() {
setTimeout(f1, 1000); //3μ΄ νμ f1λ₯Ό μ€ννλ€
}
function f1() {
alert('f1');
txt1.value = (new Date()).toLocaleTimeString();
}
btn2.onclick = m2;
function m2() {
setInterval(f2, 1000);
}
function f2() {
// alert('f2');
txt2.value = (new Date()).toLocaleTimeString();
}
</script>
setTimeoutμ λ²νΌ 1λ² λλ μ λ 1νλ§ μ€νλλ€.
setIntervalμ λ²νΌμ 1λ² λλ¬λ νμ΄λ¨Έκ° κ³μ μ€νλλ€.
νμ΄λ¨Έ μ’ λ£
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 100); //0.1s
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
clearInterval(timer);
}
</script>
μ£Όμν μ μ μμμ μ¬λ¬λ² λλ₯΄λ©΄ λ©μΆ€μ λλ¬λ μ’ λ£λμ§ μλλ€.
ν¨μλ₯Ό μ€νν λλ§λ€ nκ°μ νμ΄λ¨Έκ° μμ±λκΈ° λλ¬Έμ΄λ€.
idλ λ§μ§λ§ νμ΄λ¨Έμ idλ§ κΈ°μ΅νλ―λ‘ μ΄μ νμ΄λ¨Έλ₯Ό λ©μΆ μ μλ€.
κ·Έλμ λ°λ‘ ν΅μ λ₯Ό ν΄μ€μΌνλ€.
ν΅μ λ°©λ²
1. νμ΄λ¨Έ μ€λ³΅ μ€νμ κΈμ§νλ€.
보νΈμ μΈ λ°©λ²μ΄λ€.
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
btn3.onclick = m3;
function m3() { //μμ
if(timer == 0){
timer = setInterval(f3, 100); //0.1s
}
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4; //λ©μΆ€
function m4() {
clearInterval(timer);
timer=0;
}
</script>timerκ° 0μΌλλ§ setIntervalν¨μλ₯Ό νΈμΆνλ€.
λ©μΆ ν μ¬μμμ νλ €λ©΄ clearInterval λ€μ timerμ 0μ λμ νμ¬ λ¦¬μ ν΄μ€λ€.
2. νμ΄λ¨Έλ₯Ό λ°°μ΄λ‘ λ΄μ κΈ°μ΅νλ€.
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
var timerlist = [];
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 100); //0.1s
timerlist.push(timer);
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
//μμ°¨μ€μ§
// timer = timerlist.pop();
// clearInterval(timer);
//μΌκ΄μ€μ§
for (var i=0; i<timerlist.length; i++) {
clearInterval(timerlist[i]);
}
}
</script>μ€νν λλ§λ€ timerlist λ°°μ΄μ μΆκ°νμ¬ νμ΄λ¨Έ idλ₯Ό κΈ°μ΅νλ€.
μμ°¨ μ€μ§λ λ§μ§λ§ μμλ₯Ό popμΌλ‘ κΊΌλ΄ ν΄λΉ idμ νμ΄λ¨Έλ₯Ό μ€μ§μν¨λ€.
π»μ΄λ―Έμ§ μ¬λΌμ΄λπ»
κΈ°μ΄μ½λ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>νμ΄λ¨Έ</h1>
<img src="../asset/images/catty01.png" name="cat1">
</body>
</html> <script>
//μ΄λ―Έμ§ μ¬λΌμ΄λ
var cat1 = document.images['cat1'];
var m =1;
var timer =0;
cat1.onclick = m5;
function m5() {
if (timer==0){
timer = setInterval(f5, 500);
} else {
clearInterval(timer);
timer=0; //reset
}
}
function f5() {
m++;
if (m>9) m=1; //9μ₯μ μ¬μ§ 무ν루ν
cat1.src = "../asset/images/catty0" + m + ".png";
}
</script>
μ¬μ§μ ν΄λ¦νλ©΄ μλμΌλ‘ μ΄λ―Έμ§κ° λ³κ²½λκ³ λ€μ ν΄λ¦νλ©΄ μ΄λ―Έμ§κ° λ©μΆλ€.
'WEB > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] Content μ‘°μ(1) : innerText, innerHTML, textContent (0) | 2023.10.10 |
|---|---|
| [JavaScript] DOMμ κΈ°μ΄ (0) | 2023.10.10 |
| [JavaScript] select box νΈλ€λ§ (0) | 2023.10.06 |
| [JavaScript] radio νΈλ€λ§ (0) | 2023.10.06 |
| [JavaScript] checkbox νΈλ€λ§ (0) | 2023.10.06 |
