Question

我想在自动刷新脚本上添加一些进度条。

这里是剧本：

  function update() {
  $("#warning").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'result.php',
    timeout: 3000,
    success: function(data) {
      $("#div_result").html(data);
      $("#warning").html(''); 
      window.setTimeout(update, 20000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#warning").html('Timeout contacting server..');
      window.setTimeout(update, 20000);
    }
});
}

$(document).ready(function() {
    update();
});

在＆＃34;暂停＆＃34; （20秒）我想显示一个进度条。你有什么想法吗？

Answer 1

在update（）;

之前放置函数progressStatrt（20）

http://jsfiddle.net/77udsv9o/3/

<强> CSS：

#progressbar {
      background-color: black;
      border-radius: 13px; /* (height of inner div) / 2 + padding */
      padding: 3px;
    }

    #progressbar > div {
       background-color: orange;
       width: 0%; /* Adjust with JavaScript */
       height: 20px;
       border-radius: 10px;
    }

<强> HTML

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


<a id="aStart">START</a>

<强> JS

var timeInterval;
var maxSec=0;
var curSec=0;


$(function () {
    $('#aStart').click(function(){
        progressStatrt(20)//sec. for pause
    })    
});

function progressStatrt(pauseDurationSec)
{
    maxSec=pauseDurationSec;
    timeInterval= setInterval(function(){
        progessSet()
    }, 1000);
}    

function progessSet()
{
    curSec++;
    var proc=100*curSec/maxSec;
    $('#progressbar div').width(proc+'%');

    if(curSec>=maxSec) progressStop();
}
function progressStop()
{
    clearInterval(timeInterval);
}

自动刷新div jQuery +进度条加载器

1 个答案: