CSS圈子的JavaScript倒計時

Question

我有一個倒數，我試圖用css圈的倒數的視覺顯示。 但是我不知道該怎么做才能一次帶走一個圓圈。 我的代碼重復了每個循環的圈數。 我知道為什么，但是現在我該怎么做才能使它每次都消失呢？

JS小提琴： http ： //jsfiddle.net/L0o9jmw9/

JS：

        var sec = 5
        function setClock() {
            var totalSec =  sec--;
            var s = parseInt(totalSec % 60, 10);
            var result = s + " seconds to go!";
            document.getElementById('timeRemaining').innerHTML = result;
            if(totalSec === 0){
                document.getElementById('timeRemaining').innerHTML = 'time out';
            }else{
                for(var i = 0; i < s; i++){
                    //console.log(i);
                    $('.cont-s').prepend('<div class="cir-s"></div>');
                }
                setTimeout(setClock, 1000);
            }
        }
        setClock();

HTML：

<div id="timeRemaining"></div>
<div class="cont-s"></div>

CSS：

.cir-s{
    width: 20px;
    height: 20px;
    background: #802A2A;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    float:left;
}

Answer 1

只需在每次迭代前清空HTML：

function setClock() {
    $('.cont-s').empty(); // empty the circles div

    var totalSec =  sec--;
    var s = parseInt(totalSec % 60, 10);
    var result = s + " seconds to go!";

    document.getElementById('timeRemaining').innerHTML = result;

    if(totalSec === 0){
        document.getElementById('timeRemaining').innerHTML = 'time out';
    } else {
        for(var i = 0; i < s; i++){
            $('.cont-s').prepend('<div class="cir-s"></div>');
        }
        setTimeout(setClock, 1000);
    }
}