滚动计数器加 1

Question

我需要有关脚本的帮助，以便计数器加一并具有递增数字的动画，滑到顶部

就像图片上的那样，这就是我到目前为止所做的。

        .booking-wrapper .countdown-wrapper .countdown-container .order-list {
        border: 5px solid #959595;
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 0;
        overflow: hidden;
        line-height: 1;
        height: 56px;
        margin-top: 8px;
    }
    
    .booking-wrapper .countdown-wrapper .countdown-container .order-list .order-list-item {
        display: inline;
        font-size: 40px;
        font-weight: bold;
        padding: 0 15px;
    }

 <div class="countdown-container">
             <ul id="order-list" class="order-list">
                 <li class="order-list-item"><span>0</span></li>
                 <li class="order-list-item" style="border-left: 1px solid black;"><span>0</span></li>
                 <li class="order-list-item" style="border-left: 1px solid black; border-right: 1px solid black;"><span>8</span></li>
                 <li class="order-list-item"><span>1</span></li>
             </ul>
       </div>

Answer 1

您可能应该为此使用一些现有的库。但如果您想拥有自己的实现，请使用以下元素：

• 使用CSS 过渡，特别是transition属性和transitionend事件。
• 动态构建内部 HTML，以便在原始 HTML 中只有容器元素，该元素最初为空。
• 让最深级别的 HTML（对于一位数字）为 3 行：在每行上放置一个数字。例如8<br>9<br>0。它们应该形成一个序列。将中间的数字滚动到视图中，以便只有该数字可见。根据需要向上或向下执行动画，当动画完成时，更新 HTML 并重置滚动偏移量（可以是topCSS 属性）。
• 不需要有这些span元素。只需将内容直接放入li元素中即可。
• 使用 Promise，这使得异步代码看起来更好，当然在使用时await

所以你可以这样做：

// Utility functions returning promises
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
const animate = (elem, prop, value, duration) => {
    return nextFrame().then(() => new Promise(resolve => {
        elem.style.transition = `${prop} ${duration}ms`;
        elem.style[prop] = `${value}px`;
        const done = () => {
            elem.style.transition = `${prop} 0ms`;
            resolve();
        }
        elem.addEventListener("transitionend", done, {once: true});
    })).then(nextFrame);
};

// DOM element wrapper for the counter functionality
class Counter {
    constructor(element, length = 4, upwards = true) {
        this.element = element;
        this._value = 0;
        this.upwards = !!upwards;
        this.digits = Array.from({length}, () => element.appendChild(document.createElement("li")));
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        const numStr = value.toString().padStart(4, "0").slice(-this.digits.length);
        // Display the current number in the counter element (no animation)
        this.digits.forEach( (digit, i) => {
            // Put three lines, each having a digit, where the middle one is the current one:
            digit.innerHTML = `${(+numStr[i]+(this.upwards ? 9 : 1))%10}<br>${numStr[i]}<br>${(+numStr[i]+(this.upwards ? 1 : 9))%10}`;
            digit.style.top = `${-this.element.clientHeight}px`; // scroll the middle digit into view
        });
    }
    async roll(direction = 1, duration = 500) {
        await nextFrame();
        const numChangingDigits = Math.min(this.digits.length, 
            this.value.toString().length - this.value.toString().search(direction > 0 ? /9*$/ : /0*$/) + 1);
        const numStr = this.value.toString().padStart(4, "0").slice(-numChangingDigits);
        const promises = this.digits.slice(-numChangingDigits).map((digit, i) =>
            animate(digit, "top", (direction > 0) === this.upwards ? -this.element.clientHeight*2 : 0, duration)
        );
        await Promise.all(promises);
        this.value = this.value + direction;
        await nextFrame();
    }
    async rollTo(target, duration = 500, pause = 300) {
        const direction = Math.sign(target - this.value);
        while (this.value !== target) {
            await this.roll(direction, duration);
            await delay(pause);
        }
    }
}

// Demo:
const counter = new Counter(document.getElementById("order-list"), 4, true);
counter.value = 9931;
counter.rollTo(10002, 500, 300);

.order-list {
    border: 5px solid #999;
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    height: 50px;
    line-height: 1;
    display: inline-block;
}

.order-list > li {
    display: inline-block;
    font-size: 50px;
    font-weight: bold;
    padding: 0 15px;
    border-left: 1px solid black;
    position: relative;
    top: 0;
}
.order-list > li:first-child {
    border-left: 0;
}

<ul id="order-list" class="order-list"></ul>

您可以使用一些参数来修改动画的速度。还有一个参数决定拨盘是向上还是向下滚动以获得下一个数字。