转载地址：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. 基于Windows Server 2008 R2的Failover Cluster

    转载一下别人的文章吧,写的不错 基于Windows Server 2008 R2的Failover Cluster(故障转移群集)部署Sql Server 2008 AA(主主) 模式群集(第一部分) ...

  2. NIO的介绍及使用(总结)

    传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大时,线程所占用的栈内存和CPU线程切换的开销将非常巨大.使用NIO,不再需要为每个线程创建单独的线程,可以用一个含有限数 ...

  3. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  4. pip3 快速安装

    https://www.cnblogs.com/wenchengxiaopenyou/p/5709218.html

  5. Unicode与UTF-8互转(C语言实现) 基本原理

    1. 基础 1.1 ASCII码 我们知道, 在计算机内部, 所有的信息最终都表示为一个二进制的字符串. 每一个二进制位(bit)有0和1两种状态, 因此八个二进制位就可以组合出 256种状态, 这被 ...

  6. Appium+python自动化2-环境搭建（下）【转载】

    前言    上一篇android测试开发环境已经准备好, 接下来就是appium的环境安装了.环境安装过程中切勿浮躁,按照步骤一个个来. 环境装好后,可以用真机连电脑,也可以用android-sdk里 ...

  7. vim注释颜色更改

    通过putty或者securecrt连到linux服务器,使用vi编辑*.php 或*.c文件时, 蓝色的注释很淡,看不清,看起来很费眼 效果如下 我本身有习惯于默认配色,不想修改配色方案,只想把看不 ...

  8. 在Centos中使用goaccess查看Nginx日志

    在Nginx的配置文件中配置一下access日志: log_format access ‘$remote_addr – $remote_user [$time_local] “$request” ‘‘ ...

  9. Kerberos(转：http://www.cnblogs.com/jankie/archive/2011/08/22/2149285.html)

    Kerberos介绍(全)   微软Windows Server 2003操作系统实现Kerberos 版本5的身份认证协议.Windows Server 2003同时也实现了公钥身份认证的扩展.Ke ...

  10. Codeforces Round #299 (Div. 2) B. Tavas and SaDDas【DFS/*进制思维/位运算/一个数为幸运数，当且仅当它的每一位要么是4，要么是7 ，求小于等于n的幸运数个数】

    B. Tavas and SaDDas time limit per test 1 second memory limit per test 256 megabytes input standard ...