转载地址：http://blog.csdn.net/treeClimber/article/details/569974

代码在原基础上稍作改动，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>

<table align="center" width="90%">
  <tr><td><div id="load_text">正在导入数据，已完成 <span id="load_percent" class="load_percent">0</span>，请稍候....</div></td></tr>
  <tr><td>
    <div  id="load_progress" style="background-color:#6666ff;width:00%;height:18px"></div><BR>
    <div  id="progress1" style="color:#6666ff;font-family:Arial;font-weight:bold;height:18px">|</div><BR>
  </td></tr>
</table>
<style>
  .load_percent{
     font-family:宋体;
     font-style:oblique;
     font-weight:bold;
     color:#6666FF;
  }
</style>
<script language="javascript">
  var already = 0;
  function display(max){
     already++;
     var dispObj = document.all.load_progress;
     dispObj.style.width = 100.0*already/max+"%";
     document.all.load_percent.innerHTML = 100.0*already/max+"%";
     dispObj.innerHTML = "<span style='color:#FFFFFF;font-family:宋体;font-style:oblique'>"+100.0*already/max+"%</span>";
     document.all.progress1.innerHTML += "|";
     var timer = window.setTimeout("display("+max+")",200);
     if (already >= max){
        window.clearTimeout(timer);
        document.all.load_text.innerHTML = "已完成。";
     }
  }

  display(50);
</script>

 </body>
</html>

转载：JS进度条的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  3. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  5. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  8. js 进度条，可实现结束和重新开始

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js进度条插件pace.js

    主要用到themes文件夹和pace.js文件

随机推荐

  1. Spring之WebSocket网页聊天以及服务器推送

    Spring之WebSocket网页聊天以及服务器推送 转自:http://www.xdemo.org/spring-websocket-comet/ /Springframework /Spring ...

  2. 文件排版（codevs 1300）

    题目描述 Description 写电子邮件是有趣的,但不幸的是经常写不好看,主要是因为所有的行不一样长,你的上司想要发排版精美的电子邮件,你的任务是为他编写一个电子邮件排版程序. 完成这个任务最简单 ...

  3. 转一下网上找来的tortoise git不用每次都输入邮箱和密码的方法。备查看

    每次git clone 和push 都要输入用户名和密码.虽然安全,但在本机上每次都输有些麻烦,如何记住用户名和密码呢? 当你配置好git后,在C:\Documents and Settings\Ad ...

  4. js date扩展方法

    /* File Created: 四月 28, 2015 */ //日期加上天数得到新的日期 //dateTemp 需要参加计算的日期,days要添加的天数,返回新的日期,日期格式:YYYY-MM-D ...

  5. MFC 将 '当前工作路径' 改为 'exe所在路径'（转）

    原文转自 https://blog.csdn.net/morewindows/article/details/8683519 调整进程当前目录为程序可执行文件所在目录是个非常实用的方法.为了更加的让代 ...

  6. VC++中有关句柄和指针及其转换（转）

    原文转自 https://blog.csdn.net/jearmy/article/details/47030011 1.MFC窗口的句柄和指针的转换 (1) 一般窗口对象都会有一个其对应的句柄变量, ...

  7. nginx部署web.py项目

    = =测试环境直接就python index.py就好啦 生产环境nginx + web.py + uwsgi 安装uwsgi... pip install uwsgi 首先把自己的代码小改一下... ...

  8. android hook 框架 ADBI 如何实现so函数挂钩

    上一篇 android 5 HOOK 技术研究之 ADBI 项目 02 分析了hijack.c, 这个文件编译为一个可执行程序 hijack, 该程序实现了向目标进程注入一个动态库的功能.这一篇继续研 ...

  9. django怎么自己创建一个中间件

    中间件是什么? 中间件是类似flask函数中钩子函数的东西.可以在请求视图函数前,或者视图函数响应后处理某些事情.中间件对全部视图都有效! 中间件一般会有两个方法,process_request和pr ...

  10. NetFlow流量采集与聚合的研究实现

    http://www.21ic.com/app/analog/200907/44851.htm