I'm working a simple countdown that when it reach zero, it will generate 5 random numbers and add it to array one by one, and displayed also the list of results.
My problem is, it display additional result every countdown.
How can I remove that?
I tried to remove the code for the progressbar and it looks like the reason, but don't know where to transfer that.
thanks, hope you help me.
let time = 10;
let progress = 0; let counter = 0
var clock = $('.my-clock').FlipClock(time, {
countdown: true,
count: 1,
callbacks: {
stop: function() {
setTimeout(function(){
clock.setTime(time); // proceeding time
clock.start();
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);
}
},1000);
},
interval: function() {
counter && (progress+=100/time);
counter ++;
$('.progressBar .progress').width(progress+ '%');
if(progress >= 100) {
progress = 0; counter = 0;
this.stop()
}
}
}
});.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>
