https://wiznet.io/static/js/countdown.js?241022

1class Countdown {
2    constructor(element, options) {
3        this._value = 0;
4        this.FPS = 24;
5        this.options = {
6            duration: 1000,
7            delay: 0
8        };
9        this.element = element;
10        this.value = Number(element.getAttribute("data-value"));
11        if (options) {
12            this.options = Object.assign(Object.assign({}, this.options), options);
13        }
14        this.frameTime = 1000 / this.FPS;
15        this.step = this.value / this.FPS;
16        console.log(`value is ${this.value} and step is ${this.step}`);
17        this.initElement();
18        setTimeout(this.frame.bind(this), this.frameTime);
19    }
20    initElement() {
21        this.valueView = document.createElement("span");
22        this.valueView.classList.add("value");
23        this.element.appendChild(this.valueView);
24        if (this.element.getAttribute("data-unit")) {
25            const unitView = document.createElement("span");
26            unitView.classList.add("unit");
27            unitView.innerText = this.element.getAttribute("data-unit");
28            this.element.appendChild(unitView);
29        }
30    }
31    frame() {
32        const nextValue = this._value + this.step;

33        if (nextValue > this.value) {
34            this._value = this.value;
35        }
36        else {
37            this._value = nextValue;
38            setTimeout(this.frame.bind(this), this.frameTime);
39        }
40        this.renderValue();
41    }
42    renderValue() {
43        if (this.value < 5) {
44            this.valueView.innerText = (Math.floor(this._value * 10) / 10).toString();
45        }
46        else {
47            this.valueView.innerText = Math.floor(this._value).toString();
48        }
49    }
50}