根據變量的值多次填充進度條

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
});

*注意：這是該問題的重復部分，因為我兩天前問過這個問題 ，但沒有人回答。 因此，當我得到答案時，請刪除其中之一。

Answer 1

https://jsfiddle.net/6nrjw0Le/6/ ，條形填充3次，然后自動停止= 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> 

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>