Jquery 即使在windows上也在进行引导进度条调整大小

我有一个引导进度条，它应该以10%的增量从0%进展到100%。调整窗口大小时，该栏应自动调整。例如，当该条正在前进且其宽度为50%时，如果我调整窗口的大小，则其宽度仍应为50%

但是，我的代码行为不稳定。有时它会停止，我必须调整窗口的大小，以使条形图进展到100%

id为bar的进度条在主体中定义。全文如下:

<!-- JUMBOTRON with Logo and Links -->
    <div class="jumbotron" style="background:url(grass.png);background-size:1000px;background-repeat:repeat-x;padding-top:10px;">
        <div class="row">
            <div class="col-sm-1">
                <img src="logo.gif" width="50px">
            </div>
            <div class="col-sm-11">
                <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-info" role="button">LINK 1</a>
        <a href="#" class="btn btn-info" role="button">LINK 2</a>
        <a href="#" class="btn btn-info" role="button">LINK 3</a>
        <a href="#" class="btn btn-info" role="button">LINK 4</a>
                </div>
            </div>
        </div>
        <p style="color:white;">THIS IS A JUMBOTRON</p>
    </div>
<!-- Main container -->
<div class="container">

    <!-- Progress Bar -->
    <p>PROGRESS</p>
    <div class="progress progress-striped active">
        <div id="bar" class="progress-bar" style="width: 0%;"></div>
    </div>

</div>

<meta charset="utf-8"> 
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CLEAN</title>
        <meta name="description" content="clean-page">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
  var bar = $("#bar");
  var bar_width;
  var width;
  var percentage;
  var newVal;

  var progress = setInterval(function () 
  {
    bar_width = $("#bar").width();
    width = ($(window).width());
    percentage = (Math.round(((bar_width/width)*100)/10)*10);

    if (percentage >= 100) 
    {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#bar").width("100%");
     } 
     else 
     {
       percentage = percentage + 10;
       newVal = percentage + '%';
       $("#bar").width(newVal);
      }

  $("#bar").text(percentage + "%");
  }, 100);
</script>

这是一辆巨型摩托车

进展

我正在使用jquery更改宽度属性。全文如下：

<!-- JUMBOTRON with Logo and Links -->
    <div class="jumbotron" style="background:url(grass.png);background-size:1000px;background-repeat:repeat-x;padding-top:10px;">
        <div class="row">
            <div class="col-sm-1">
                <img src="logo.gif" width="50px">
            </div>
            <div class="col-sm-11">
                <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-info" role="button">LINK 1</a>
        <a href="#" class="btn btn-info" role="button">LINK 2</a>
        <a href="#" class="btn btn-info" role="button">LINK 3</a>
        <a href="#" class="btn btn-info" role="button">LINK 4</a>
                </div>
            </div>
        </div>
        <p style="color:white;">THIS IS A JUMBOTRON</p>
    </div>
<!-- Main container -->
<div class="container">

    <!-- Progress Bar -->
    <p>PROGRESS</p>
    <div class="progress progress-striped active">
        <div id="bar" class="progress-bar" style="width: 0%;"></div>
    </div>

</div>

<meta charset="utf-8"> 
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CLEAN</title>
        <meta name="description" content="clean-page">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
  var bar = $("#bar");
  var bar_width;
  var width;
  var percentage;
  var newVal;

  var progress = setInterval(function () 
  {
    bar_width = $("#bar").width();
    width = ($(window).width());
    percentage = (Math.round(((bar_width/width)*100)/10)*10);

    if (percentage >= 100) 
    {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#bar").width("100%");
     } 
     else 
     {
       percentage = percentage + 10;
       newVal = percentage + '%';
       $("#bar").width(newVal);
      }

  $("#bar").text(percentage + "%");
  }, 100);
</script>

清洁的
var bar=$（“#bar”）；
变压杆宽度；
var宽度；
风险值百分比；
var newVal；
var progress=setInterval（函数（）
{
条形宽度=$（“#条形”）.width（）；
宽度=（$（窗口）.width（））；
百分比=（数学圆整（（条形/宽度）*100）/10）*10）；
如果（百分比>=100）
{
清除间隔（进度）；
$（'.progress'）.removeClass（'active'）；
$（“#bar”）。宽度（“100%”；
} 
其他的
{
百分比=百分比+10；
newVal=百分比+'%'；
$（“#bar”）.宽度（新值）；
}
$（“#bar”）.text（百分比+“%”）；
}, 100);

我只是从HTML、引导、JQUERY开始。提前谢谢你的帮助

试试这段代码

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

当您添加

aria valuenow=“60”

，

aria valuemin=“0”

，

aria valuemax=“100”

时，我认为它应该可以正常工作

---

另外，别忘了添加

role=“progressbar”

你所说的“调整窗口大小时，工具栏应该自动调整”是什么意思？你能在你显示的html中的3个div之前给我们看一下吗？这似乎是个问题。@APAD1：调整窗口大小时，比例应该是remain@AdamBuchananSmith：请查看上面更新的完整网站代码。@flukeperf能否发布与此代码相关的css请

进度