JS를 이용한 숫자 애니메이션 카운팅 소스좀 봐주세요.^^
Copy
<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개
답변을 작성하려면 로그인이 필요합니다.
로그인
말씀해주신데로 하니깐 바로 해결되네요.^^