JS를 이용한 숫자 애니메이션 카운팅 소스좀 봐주세요.^^
본문
<style type="text/css">
#counter1, #counter2, #counter3 { font-family: arial; font-size: 40px; font-weight: bold; }
</style>
<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.formatNumber(this.count);
if(this.count < this.target_count) {
this.timer = setTimeout(function() { self.counter(); }, 20);
} else {
clearTimeout(this.timer);
}
};
numberCounter.prototype.formatNumber = function(num) {
num+= '';
x = num.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(d+)(d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
};
new numberCounter("counter3", 99999);
new numberCounter("counter2", 1123456);
new numberCounter("counter1", 15);
</script>
<html>
<head>
<title></title>
</head>
<body>
<p id="counter1"></p>
<p id="counter2"></p>
<p id="counter3"></p>
</body>
</html>
위 소스구요 http://jsfiddle.net/rootbox/uL4J3/ 이곳을 참고해서 test.html 파일로 만들어서 테스트하는데
화면에 아무것도 출력이 안되는데 왜그럴까요?^^?
js파일 따로빼고 css부분도 따로빼 해봐도 안나오고. 하나로 다 합쳐해봐도 안나오고.
어디가 잘못됐을까요.ㅠ.ㅠ?
답변 2
스크립트가 먼저 돌아서 해당객체에 접근을 못하는거 같습니다.
window.onload = function(){
new numberCounter("counter3", 99999);
new numberCounter("counter2", 1123456);
new numberCounter("counter1", 15);
}
이런식으로 해보세요..
정말 감사합니다.^^
말씀해주신데로 하니깐 바로 해결되네요.^^
좋네요 ㅎ
답변을 작성하시기 전에 로그인 해주세요.