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

时间：2016-03-07 18:19:13

标签： javascript jquery

rails server bin/rails:6: warning: already initialized constant APP_PATH error

所以我有一个html进度条的代码，当你进入战斗时它会填满。我希望能够为变量赋值，这样当你进入战斗时它将填充进度条并多次与怪物战斗=到该值。

/my-home-directory/my-ruby-on-rails-project/.bundle/gems/nokogiri-1.6.7.2/lib/nokogiri.rb:29:in `require': libruby.so.2.2: cannot open shared object file: No such file or directory - /my-home-directory/my-ruby-on-rails-project/.bundle/gems/nokogiri-1.6.7.2/lib/nokogiri/nokogiri.so (LoadError)
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/nokogiri-1.6.7.2/lib/nokogiri.rb:29:in `rescue in <top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/nokogiri-1.6.7.2/lib/nokogiri.rb:25:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/fog-1.23.0/lib/fog/xml.rb:1:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/fog-1.23.0/lib/fog/xml.rb:1:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/fog-1.23.0/lib/fog.rb:11:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/fog-1.23.0/lib/fog.rb:11:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave/storage/fog.rb:3:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave/storage/fog.rb:3:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave/storage.rb:9:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave/storage.rb:9:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave.rb:78:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/carrierwave-0.10.0/lib/carrierwave.rb:78:in `<top (required)>'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:77:in `require'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:77:in `block (2 levels) in require'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:72:in `each'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:72:in `block in require'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:61:in `each'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:61:in `require'
from /my-home-directory/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler.rb:99:in `require'
from /my-home-directory/my-ruby-on-rails-project/config/application.rb:7:in `<top (required)>'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:78:in `require'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:78:in `block in server'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:75:in `tap'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:75:in `server'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:39:in `run_command!'
from /my-home-directory/my-ruby-on-rails-project/.bundle/gems/railties-4.2.4/lib/rails/commands.rb:17:in `<top (required)>'
from bin/rails:8:in `require'
from bin/rails:8:in `<main>'

*注意：这是JSFiddle的副本，因为我两天前问了这个，没有人回答。所以，当我得到答案时，请删除其中一个。

2 个答案:

答案 0 :(得分：1)

https://jsfiddle.net/6nrjw0Le/6/，bar填充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>

答案 1 :(得分：1)

继续致电progress(sec)并在结束时重置sec = 0;： 增加一个其他var，并在它到达你的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>

相关问题
最新问题