JS를 이용한 숫자 애니메이션 카운팅 소스좀 봐주세요.^^
</p><p><style type="text/css">
#counter1, #counter2, #counter3 { font-family: arial; font-size: 40px; font-weight: bold; }
</style></p><p>
<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></p><p><html>
<head>
<title></title>
</head>
<body>
<p id="counter1"></p>
<p id="counter2"></p>
<p id="counter3"></p>
</body>
</html></p><p>
위 소스구요 http://jsfiddle.net/rootbox/uL4J3/">http://jsfiddle.net/rootbox/uL4J3/ 이곳을 참고해서 test.html 파일로 만들어서 테스트하는데
화면에 아무것도 출력이 안되는데 왜그럴까요?^^?
js파일 따로빼고 css부분도 따로빼 해봐도 안나오고. 하나로 다 합쳐해봐도 안나오고.
어디가 잘못됐을까요.ㅠ.ㅠ?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
말씀해주신데로 하니깐 바로 해결되네요.^^