倒数后显示2套随机数

Question

我正在做一个简单的倒计时，当它达到零时显示随机数。该代码运行良好，只是我希望它在第一个随机数之后生成另一组随机数，然后重置倒计时。

生成数字的持续时间为5秒，因为它将是2套，我将其调整为10秒。

希望你能理解我。

谢谢。

let time = 10;
let progress = 0, counter = 0, duration = 5000, shuffle = 2
var clock = $('.my-clock').FlipClock(time, {
  countdown: true,
  count: 1,
  callbacks: {
    stop: function() {
      
      setTimeout(function(){
        clock.setTime(time); // proceeding time
        clock.start();
      },shuffle * duration);
        
        for (let i = 0; i < 5; i++) {
            
            
            var arrResult = [];

            setTimeout(function(){
            var r = Math.floor(Math.random() * 11) + 1;    
            arrResult.push(r);
              
              
                setTimeout(function(){
                    $('.numResult div:nth-child('+ (i+1) +')').html(arrResult[i]);
                },200);
              
              if(arrResult.length === 5){
                $('.results ul').append('<li>'+ arrResult +'</li>');
              }
                
            
        },500 * i);
            
        }
    },
    interval: function() {
      counter && (progress+=100/time);
      counter ++;
      $('.progressBar .progress').width(progress+ '%');
      if(progress == 100) {
        progress = 0; counter = 1;
      }
      
    }
  }
});

.my-clock {
  text-align:center;
  width:auto;
  display: inline-block;
}
.center {
  text-align:center;
  
}
.progressBar{
  margin: 0 auto;
  width: 400px;
  height: 6px;
  border-radius: 3px;
  background-color: #222;
}
.progress{
  background-color: green;
  height: 100%;
  width: 100%;
}
.numResult div{
  display: inline-block;
}
.results{
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.results ul{
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="center">
  <div class="my-clock"></div>
  <div class="progressBar">
    <div class="progress"></div>
  </div>
  <div class="numResult">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="results">
    <ul>
  </ul>
  </div>
</div>

Answer 1

这是一种解决方案，您也可以在进行一些编辑的情况下两次调用函数。

let time = 10;
let progress = 0,
  counter = 0,
  duration = 5000,
  shuffle = 2
var clock = $('.my-clock').FlipClock(time, {
  countdown: true,
  count: 1,
  callbacks: {
    stop: function() {

      setTimeout(function() {
        clock.setTime(time); // proceeding time
        clock.start();
      }, shuffle * duration);

      for (let i = 0; i < 5; i++) {
        var arrResult = [];
        var arrResult2 = [];

        setTimeout(function() {
          arrResult.push(Math.floor(Math.random() * 11) + 1);

          setTimeout(function() {
            $('.numResult#r1 div:nth-child(' + (i + 1) + ')').html(arrResult[i]);
          }, 200);

          if (arrResult.length === 5) {
            $('.results #u1').append('<li>' + arrResult + '</li>');
          }


        }, 500 * i);

        setTimeout(function() {
          arrResult2.push(Math.floor(Math.random() * 11) + 1);

          setTimeout(function() {
            $('.numResult#r2 div:nth-child(' + (i + 1) + ')').html(arrResult2[i]);
          }, 200);

          if (arrResult2.length === 5) {
            $('.results #u2').append('<li>' + arrResult2 + '</li>');
          }


        }, 500 * i+2500);

}
    },
    interval: function() {
      counter && (progress += 100 / time);
      counter++;
      $('.progressBar .progress').width(progress + '%');
      if (progress == 100) {
        progress = 0;
        counter = 1;
      }

    }
  }
});

.my-clock {
  text-align: center;
  width: auto;
  display: inline-block;
}

.center {
  text-align: center;
}

.progressBar {
  margin: 0 auto;
  width: 400px;
  height: 6px;
  border-radius: 3px;
  background-color: #222;
}

.progress {
  background-color: green;
  height: 100%;
  width: 100%;
}

.numResult div {
  display: inline-block;
}

.results {
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.results ul {
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="center">
  <div class="my-clock"></div>
  <div class="progressBar">
    <div class="progress"></div>
  </div>
  <div class="numResult" id='r1'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="numResult" id='r2'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="results">
    <ul id='u1'></ul>
    <ul id='u2'></ul>
  </div>
</div>