[英]Making progress bar fill multiple times based on the value of a variable
So I have below a code for an html progress bar which fills up when you hit battle. 因此,在下面的代码中,有一个html进度条,当您上阵时会填满。 I want to be able to assign a value to a variable so that when you hit battle it will fill the progress bar and battle the monster multiple times = to that value.
我希望能够为变量分配一个值,以便当您打仗时它将填充进度条并与怪兽战斗多次=达到该值。
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
});
*Note: this is a duplicate of this question because I asked this two days ago and no one answered. *注意:这是该问题的重复部分,因为我两天前问过这个问题 ,但没有人回答。 So please delete one of these when I get an answer.
因此,当我得到答案时,请删除其中之一。
https://jsfiddle.net/6nrjw0Le/6/ , bar fills 3 times then stops for auto = 3 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>
Keep calling progress(sec)
and just reset sec = 0;
保持通话
progress(sec)
,仅重置sec = 0;
when you reach the end: Increment an other var, and stop the loop when it reach your auto. 当到达终点时:增加另一个变量,并在到达自动变量时停止循环。 You can instead decrements auto if you don't use it anywhere else (auto--).
如果不在其他任何地方不使用它,则可以将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.