JavaScript 倒计时 css 个圆圈

Question

我有一个倒计时我正在尝试用 css 倒计时圆圈进行视觉显示。但我不知道该怎么做才能一次带走一个圆圈。我的代码重复了每个循环的圆圈数。我知道为什么，但我现在该怎么做才能让它每次都带走一个？

JS Fiddle: 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);
    }
}

JavaScript 倒计时 css 个圆圈

JavaScript countdown with css circles

html

javascript

css

countdown