https://hoshino-yumetsuki.github.io/js/countup.js

1window.CountUp = function (target, startVal, endVal, decimals, duration, options) {
2  var self = this
3  self.version = function () {
4    return "1.9.2"
5  }
6  self.options = {
7    useEasing: true,
8    useGrouping: true,
9    separator: ",",
10    decimal: ".",
11    easingFn: easeOutExpo,
12    formattingFn: formatNumber,
13    prefix: "",
14    suffix: "",
15    numerals: []
16  }
17  if (options && typeof options === "object") {
18    for (var key in self.options) {
19      if (options.hasOwnProperty(key) && options[key] !== null) {
20        self.options[key] = options[key]
21      }
22    }
23  }
24  if (self.options.separator === "") {
25    self.options.useGrouping = false
26  } else {
27    self.options.separator = "" + self.options.separator
28  }
29  var lastTime = 0
30  var vendors = ["webkit", "moz", "ms", "o"]
31  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
32    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]
33    window.cancelAnimationFrame =
34      window[vendors[x] + "CancelAnimationFrame"] ||
35      window[vendors[x] + "CancelRequestAnimationFrame"]
36  }
37  if (!window.requestAnimationFrame) {
38    window.requestAnimationFrame = function (callback) {
39      var currTime = new Date().getTime()
40      var timeToCall = Math.max(0, 16 - (currTime - lastTime))
41      var id = window.setTimeout(function () {
42        callback(currTime + timeToCall)
43      }, timeToCall)
44      lastTime = currTime + timeToCall
45      return id
46    }
47  }
48  if (!window.cancelAnimationFrame) {
49    window.cancelAnimationFrame = function (id) {
50      clearTimeout(id)
51    }
52  }
53  function formatNumber(num) {
54    num = num.toFixed(self.decimals)
55    num += ""
56    var x, x1, x2, x3, i, l
57    x = num.split(".")
58    x1 = x[0]
59    x2 = x.length > 1 ? self.options.decimal + x[1] : ""
60    if (self.options.useGrouping) {
61      x3 = ""
62      for (i = 0, l = x1.length; i < l; ++i) {
63        if (i !== 0 && i % 3 === 0) {
64          x3 = self.options.separator + x3
65        }
66        x3 = x1[l - i - 1] + x3
67      }
68      x1 = x3
69    }
70    if (self.options.numerals.length) {
71      x1 = x1.replace(/[0-9]/g, function (w) {
72        return self.options.numerals[+w]
73      })
74      x2 = x2.replace(/[0-9]/g, function (w) {
75        return self.options.numerals[+w]
76      })
77    }
78    return self.options.prefix + x1 + x2 + self.options.suffix
79  }
80  function easeOutExpo(t, b, c, d) {
81    return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
82  }
83  function ensureNumber(n) {

84    return typeof n === "number" && !isNaN(n)
85  }
86  self.initialize = function () {
87    if (self.initialized) {
88      return true
89    }
90    self.error = ""
91    self.d = typeof target === "string" ? document.getElementById(target) : target
92    if (!self.d) {
93      self.error = "[CountUp] target is null or undefined"
94      return false
95    }
96    self.startVal = Number(startVal)
97    self.endVal = Number(endVal)
98    if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
99      self.decimals = Math.max(0, decimals || 0)
100      self.dec = Math.pow(10, self.decimals)
101      self.duration = Number(duration) * 1000 || 2000
102      self.countDown = self.startVal > self.endVal
103      self.frameVal = self.startVal
104      self.initialized = true
105      return true
106    } else {
107      self.error =
108        "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number"
109      return false
110    }
111  }
112  self.printValue = function (value) {
113    var result = self.options.formattingFn(value)
114    if (self.d.tagName === "INPUT") {
115      this.d.value = result
116    } else {
117      if (self.d.tagName === "text" || self.d.tagName === "tspan") {
118        this.d.textContent = result
119      } else {
120        this.d.innerHTML = result
121      }
122    }
123  }
124  self.count = function (timestamp) {
125    if (!self.startTime) {
126      self.startTime = timestamp
127    }
128    self.timestamp = timestamp
129    var progress = timestamp - self.startTime
130    self.remaining = self.duration - progress
131    if (self.options.useEasing) {
132      if (self.countDown) {
133        self.frameVal =
134          self.startVal -
135          self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration)
136      } else {
137        self.frameVal = self.options.easingFn(
138          progress,
139          self.startVal,
140          self.endVal - self.startVal,
141          self.duration
142        )
143      }
144    } else {
145      if (self.countDown) {
146        self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration)
147      } else {
148        self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration)
149      }
150    }
151    if (self.countDown) {
152      self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal
153    } else {
154      self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal
155    }
156    self.frameVal = Math.round(self.frameVal * self.dec) / self.dec
157    self.printValue(self.frameVal)
158    if (progress < self.duration) {
159      self.rAF = requestAnimationFrame(self.count)
160    } else {
161      if (self.callback) {
162        self.callback()
163      }
164    }
165  }
166  self.start = function (callback) {
167    if (!self.initialize()) {
168      return
169    }
170    self.callback = callback
171    self.rAF = requestAnimationFrame(self.count)
172  }
173  self.pauseResume = function () {
174    if (!self.paused) {
175      self.paused = true
176      cancelAnimationFrame(self.rAF)
177    } else {
178      self.paused = false
179      delete self.startTime
180      self.duration = self.remaining
181      self.startVal = self.frameVal
182      requestAnimationFrame(self.count)
183    }
184  }
185  self.reset = function () {
186    self.paused = false
187    delete self.startTime
188    self.initialized = false
189    if (self.initialize()) {
190      cancelAnimationFrame(self.rAF)
191      self.printValue(self.startVal)
192    }
193  }
194  self.update = function (newEndVal) {
195    if (!self.initialize()) {
196      return
197    }
198    newEndVal = Number(newEndVal)
199    if (!ensureNumber(newEndVal)) {
200      self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal
201      return
202    }
203    self.error = ""
204    if (newEndVal === self.frameVal) {
205      return
206    }
207    cancelAnimationFrame(self.rAF)
208    self.paused = false
209    delete self.startTime
210    self.startVal = self.frameVal
211    self.endVal = newEndVal
212    self.countDown = self.startVal > self.endVal
213    self.rAF = requestAnimationFrame(self.count)
214  }
215  if (self.initialize()) {
216    self.printValue(self.startVal)
217  }
218}