Javascript 如何刷新进度条并让其自动加载？_Javascript_Html_Progress Bar

Javascript 如何刷新进度条并让其自动加载？

javascript html

Javascript 如何刷新进度条并让其自动加载？,javascript,html,progress-bar,Javascript,Html,Progress Bar,我有一个进度条，在点击时开始工作，它不会自动刷新。如何使其自动刷新和加载，以下是我的代码：如果有人能帮助我，那就太好了！我还需要它持续20秒 <body> <link rel="stylesheet" type="text.css" href="test.css"/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <

我有一个进度条，在点击时开始工作，它不会自动刷新。如何使其自动刷新和加载，以下是我的代码：如果有人能帮助我，那就太好了！我还需要它持续20秒

    <body>
    <link rel="stylesheet" type="text.css" href="test.css"/>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>


    <div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
    <div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
    <div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
    </div>

    <p>Click once to start!</p>
    <p>Click again to toggle Start/Stop</p>

    <script>
    var timer = 0,
        perc = 0,
        timeTotal = 2500,
        timeCount = 1,
        cFlag;

    function updateProgress(percentage) {
        var x = (percentage/timeTotal)*100,
            y = x.toFixed(3);
        $('#pbar_innerdiv').css("width", x + "%");
        $('#pbar_innertext').text(y + "%");
    }

    function animateUpdate() {
        if(perc < timeTotal) {
            perc++;
            updateProgress(perc);
            timer = setTimeout(animateUpdate, timeCount);
        }
    }
    $(document).ready(function() {
        $('#pbar_outerdiv').click(function() {
            if (cFlag == undefined) {
                clearTimeout(timer);
                perc = 0;
                cFlag = true;
                animateUpdate();
            }
            else if (!cFlag) {
                cFlag = true;
                animateUpdate();
            }
            else {
                clearTimeout(timer);
                cFlag = false;
            }
        });
            });
    </script>


0%
点击一次开始
再次单击以切换开始/停止
var定时器=0，
perc=0，
总时间=2500，
时间计数=1，
cFlag；
函数updateProgress（百分比）{
变量x=（百分比/时间总数）*100，
y=x.t固定（3）；
$（'pbar_innerdiv'）.css（“宽度”，x+“%”）；
$（'pbar_innertext'）。文本（y+“%”）；
}
函数animateUpdate（）{
如果（perc<时间总计）{
perc++；
更新进度（perc）；
计时器=设置超时（动画更新、时间计数）；
}
}
$（文档）.ready（函数（）{
$（'#pbar_outerdiv'）。单击（函数（）{
if（cFlag==未定义）{
清除超时（计时器）；
perc=0；
cFlag=真；
动画更新（）；
}
如果（！cFlag）{
cFlag=真；
动画更新（）；
}
否则{
清除超时（计时器）；
cFlag=假；
}
});
});

您只需在DOM就绪时触发单击即可

$(document).ready(function() {
  $('#pbar_outerdiv').click(function() {
    // some code to handle click
  });
  
  $("#pbar_outerdiv").trigger( "click" );  // this will get the progressbar working as soon as the DOM is loaded
  
});

阅读jQuery中的触发事件：

@pieterbesje Use

location.reload（）。如果您对此答案感到满意，请将其标记为已接受。因此，您可以制作一个快速演示来向我演示，因为我使用location.reload（），它每秒钟刷新一次。@pieterbesje请发布每秒钟刷新一次的完整代码，以便我看一看。@Rehul Desai我用过这段代码，现在它可以工作了，它每20秒刷新一次。setTimeout（function（）{window.location.reload（1）；}，20000）；