进度条

今天做了个进度条的小demo。

其中，变量f的作用是：让setTimeout函数多执行一遍。 为什么呢，因为clearTimeout函数把最后一次的setTimeout函数动作cut了

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
        <STYLE type=text/css>
            * {
                padding: 0;
                margin: 0;
            }
            
            #my_background {
                width: 200px;
                background: #fff;
                border: solid 1px #000;
                color: #000;
            }
            
            #progress {
                background: lightcyan;
                display: block;
                text-align: center;
                height: 20px;
            }
            
            #pro_num {
                text-align: center;
                position: absolute;
                top: 0;
                z-index: 100;
                width: 200px;
            }
        </STYLE>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <div id="my_background">
            <div id="progress"></div>
            <div id="pro_num">10%</div>
        </div>

    </body>

    <script type="text/javascript">
        var pro_num = document.getElementById("pro_num");
        var progress = document.getElementById("progress");
        var f;
        function progressTest(n) {            
            
            progress.style.width = n * 2 + "px";
            pro_num.firstChild.nodeValue = n + "%";
            n += 11;
            if(n>100){
                n = 100;
            }
            t = setTimeout("progressTest(" + n + ")", 100);
            f = f-11;
            if (f > 100) {
                clearTimeout(t);
            }
        }
        progressTest(1);
    </script>

</html>

 

posted @ 2015-12-21 16:07  cj伤风  阅读(170)  评论(0)  编辑  收藏  举报