转载地址：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. 灰姑娘的水晶鞋（NOIP模拟赛Round 7）

    [问题描述] 传说中的水晶鞋有两种颜色:左边的水晶鞋是红色,右边的是蓝色,据说穿上它们会有神奇的力量. 灰姑娘要找到她所有的n双水晶鞋,它们散落在一条数轴的正半轴上,坐标各不相同,每双水晶鞋还有一个权 ...

  2. 用户空间缺页异常pte_handle_fault()分析--(下)--写时复制【转】

    转自:http://blog.csdn.net/vanbreaker/article/details/7955713 版权声明:本文为博主原创文章,未经博主允许不得转载. 在pte_handle_fa ...

  3. Android平台开发-WIFI 驱动移植 -- 详细

    一.WIFI的基本架构(代码路径)     1.WIFI Settings应用程序:       packages/apps/Settings/src/com/android/settings/wif ...

  4. PE文件RV转FOA及FOA转RVA

    /************************************************************************/ /* 功能:虚拟内存相对地址和文件偏移的转换 参数 ...

  5. python爬虫搜片利器fmovice【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python/ 前言 讲真!小编不管看什么电影(大的.小的),不管什么电视剧,小编都没买 ...

  6. 使用windos电脑模拟搭建web集群(一)

    资源规划 1.环境准备 centos7.2 虚拟机 13个 可以先配置一台,做好基础优化,然后克隆13台分布在 windos宿主机上 两台windos笔记  都是8g的内存 一台有点内存吃紧. 没有物 ...

  7. git回溯到指定版本

    git回溯到指定版本 git log命令查看仓库日志 然后使用git checkout 命令 例如回溯到上图中的版本 git checkout 12db5d6fd138922a8aaf2214c84c ...

  8. CF978B File Name【数组操作/序列判断连续出现>=3次的‘x’个数】

    CF978B File Name [分析]:设置计数器cnt,计数x的个数:遇到非x,若cnt>=3的话累加多出的个数,计数器清零:若最后cnt>=3说明没遇到非x无法清零,那后部分就都是 ...

  9. UVA 1347 Tour 【双调旅行商/DP】

    John Doe, a skilled pilot, enjoys traveling. While on vacation, he rents a small plane and starts vi ...

  10. spark-reduceByKey算子