转载地址：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. 微信2种access_token对比

    1.需求 了解网页accesstoken和基础accesstoken的不同 参考资料:http://www.cnblogs.com/wellsoho/p/5089409.html

  2. spring in action学习笔记七：@Conditional注解的用法

    @Profile注解是@Conditional注解的一个例子.即@Profile也是用@Conditional注解来实现的. 必须让条件实现Condition这个接口. 下面的案例讲如果环境中有mag ...

  3. gitHub优秀android项目

    转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...

  4. laravel 学习笔记 —— 神奇的服务容器

    转载自:https://www.insp.top/learn-laravel-container 容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于 ...

  5. Struts2的类型转换机制

    Struts2的类型转换机制 在基于HITP 协胆的Web 应用中,客户端〈浏览器〉和服务器之间传输的都是字符串形式的数据,换句话说,服务器接收到的用户数据只能是字符串或字符数组, 但在服务器端的Ja ...

  6. 行为型设计模式之职责链模式(Chain of Responsibility)

    结构 意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 适用性 有多个的对象可以处理一个请求,哪个 ...

  7. eclipse 导出burpsuite插件包含第三方lib包

    第一步:右键项目点击export: 2.选择Runable JAR file: 点击Finish后会爆出一个错误(Jar export finished with problems. See deta ...

  8. haskell处理JSON(aeson)

    aeson是haskell的一个库,其实我也不太懂,不过大概是这样的:   定义一个类型 如   data Person = Person { firstName :: String , lastNa ...

  9. linux反汇编

    使用objdump参数可以: -a, --archive-headers    显示压缩头信息   -f, --file-headers       显示目录头总览   -p, --private-h ...

  10. Linux SPI总线和设备驱动架构之一：系统概述【转】

    转自:http://blog.csdn.net/droidphone/article/details/23367051/ 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 硬 ...