지난번에 프로젝트의 수 증가를 달성하고 0에서 목표 수로 성장하는 효과가 발생했습니다. 효과 다이어그램을 살펴 보겠습니다
이제 다른 효과를 달성하기 위해 확장하십시오
주요 아이디어는 두 부분입니다
1. 세 숫자를 추가하고
2. 움직이십시오
과정을 완료하기 위해 정기적으로 사용하는 것이 매우 편리합니다.
this.fomatnum = function (num) {var str = num.tofixed (this.option.decimal); // 정확히 몇 개의 소수점이 var1, x1, x2, reg; arr = str.split ( "."); x1 = arr [0]; x2 = arr.length> 1? '.' + ARR [1] : ""; reg =/(/d+) (/d {3})/; if (this.option.isfomat) {while (reg.test (x1)) {x1 = x1.replace (reg, '$ 1' + "," + "$ 2"); }} if (this.option.isfomat) {return this.option.prefix + x1 + x2; } else {return this.Option.prefix + str; }} 결합 된 효과를 달성하려면 requestAnimationFrame 방법을 사용한 다음 호환성을 처리 할 수 있습니다.
var change = function () {var p = math.min (1.0, (new date (). gettime () - that.startTime)/that.option.duration); // 현재 시간이 차감 된 다음 총 시간, 수학 및 두 숫자로 나뉘 었습니다. var nums = that.num * p; that.elm.innerhtml = that.fomatnum (that.num * p); if (p <1.0) {// requestAnimationFrame (function () {change ();}); } else {cancelAnimationFrame (Change); }} requestAnimationFrame (function () {change ();});시각적 영역에서 움직이는 숫자의 효과를 달성하려면 DOM이 시각 영역에 있는지 듣고 호출 할 수 있습니다.
위는이 기사의 전체 내용입니다. 궁금한 점이 있으면 메시지를 남겨 두십시오. Wulin.com을 지원 해주셔서 감사합니다.