0

最初に注意しておきたいのは、私の英語はあまり上手ではありません...

OK、ここに私の問題があります。パーセンテージに基づいて毎秒広くなる進行状況バーがあります。

毎秒、1.67 / [max]パーセントを追加したい。[最大] = 100% (何分かかるか)。(if [max] = 10- プログレスバーは 10 分かかります)

私のコードは機能しますが、(除算後の) 数値が (そのようなもの) より大きい場合のみです0.3。

したがって、プログレス バーが 1 分 ( [max] = 1) かかる場合、コードは機能することを意味します。数値は1.67除算後の数値だからです。しかし、最大を 15 分にするとうまくいきません。

これが私のコードです:(簡単にするためにいくつかのコメントを追加しました)

<script>
function updateProgress() {
  /*Get Progress Width (in percents)*/ var progress = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
  var corrent = progress;
  var max = 1; // one minute
  var add = 1.67 / max;

  if (progress < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 1000); // update every second
  }
}
updateProgress();
</script>

助けてください ！

4

2 に答える 2

2

問題は、CSSでパーセンテージが変化するのに十分な幅を拡大していないため、一定のままであるということです（少なくとも、そのように見えます）。問題は、あなたは本当にそれをすべて必要としないということです。

これがあなたのコードのjsフィドルで、動作するように変更されています。時間遅延を変更して実行速度を上げました。必要に応じて、1000msに戻すことができます。

そしてコード：

HTML：

<div style="width:400px; background-color:black">
<div id="arena_bar" style="background-color:navy; width:10px">&nbsp;</div>
</div>

JS：

  /*Get Progress Width (in percents)*/ var corrent = ( 100 * parseFloat($('#arena_bar').css('width')) / parseFloat($('#arena_bar').parent().css('width')) );
function updateProgress() {
  var max = 15; // one minute
  var add = 1.67 / max;
  if (corrent < 100) {
      corrent += add;
      $("#arena_bar").css("width", corrent + "%");
      setTimeout(updateProgress, 50); // update every second
  }
}
updateProgress();
于 2013-02-27T20:20:58.483 に答える
1

記録として、jQueryは計算された幅を実際のパーセンテージ値として設定するのではなく、ピクセル値を使用して設定します。

この例では、書き込まれた幅と読み取られた幅を確認できます。

function updateProgress() {
    var progress = (parseInt($('#arena_bar').css('width')) / parseInt($('#arena_bar').parent().css('width')))*100;
    $('.progress').text('Read: ' + progress + ' %');

    var max = 1;
    var add = 1.67 / max;

    if (progress < 100) {
       progress += add;
       $('.debug').html('Written: ' + progress + ' %');
       $("#arena_bar").css("width", progress + "%");
       setTimeout(updateProgress, 1000); // update every second
    }
}
updateProgress();

http://jsfiddle.net/9PjqZ/1/

ご覧のとおり、次の関数呼び出しで値を読み取るときに値に違いがあります。書き込まれた値と読み取られた値の差が不明な制限を超えていても問題はありません。それらが互いに近づきすぎると、あなたのアイデアは機能しなくなります。

現在のパーセンテージをcssの外に保存し、cssに書き込むだけで、cssから読み取る必要はありません。

于 2013-02-27T20:21:28.490 に答える