Question

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

如何使用计时器制作进度条？每秒使用

添加到div的示例

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

Answer 1

你可以使用jQuery UI插件。（带计时器）

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。尝试探索新的进度元素;）

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

如果您不想使用jQuery：

HTML

protected void ParentSelect_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.Header) 
    { 
        e.Row.Cells[2].Text = "URL"; 
    } 
}

CSS

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

JS

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

DEMO

Jquery时间如何制作进度条

3 个答案: