JS做的进度条,如何做的?

JavaScript013

JS做的进度条,如何做的?,第1张

js其实是没法计算到网页的加载进度的。

目前见到的打开页面显示进度的有两种

1、如果是flash做的,那是flash自身的加载进度。

2、如果是js做的,做法比较简单,就是在页面的不同的地方插入script标签,动态改变进度的值。     

<html>

    <head>

        <script>

        var processPer = 0

        window.onload = function(){

            document.getElementById('process').innerHTML = processPer

        }

        </script>

    </head>

    <body>

        <div id="process"></div>

        <div></div>

        ....

        <script>

        processPer = 30

        document.getElementById('process').innerHTML = processPer

        </script>

        <div></div>

        ....

        <div></div>

        ....

        <script>

        processPer = 100

        document.getElementById('process').innerHTML = processPer

        </script>

    </body>

</html>

类似这样的,就可以实现了进度的动态改变。

<!DOCTYPE "> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 

<title>进度条</title> 

<style type="text/css"> 

  body{ 

    text-align:center 

  } 

  .graph{ 

    width:450px 

    border:1px solid #F8B3D0 

    height:25px 

  } 

  #bar{ 

        display:block 

        background:#FFE7F4 

        float:left 

        height:100% 

        text-align:center 

    } 

    #barNum{ 

        position:absolute 

    } 

</style> 

<script type="text/javascript"> 

function $(obj){ //封装方法,相当于jQuery

    return document.getElementById(obj) 

function go(){ 

    $("bar").style.width = parseInt($("bar").style.width) + 1 + "%" 

    $("bar").innerHTML = $("bar").style.width 

    if($("bar").style.width == "100%"){ 

        window.clearInterval(bar) //进度为100时清除定时器

    } 

var bar = window.setInterval("go()",50) //设置定时器

window.onload = function(){ 

    bar 

</script> 

</head> 

<body> 

<div class="graph"> 

<strong id="bar" style="width:1%"></strong> 

</div> 

</body> 

</html>