Question

我想显示一个每1秒递增一次的进度条并更新进度条。

控制台显示计数器，但进度条没有增加其大小。我的意思是它始终是一个静态进度条。

＆＃13;

$(function($) {

  $(document).ready(function() {
    var counter = 0;
    setInterval(function() {
      counter = counter + 1;
      console.log('Counter: ' + counter); // It works.
      $("#progress").css('width', counter + '%'); // It doesn't work.          
    }, 1000);

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="progress">
  <div id="progress" class="progress-bar"></div>
</div>

＆＃13;

Answer 1

您可以尝试使用像素，并使用＆＃34;来引用您的进度元素。＆＃34;因为是一个班级..

＆＃13;

$(function($) {

    $(document).ready(function() {
        var now = new Date().getTime();
        console.log(now);
        var counter =0;
        setInterval(function() {
            counter++;
            console.log('Counter: ' + counter); // It works.
            $(".progress").css('width', counter + 'px'); // It doesn't work.          
        }, 1000);

    });
});

＆＃13;

.progress{
height:10px;
background:red;
width:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div id="barra" class="progress-bar"></div>
</div>

＆＃13;

请注意，此处有一个html进度标记 https://www.w3schools.com/tags/tag_progress.asp

Answer 2

我不确定日期在哪里发挥，但是你的代码不起作用，因为你将计数器设置为超过1000％的宽度。以下只是将您的代码显示为一个简单的进度条，每秒增加1％。

我已经添加了关于我更改内容的评论

$(function($) { // this is the same as document ready so you don't need both

  //  $(document).ready(function() {
  // var now = new Date($("#now").text()).getTime();  -- not sure what this is for

  var counter = 0; // make counter global
  setInterval(function() {
    $("#barra").css('width', counter + '%'); // you want to change the width of the inner bar
    counter++; // increment counter
  }, 1000);

  //  });
});

#barra {
  height: 10px;
  background: blue;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div id="barra" class="progress-bar"></div>
</div>

一旦达到100

，您可能还想添加clearInterval

Answer 3

你需要确保包装元素有一个高度，但我不确定你为什么要尝试使用getTime（）调用的实际时间。

我强烈建议您使用html5进度元素，但以下是使用您的方法的示例。 →

<div class="progress">
<div id="barra" class="progress-bar"></div>

CSS

.progress {
  width: 100%;
  height: 2rem;
  background: #CCC;
}
.progress .progress-bar {
  background: #27ae60;
  height: 100%;
  width: 0;
}

JS

 $(function($) {

        var now = new Date().getTime();
        console.log(now);
        var counter = 0;
        setInterval(function() {
            counter++;
            now + 1000;
            console.log('Counter: ' + now); // It works.
            $(".progress-bar").css('width', counter + '%'); // It doesn't work.          
        }, 1000);

});

笔： https://codepen.io/NeilWkz/pen/ooBwoy

进度条不会使用jQuery增加其大小

3 个答案: