jQuery Time如何制作进度条

Question

<script type="text/javascript"> 
    var count = 0;
    var timer = $.timer(
        function() {
            count++;
            $('.count').html(count);
        },
        1000,
        true
    );  
</script>

How can i make a progressbar with timer ? 如何使用计时器制作进度栏？ Example every second add to div with 示例每秒添加到div

    <div style="background:#000;width:$.timer%;"><< here</div>

Answer 1

you can use jQuery UI plugin. 您可以使用jQuery UI插件。 ( with timer ) （带计时器）

https://jqueryui.com/progressbar/ https://jqueryui.com/progressbar/

<script>
  var v = 0;
  var upProgress = function() {
    v++;
    $( "#progressbar" ).progressbar({
        value: v
    });
    setTimeout( upProgress , 1000 ); 
 };

 $(function() {
  setTimeout( upProgress , 1000 );   
 });

</script>
</head>

<body> 
  <div id="progressbar"></div>
</body>

</html>

Answer 2

PS. PS。 Try exploring the new progress element ;) 尝试探索新的进度元素;）

 $("progress").animate({v:1}, { duration: 5000, step: function(v){ this.value = v } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress min="0" max="1">

Answer 3

If you don't want to use jQuery: 如果您不想使用jQuery：

HTML HTML

<div id="progressbar">0%</div>

CSS CSS

#progressbar {
    width: 0px;
    background-color: blue;
    color: white;
    padding: 5px;
}

JS JS

function progressBar() {
  var progress = 1, timer, percent;
  var bar = document.getElementById('progressbar');
  var loop = function loop (progress) {
    if (progress === 11) {
      clearTimeout(timer);
    } else {
      percent = progress * 10;
      bar.style.width = percent + 'px';
      bar.textContent = percent + '%';
      timer = setTimeout(loop, 1000, ++progress);
    }
  }
  loop(progress);
}

progressBar();

DEMO DEMO

jQuery Time如何制作进度条

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-11-28 14:39:00

解决方案2
0 2015-11-28 14:42:33

解决方案3
0 2015-11-28 15:09:45

jQuery Time如何制作进度条

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-11-28 14:39:00

解决方案2 0 2015-11-28 14:42:33

解决方案3 0 2015-11-28 15:09:45

解决方案1
1 已采纳 2015-11-28 14:39:00

解决方案2
0 2015-11-28 14:42:33

解决方案3
0 2015-11-28 15:09:45