进度条

最新推荐文章于 2023-10-11 13:47:04 发布

weixin_30846599

最新推荐文章于 2023-10-11 13:47:04 发布

阅读量35

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-cj-blog/p/5063733.html

版权

今天做了个进度条的小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>

转载于:https://www.cnblogs.com/-cj-blog/p/5063733.html

weixin_30846599

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条

今天做了个进度条的小demo。其中，变量f的作用是：让setTimeout函数多执行一遍。为什么呢，因为clearTimeout函数把最后一次的setTimeout函数动作cut了<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...
复制链接

扫一扫

进度条

“相关推荐”对你有帮助么？