DBMNG数据库管理与应用

书籍是全世界的营养品。生活里没有书籍,就好像没有阳光;智慧里没有书籍,就好像鸟儿没有翅膀。
当前位置:首页 > 经验分享 > Javascript

javascript实现web页面显示百分比的进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        body
        {
            padding: 20px;
            font-size: 14px;
        }
        #progressbar
        {
            width: 278px;
        }
        #progressbar .border
        {
            border: 1px solid #777;
            width: 276px;
            height: 13px;
            padding: 1px;
        }
        #progressbar .bar
        {
            background-color: #73c944;
            width: 50%;
            height: 13px;
            overflow: hidden;
        }
        #progressbar .desc
        {
            text-align: center;
            font-size: 12px;
            line-height: 24px;
        }
    </style>

    <script src=\'#\'" /jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
     var loading = function(){
     var ct = $("#progressbar");
     var desc=$("#desc");
     var bar = $("#bar");
     var idx = 0;
     var time = 500;
     bar.setValue = function(n){
         $("#bar").css({"width":n + "%"});

        };
     void function(){
         bar.setValue(idx += (100 - idx) *.2);
         timer = setTimeout(arguments.callee, time += 100);
         }();
      return {
             remove: function(){
                 clearTimeout(timer);
                $("#desc").html("加载完成");
                 bar.setValue(100);
                 }
             };
     }();
    setTimeout(loading.remove, 10000);
    </script>

</head>
<body>
    <div id="progressbar">
        <div class="border" id="border">
            <div class="bar" style="width: 36px; background-color: Green" id="bar">
            </div>
            <div class="desc" id="desc">
                正在加载</div>
        </div>
    </div>
</body>
</html>

本文出自 “龙行天下” 博客,请务必保留此出处http://baixl.blog.51cto.com/1803511/899656

本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号