製作進度條填充基於可變

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次，然後停止自動= 3

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

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

 
\t $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").delay(4500).fadeOut(400); 
 
\t 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>

Answer 2

保持通話progress(sec)，只是重置sec = 0;當你到達終點： 增量的其他變種，並停止當它到達你的自動循環。如果您不在其他任何地方使用它（auto--），您可以減少auto。

var auto = 3; 
 
var nb = 0; 
 

 
var progress = function(sec) { 
 
    var interval = 1000; //milliseconds 
 
    setTimeout(function() { 
 
    sec = sec + 25; 
 
    $('#bar').val(sec); 
 
    if (sec > 100) { 
 
     $('#bar').val(0); 
 
     sec = 0; 
 
     nb++; 
 
    } 
 
    if (nb < auto) progress(sec); //call self with new value 
 
    }, 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>