javascript - 根据变量的值多次填充进度条

Question

JSFiddle

所以我在下面有一个 html 进度条的代码，当你进入战斗时它会填满。我希望能够为变量分配一个值，以便当您进行战斗时，它将填充进度条并多次与怪物战斗=该值。

var auto = 3;

var progress = function(sec){
        var interval = 1000;//milliseconds
        setTimeout(function(){
        sec = sec+25;
            $('#bar').val(sec);
            if(sec <= 100)
                progress(sec);//call self with new value
      else if(sec > 100)
        $('#bar').val(0);
        },interval)
}

$('#battle').click(function() {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage");
    progress(0);//initialize progress bar
});

*注意:这是 this question 的重复项因为我前两天问过这个问题，没有人回答。因此，当我得到答案时，请删除其中之一。

Answer 1

https://jsfiddle.net/6nrjw0Le/6/ ，条填充 3 次然后停止为 auto = 3

var auto = 3;
var times = 0;
var progress = function(sec){
		var interval = 1000;//milliseconds
		setTimeout(function(){
	    sec = sec+25;
			$('#bar').val(sec);
			if(sec <= 100){
				progress(sec);//call self with new value
      } else if(sec > 100){
      	if(times===auto-1){
        	$('#bar').val(0);
          times = 0;
        } else {
          $('#bar').val(0);
          times++;
          progress(0);
        }        
      }      
		},interval)
}

$('#battle').click(function() {

	$('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").delay(4500).fadeOut(400);
	progress(0);//initialize progress bar
 
  
});

body {
  background-color: #000;
}

progress {
   appearance: none;
   -webkit-appearance: none;
   width: 100%;
}

progress[value]::-webkit-progress-bar {
  background-color: #000;
  border: 1px solid #81ff14;
  border-radius: 5%;
}

progress[value]::-webkit-progress-value {
  color: #81ff14;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  margin-left: 100px;
  margin-top: 15px;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  border-radius: 10%;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}

#dam {
  color: #81ff14;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 60%;
  text-align: center;
  float: right;
  margin-top: 40px;
}

<progress max="100" value="0" id="bar"></progress>

<select id="monsters">
  <option>Fly</option>
  <option>Mouse</option>
  <option>Rat</option>
  <option>Rabbid Rabbit</option>
  <option>Baby Ent</option>
  <option>Murloc</option>
  <option>Ent</option>
</select>

<button type="button" id="battle">Battle!</button>

<p id="dam">

</p>