Question

我有一个倒计时器我正在尝试使用倒计时的css圈进行视觉显示。但是我无法弄清楚如何一次取走一个圆圈。我的代码重复了每个循环的圈数。我知道为什么，但我现在可以做些什么来让它每次拿走一个？

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：

    var Name=new Array();
    var Date=new Array();
    var Plans=new Array();

    function insert(){
        var NameValue = document.getElementById('Name').value;
        var DateValue = document.getElementById('Date').value;
        var PlansValue = document.getElementById('Plans').value;
        Name[Name.length]=NameValue;
        Date[Date.length]=DateValue;
        Plans[Plans.length]=PlansValue;
      }

    function show() {
      var content="<b>Your Plans For the Day:</b><br>";
      var Namelabel ="<p>Name</p>"
      for(var i = 0; i < Name.length; i++) {
         + Namelabel;
         content +=Name[i]+"<br>";
      }
      for(var i = 0; i < Date.length; i++) {
         content +=Date[i]+"<br>";
      }
      for(var i = 0; i < Plans.length; i++) {
         content +=Plans[i]+"<br>";
      }
      document.getElementById('display').innerHTML = content;
    }

使用css圈子进行JavaScript倒计时

1 个答案: