转载地址：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. hibernate用配置文件的方式实现orm

    本文主要讲用配置文件的方式讲如何把一个对象和数据库中的表关联起来,其实用配置文件本质是和用注解的方式是一样的. 思路:1.写一个domain对象(如Person.java) 2.写这个domain对象 ...

  2. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  3. DNS 资源记录解释

    ;SOA授权的开始;;SOA或授权的开始记录用来表示区域的启动;每个区域必须只有一个SOA记录;从名字服务器,在不能和主服务器通信的情况下,将提供12小时DNS服务, 在指定的时间后停止为那个区域提供 ...

  4. c /c++变参函数（转）

    原文转自 https://blog.csdn.net/wwzcx/article/details/8940092 实现c/c++语言的变参函数. 变参函数 :void fun(para,...) 变参 ...

  5. VS MFC 改变AfxMessageBox标题 AFX_IDS_APP_TITLE

    其实这个标题在资源String Table里就能找到,查找AFX_IDS_APP_TITLE,在这里你就能轻而易举的改变标题了． 注意:有的工程的资源String Table里面没有添加AFX_IDS ...

  6. DropZone图片上传控件的使用

    前台代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  7. 【linux高级程序设计】（第十一章）System V进程间通信 4

    共享内存 共享内存主要用于实现进程间大量数据传输. 共享内存的数据结构定义: 系统对共享内存的限制: 共享内存与管道的对比: 可以看到,共享内存的优势: 1.共享内存只需复制2次,而管道需要4次 2. ...

  8. ORA-01940: cannot drop a user that is currently connected

    https://www.cnblogs.com/lwlxqlccc/p/8694696.html

  9. Guava源码学习（一）Optional

    基于版本:Guava 22.0 Wiki:Using and avoiding null 0:Optional简介 null在很多场景下会引发问题,NullPointerException困扰过无数的 ...

  10. 《JAVA与模式》之观察者模式（转载）

    <JAVA与模式>之观察者模式(转载)  原文链接:http://www.cnblogs.com/java-my-life/archive/2012/05/16/2502279.html ...