자바스크립트 카운터되는 소스에 setTimeout 적용하고 싶은데요 ㅠㅠ
관련링크
본문
<script type="text/javascript">
function numberCounter(target_frame, target_number) {
this.count = 0; this.diff = 0;
this.target_count = parseInt(target_number);
this.target_frame = document.getElementById(target_frame);
this.timer = null;
this.counter();
};
numberCounter.prototype.counter = function() {
var self = this;
this.diff = this.target_count - this.count;
if(this.diff > 0) {
self.count += Math.ceil(this.diff / 5);
}
this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if(this.count < this.target_count) {
this.timer = setTimeout(function() { self.counter(); }, 100);
} else {
clearTimeout(this.timer);
}
};
new numberCounter("counter4", 1270);
new numberCounter("counter3", 483);
new numberCounter("counter2", 167300);
new numberCounter("counter1", 4235);
</script>
이런 소스를 구했는데 이 소스가 거의 페이지 하단에들어가서 스크롤 내리는동안
카운트가 끝나버리길래 몇초뒤 자동실행을 시키고싶은데 그렇게 하려면
setTimeout 을 넣으라고 하는데 어떻게 해야할 지 모르겠네요 ㅠㅠ
첨부한 소스안에 보면 이미 setTimeout 가 있기는한데 거기에있는 숫자를 조절하면
몇초뒤실행이아니라 몇초 마다 숫자들이 올라가는거로 보여요 ....
능력자분 계시면 부탁드리겠습니다 !
답변 2
setTimeout(function() {
new numberCounter("counter4", 1270);
new numberCounter("counter3", 483);
new numberCounter("counter2", 167300);
new numberCounter("counter1", 4235);
}, 2000);
단순히 n초 후에 실행하기를 원하시면 26 ~ 29번째 줄을 전부 감싸면 돼요.
작동되네요!
이게 이렇게 쉬운거였다니................................................제가 너무 부끄러워지네요 ㅠㅠㅠ
정말 감사합니다!
몇초뒤에 실행되는게 아니고
화면이 거기까지 내려왔을때 실행되게 해야 합니다.
제가 만든 사이트 인데요
http://crowncrown.co.kr/shop/item.php?it_id=1466750007
화면 아래로 내려보시면 그때사 시작되는걸 아실수가 있을 겁니다.
div의 위치도 중요하고 소스의 위치도 중요합니다.
참고해보시면 좋을 듯 합니다.
요녀석이 제대로 될지는 모르겠지만 .......... 다운받아서 적용 해보세요
답변감사드려요!ㅎㅎ 근데 이게 그위치가기전에 미리 시작이 되어서 그 위치 갈때쯤에는 어느정도 실행이 되고있어야 하는 거여서요ㅠㅠ
답변해주신 내용은 나중에 한번 써먹어볼게요! 정말 감사합니다~
아~ 해당 위치에 왔을때 시작하는게 아니고 근처에 가면 시작되는거요
그렇다면 div값을 위쪽으로 올리면 되지 않나 싶은데요