zoukankan      html  css  js  c++  java
  • jquery 简单的进度条实现代码

     网页结构:
     代码如下:
    <div id="center">
    <div id="message"></div>
    <div id="loading"><div></div></div>
    </div>

    css代码:
    代码如下:
    #center{
    margin:50px auto;
    400px;
    }
    #loading{
    397px;
    height:49px;
    background:url(bak.png) no-repeat;
    }
    #loading div{
    0px;
    height:48px;
    background:url(pro.png) no-repeat;
    color:#fff;
    text-align:center;
    font-family:Tahoma;
    font-size:18px;
    line-height:48px;
    }
    #message{
    200px;
    height:35px;
    font-family:Tahoma;
    font-size:12px;
    background-color:#d8e7f0;
    border:1px solid #187CBE;
    display:none;
    line-height:35px;
    text-align:center;
    margin-bottom:10px;
    margin-left:50px;

    }

    JavaScript代码:
    代码如下:
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
    var progress_id = "loading";
    function SetProgress(progress) {
    if (progress) {
    $("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
    $("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
    }
    }
    var i = 0;
    function doProgress() {
    if (i > 100) {
    $("#message").html("加载完毕!").fadeIn("slow");//加载完毕提示
    return;
    }
    if (i <= 100) {
    setTimeout("doProgress()", 100);
    SetProgress(i);
    i++;
    }
    }
    $(document).ready(function() {
    doProgress();
    });
    </script>

  • 相关阅读:
    24. orcle创建备份表
    23. oralce11g导出dmp然后导入Oracle10g
    模板
    日记集
    Outlook 2013 电子邮件账户设置备份与恢复
    Firefox恢复书签
    Windows 7 Professional安装多语言包
    CentOS下成功修复了Windows的grub引导
    CentOS 7修复MBR和GRUB
    从移动硬盘开机,引导VHD(Win10)
  • 原文地址:https://www.cnblogs.com/QiuJL/p/4524228.html
Copyright © 2011-2022 走看看