Question

如何修改下面的代码，以便当进度条完成加载并到达结尾时，可以执行单独的函数（即test（）），而不是像现在一样重复和重复。 / p>

<html> 
    <head> 
        <script type="text/javascript"> 
        var prg_width = 200; 

        function progress() { 
            var node = document.getElementById('progress'); 
            var w    = node.style.width.match(/\d+/); 

            if (w == prg_width) { 
                w = 0; 
            } 

            node.style.width = parseInt(w) + 5 + 'px'; 
        } 

        </script> 
    </head> 

    <body onload="var progress_run_id = setInterval(progress, 30);"> 

        <div style="border: 1px solid #808080; width:200px; height:5px;"> 
            <div id="progress" style="height:5px; width:0px; background-color:#DBDBDB;"/> 
        </div> 

    </body> 
</html>

非常感谢和感谢你的帮助。

干杯，

杰

Answer 1

调用此单独的函数而不是

w = 0;

线。不要忘记clearInterval(progress_run_id)。

Answer 2

  var prg_width = 200; 

        function progress() { 
            var node = document.getElementById('progress'); 
            var w    = node.style.width.match(/\d+/); 

            if (w == prg_width) { 
                test(); // CHANGE THIS
                clearInterval(progress_run_id);
            } 

            node.style.width = parseInt(w) + 5 + 'px'; 
        }

检查宽度是否等于完成的宽度。如果是，则清除间隔，然后调用test功能。

Answer 3

<script type="text/javascript"> 
        var prg_width = 200; 

        function progress() { 
            var node = document.getElementById('progress'); 
            var w    = node.style.width.match(/\d+/); 

            if (w == prg_width) { 
                test(); 
                clearInterval(progress_run_id);
            } 

            node.style.width = parseInt(w) + 5 + 'px'; 

        } 

        </script>

Answer 4

<html> 
<head>
<script type="text/javascript"> 
var prg_width = 200; 
var progress_run_id = null;

function progress() { 
var node = document.getElementById('progress'); 
    var w  = node.style.width.match(/\d+/); 
    if (w == prg_width) { 
        clearInterval( progress_run_id );
        w = 0;
    } else {
        w = parseInt(w) + 5 + 'px';             
    }
    node.style.width = w;
}
function initialize(){
    progress_run_id = setInterval(progress, 30);
}
window.onload = initialize();
</script> 
</head> 
<body> 
        <div style="border: 1px solid #808080; width:200px; height:5px;"> 
        <div id="progress" style="height:5px; width:0px; background-color:#DBDBDB;"/> 
        </div> 
</body> 
</html>

进度条保持重复

4 个答案: