即使在 Windows 调整大小时也能进行引导进度条答案

【问题标题】：Progressing bootstrap progress-bar even on windows resize即使在 Windows 调整大小时也能进行引导进度条
【发布时间】：2015-06-23 15:27:44
【问题描述】：

我有引导进度条，应该使用 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>

我正在使用 jquery 更改宽度属性。完整部分如下：

<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>

我刚开始使用 HTML、BOOTSTRAP、JQUERY。我在这里先向您的帮助表示感谢。

【问题讨论】：

“调整窗口大小时栏应自动调整”是什么意思？
你能告诉我们你的 html 中的 3 个 div 在你显示的那个之前，这似乎是一个问题。
@APAD1：调整窗口大小时，应该保持比例
@AdamBuchananSmith：请查看上面更新的完整网站代码。
@flukeperf 能否发布与此代码相关的 css 请<div class="container">  <p>PROGRESS</p> <div class="progress progress-striped active"> <div id="bar" class="progress-bar" style="width: 0%;"></div> </div> </div>

标签： jquery html twitter-bootstrap-3

【解决方案1】：

试试这个代码

<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"

【讨论】：