HTML 倒計時圈帶 JQuery

Question

我在 HTML 中實現這個倒數計時器時遇到了一些麻煩。 它在大多數情況下都有效，但它似乎在乞討和〜i = 14時發生了變化。 我不太確定是什么原因造成的。 我認為在 svg 嘗試運行之前未設置變量，但我不確定解決此問題的方法。

    <div>
        <div class="item">
            <h2>0</h2>
            <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
            <g>
            <title>Layer 1</title>
            <circle id="circle" class="circle_animation" r="56" cy="60" cx="60" stroke-width="8" stroke="#6fdb6f" fill="none"/>
            </g>
            </svg>
        </div>
        <div class="item">
            <h2>0</h2>
            <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
            <g>
            <title>Layer 1</title>
            <circle id="circle" class="circle_animation" r="56" cy="60" cx="60" stroke-width="8" stroke="#6fdb6f" fill="none"/>
            </g>
            </svg>
        </div>
    </div>
    <script>
        window.$ = window.jQuery = require('jquery');
        setTimeout(function() { 
            var time = 500; /* how long the timer will run (seconds) */
            var initialOffset = '351';
            var i = 1;

            /* Need initial run as interval hasn't yet occured... */
            $('.circle_animation').css('stroke-dashoffset', initialOffset+((i)*(initialOffset/time)));

            var interval = setInterval(function() {
                $('h2').text(time - i);
                if (i === time) {   
                    clearInterval(interval);
                    return;
                }

                $('.circle_animation').css('stroke-dashoffset', initialOffset+((i+1)*(initialOffset/time)));               
                
                i++;  
            }, 1000);
 
        }, 0)
    </script>

/*css*/

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 90px;
    width: 100%;
}

svg {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
    stroke-dasharray: 351;
    /* stroke-width: 5px; */
    /* this value is the pixel circumference of the circle */
    stroke-dashoffset: 351;
    transition: all 1s linear;
}

Answer 1

更改var initialOffset = 351;

您的 initialOffsetValue 是字符串，您正在對其進行除法。 因此將其轉換為 integer 將解決閃爍問題。

密碼筆