3

私は .php/Java を使い始めたばかりですが、ユーザーが設定した時間に従ってブートストラップ プログレス バーをインクリメントする方法を誰かに教えてもらえますか?

プログレスバー：

コード：

<div class="progress progress-striped active">

<div id="progressbar" class="bar" style="width: 0%;"></div>

ユーザー入力の例: コード:

秒を設定: 

<input type="text" id="speed" value="10" /> 

<input type="submit" value="Start" onclick="doProgress();" />

Java Script {必要}:

コード：

 <script type="text/javascript">
 function doProgress()

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") プログレス バーの値は 100% が最大です。

私が提供したこの要素を使用して、ユーザーが秒単位で設定した値に従って値を増やしたい:

<input type="text" id="speed" value="10" />

例: ユーザーが 30 と入力した場合 プログレス バーが 100% に達するまでに 30 秒かかるようにしたい

4

4 に答える 4

3

このようなもの（テストされていません）：

function doIncrement(increment) {
  w = parseInt(document.getElementById('progressBar').style.width);
  document.getElementById('progressBar').style.width= (w + increment) +'%';
}

var w
var speed = document.getElementById('speed').value;
var increment = (speed/100);
for(var x = 0; x<speed; x++)
{
  setTimeout(doIncrement(increment),1000);
}
于 2012-08-31T15:55:08.063 に答える
2

このsetTimeoutアプローチ（他の回答による）は、時間ベースの進行状況をアニメーション化するための最も一般的なアプローチです。

しかしsetTimeout、速度が速い場合や、バーを 100% から 0% にリセットしたい場合に問題がありました。これは、デフォルトの Bootstrap css トランジションが望ましくないアニメーション効果につながるためです (つまり、0% に戻るのに 0.6 秒かかります)。 . したがって、トランジションのスタイルを微調整して、目的のアニメーション効果に一致させることをお勧めします。

pb = $('[role="progressbar"]')
// immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
// now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
  setTimeout(function() {
    pb.attr('aria-valuenow', counter);
    pb.css('width', counter + '%');
    pb.text(counter + '%');
    if(counter<100) {
      counter++;
      update_progress();
    }
  }, 5 * 1000 / 100); // 5 seconds for 100 steps
};
update_progress();

しかし、あなたがjQueryキャンプにいるなら、jQuery.animateは、cssトランジションのスタイリングやステップのカウントなどをいじる必要を忘れることができるので、よりきちんとしたアプローチだと思います.

pb = $('[role="progressbar"]')
pb.css('transition', 'none'); // if not already done in your css
pb.animate({
  width: "100%"
}, {
  duration: 5 * 1000, // 5 seconds
  easing: 'linear',
  step: function( now, fx ) {
    var current_percent = Math.round(now);
    pb.attr('aria-valuenow', current_percent);
    pb.text(current_percent+ '%');
  },
  complete: function() {
    // do something when the animation is complete if you want
  }
});

デモとその他のディスカッションを GitHub here に掲載しました。

于 2016-04-28T14:09:06.140 に答える
1

私は自分でブートストラップを学んでいて、それを進めるためにこれを思いつきました。他の回答で述べたように、幅 CSS プロパティはアニメーションをトリガーするもののように見えますが、最初はそれに気付かず、関連する aria 属性を設定しました。幅を設定すると、a11y が重要な場合は他の関連属性が適切に更新され、そうでない場合は必要に応じて設定する必要があります。

$( function() {
  var bar = $('div.progress-bar');
  var val = null;

  i1 = setInterval(function() {
    val = parseInt(bar.attr('aria-valuenow'));
    val += 10;
    console.log(val);
    if( val < 101) {
      bar.attr('aria-valuenow', val);
      bar.css('width', val + '%');
    } else {
      clearInterval(i1);
    }
  }, 1000);

});
于 2014-12-29T06:49:23.430 に答える
0

これを試して：

//Find the div you want to update
var divArray = document.getElementById('progressbar');

//Set the width style
divArray.style.width = '100%';
于 2012-08-31T15:48:02.327 に答える