목차
setInterval() 예제 - 1초마다 텍스트 표시 setInterval() 정의 setInterval() 구문 setInterval() 예제 - 3초 후 경고창 띄우기 setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이) setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X) setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O) setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O) setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡) setInterval() 예제 - 함수로 매개변수 전달 방법 setInterval() 예제 - 1초마다 서버에서 데이터 가져오기 ★
※ 일정 시간 후 어떤 행위를 반복해서 하게 할 때 사용.
setInterval() 예제 - 1초마다 텍스트 표시
[방법1] - 함수 이용 X
<p id="hz"></p>
<script>
const hz = document.getElementById("hz");
setInterval(function() {hz.innerHTML += "홈짱닷컴 Homzzang.com<br>"}, 1000);
</script>
결과보기
[방법2] - 함수 이용 O
<p id="hz"></p>
<script>
setInterval(homzzang, 1000);
function homzzang() {
document.getElementById("hz").innerHTML += "홈짱닷컴 Homzzang.com<br>";
}
</script>
결과보기
setInterval() 정의
지정된 간격(밀리초)으로 함수를 호출.
1.
함수 호출은 아래 경우 발생 때까지 지속.
2.
1 second(초) = 1000 milliseconds(밀리초)
3. cf.
setTimeout() 메서드 - 함수 1회만 실행.
4. clearInterval() 메서드 사용법id = setInterval(function , milliseconds );
clearInterval(id );
5. 관련 메서드
6.
모든 브라우저 지원.
7. MDN setInterval() 예제 보기
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
setInterval() 구문
방법1 - IE9 이하 경우 작동 X
setInterval(myFunc, milliseconds, param1, param2, ... )
방법2 - 모든 브라우저 작동 OsetInterval(function() { myFunc (" param1 ", " param2 ")}, milliseconds)
[매개변수]
myFunc
필수. 실행할 함수
milliseconds
필수. 밀리초 (1/1000초) ※ 10보다 작으면, 10 사용.param1, param2, ...
선택. 함수로 전달할 매개변수
방법1 경우, IE9 이하 지원 X 방법2 경우, 모든 브라우저 지원 O
[반환값]
타이머 id 를 숫자로 반환.
※ 해당 id를 clearInterval(id ) 매서드에 전달해 반복 멈춤.
setInterval() 예제 - 3초 후 경고창 띄우기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
setInterval(function(){ alert("홈짱닷컴 Homzzang.com"); }, 3000);
}
</script>
결과보기
※ 클릭 후 3초 후에 홈짱닷컴 Homzzang.com 얼럿창 뜸. 확인 누르면 계속 3초 후 뜸.
setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이)
<style>
#endcount {color:red;}
</style>
<?php
$end_day = "2021-12-31 23:59:59"; // 마감날짜
?>
<p id="endcount"></p>
<script>
var endDatetime = new Date("<?php echo $end_day?>").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var leftTime = endDatetime - now;
var dd = Math.floor(leftTime / (1000 * 60 * 60 * 24));
var hh = Math.floor((leftTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var mm = Math.floor((leftTime % (1000 * 60 * 60)) / (1000 * 60));
var ss = Math.floor((leftTime % (1000 * 60)) / 1000);
document.getElementById("endcount").innerHTML ="남은 시간: "+ dd + "일 " + hh + "시간 " + mm + "분 " + ss + "초";
if (leftTime < 0) {
clearInterval(x);
document.getElementById("endcount").innerHTML = "마감";
}
}, 1000);
</script>
둘레아빠 님 (211211) https://sir.kr/qa/441621
setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X)
<p id="demo"></p>
<script>
setInterval(homzzang, 1000);
function homzzang() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString ();
}
</script>
결과보기
setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O)
<p id="demo"></p>
<button onclick="stopTime()">시간멈추기</button>
<script>
const hz = setInterval(homzzang, 1000);
function homzzang() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString ();
}
function stopTime() {
clearInterval (hz);
}
</script>
결과보기
setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O)
<style>
#hz {
width: 100%;
height: 30px;
position: relative;
background-color: silver;
}
#bar {
background-color: blue;
width: 10px;
height: 30px;
position: absolute;
}
</style>
<div id="hz">
<div id="bar"></div>
</div>
<br>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
const bar = document.getElementById("bar");
let width = 0;
const pgs = setInterval(progress , 10);
function progress () {
if (width == 100) {
clearInterval (pgs);
} else {
width++;
bar.style.width = width + '%';
}
}
}
</script>
결과보기
setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡)
<button onclick="stopColor()">토글 멈추기</button>
<script>
hz = setInterval(homzzang, 500);
function homzzang() {
let x = document.body ;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval (hz);
}
</script>
결과보기
setInterval() 예제 - 함수로 매개변수 전달 방법
[올바른 방법]
<p id="demo1"></p>
<p id="demo2" style="color:red;"></p>
<script>
setInterval(function() {homzzang("홈짱닷컴", "Homzzang.com")}, 2000);
function homzzang(a, b) {
document.getElementById("demo1").innerHTML += a + " " + b + "<br>";
document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;
}
</script>
결과보기
[틀린 방법] - 아래처럼 하면, IE9 이하 경우 작동 X
<p id="demo1"></p>
<p id="demo2" style="color:red;"></p>
<script>
setInterval(homzzang, 2000, "홈짱닷컴", "Homzzang.com");
function homzzang(a, b) {
document.getElementById("demo1").innerHTML += a + " " + b + "<br>";
document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;
}
</script>
결과보기
setInterval() 예제 - 1초마다 서버에서 데이터 가져오기 ★
<script>
setInterval(() => {
$.ajax ({
url: '데이터 보낼 주소'
method: 'GET',
dataType: 'json', // 서버에서 반환할 데이터 형식
success: function(response) { // 데이터 얻기 성공 시
console.log(response);
(예) $(".total_count").text(response.count);
},
error: function(xhr, status, error) { // 데이터 얻기 실패 시
console.error('데이터 가져오기 실패:', error);
}
});
}, 1000); // 1000ms = 1초
</script>
미니님a 님 (241114) https://sir.kr/qa/546996
최신댓글