Question

我有一个开始处理点击的进度条，它不会自动刷新。如何自动刷新和加载，这是我的代码：如果有人能帮助我，那就太好了！我还需要它持续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>

Answer 1

只需在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

});

Working Demo

了解jQuery中的触发事件：http://api.jquery.com/trigger/

如何让我的进度条刷新，让它自动加载？

1 个答案: