主要用到的 offsetWidth 属性，定时器。
 <!DOCTYPE html>

 <html>

 3    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>进度条 </title>

    </head>

    <style>

      #progress{

        position: relative;

        margin: auto;

        top: 200px;

        display: block;

        width: 200px;

        height: 20px;

15        border-style: dotted;

        border-width: thin;

17        border-color: darkgreen;

       }

19     #filldiv{

       position:absolute;

       top: 0px;

       left: 0px;

       width: 0px;

       height: 20px;

25       background: blue;

26     }

27    #percent{

28       position: absolute;

29       top: 0px;

30       left: 200px;

31     }

     </style>

 <body>

     <div id="progress">

         <div id="filldiv"></div>

36         <span id="percent">0</span>

     </div>

 </body>

 </html>

40      <script type="text/javascript">

41      //获取所有需要的元素

      var progress = document.getElementById("progress");

      var filldiv = document.getElementById("filldiv");

      var percent = document.getElementById("percent");

      var w = progress.clientWidth;//获取整个进度条的长度

      //开启一个定时器

      var timer = setInterval(function(){

50      //filldiv的宽度递增

      //filldiv.offsetWidth，每一次获取的都是当前的宽

52      filldiv.style.width = filldiv.offsetWidth + 1 + "px";

53      //filldiv添加一个随机背景颜色

      filldiv.style.background = getColor();

55      //percent统计百分比

      percent.innerHTML = parseInt((filldiv.offsetWidth/w)*100) + "%";

57      //当filldiv的宽到了200的宽就停止定时器

      if(filldiv.offsetWidth == w){

      clearInterval(timer);//当进度达到100%时，关闭定时器，进度停止。

60       }

61      },10);

63      //获取十六进制的随机颜色值

64      function getColor(){

65      var str = "0123456789abcdef";

      var color = "#";

      var rand;

      //str有下标 0-15

69      //获取0-15的随机数

      //通过这个随机数作为str的下标，

71      //获取随机字符

      //获取六个随机字符拼成一个字符串

      for(var i = 0 ; i < 6 ;i++){

74      rand = getRand(0,15);

75      color += str.charAt(rand);

      }

        return color;

      }

      //获取min-max之间的随机整数

      function getRand(min,max){

82      return parseInt(Math.random() * (max - min + 1) + min);

83      }

 </script>

运行效果：
**可以将 getColor() 和 getRand() 函数放入一个公共的JS库，下次使用时可以直接调用。

js实现简单进度条的更多相关文章

  1. wpf 导出Excel Wpf Button 样式 wpf简单进度条 List泛型集合对象排序 C#集合

    wpf 导出Excel   1 private void Button_Click_1(object sender, RoutedEventArgs e) 2 { 3 4 ExportDataGrid ...

  2. js(ext)中，设置[！！异步！！]上传的简单进度条

    代码在updateHmis的历史记录中,此处存档 handler : function() { //显示进度条 Ext.MessageBox.wait('数据上传中...','提示'); //上传数据 ...

  3. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  4. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. asp.net 的一个简单进度条功能

    我们先看下效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <sc ...

  6. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  7. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. iOS-CALayer实现简单进度条

    /** *  用CALayer定制下载进度条控件 *  1.单独创建出CALayer *  2.直接修改CALayer的frame值,执行隐式动画,实现进度条效果 *  3.用定时器(NSTimer) ...

  9. JGUI源码：实现简单进度条(19)

    程序效果如下 实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装 <style> .jgui-proce ...

随机推荐

  1. 生成json文件写入本地

    public class Json { public static void main(String[] args) { String fullPath = null; //例如:fullPath=& ...

  2. JavaScript 普通声明式函数

    1.为什么需要函数 实现代码的复用.存在函数提升,且会在变量提升的上面; 2.函数的创建 js中函数语法: function 函数名(形参){ //函数体 } 调用时:函数名(形参) 注: (1) 形 ...

  3. Scala学习（三）——集合

    基本数据结构 Scala提供了一些不错的集合. 数组 Array 数组是有序的,可以包含重复项,并且可变. val numbers = Array(1, 2, 3, 4, 5, 1, 2, 3, 4, ...

  4. LeetCode 34. 搜索范围（search for a range）

    题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值 ...

  5. scala Futures and Promises

    http://docs.scala-lang.org/overviews/core/futures.html  Futures and Promises   By: Philipp Haller, A ...

  6. VS 2017 VC++项目出现 LNK1104 无法打开文件"libcmtd.lib" 的解决方法

    今天用VS 2017编译一个以前的VC++动态库项目,出现了一个链接器问题: LNK1104 无法打开文件"libcmtd.lib" . 操作系统版本为:Windows 10 18 ...

  7. zk 两阶段提交（待完善）

    zk 节点是一个 QuorumPeer,选举结束后,leader 和 follower 各自执行自己的逻辑: org.apache.zookeeper.server.quorum.QuorumPeer ...

  8. 什么是 go vendor

    go vendor 是golang引入管理包依赖的方式,1.5版本开始引进,1.6正式引进. 基本原理其实就是将依赖的包,特指外部包,复制到当前工程下的vendor目录下,这样go build的时候, ...

  9. Tensorflow 安装 和 初识

    Windows中 Anaconda,Tensorflow 和 Pycharm的安装和配置   https://blog.csdn.net/zhuiqiuzhuoyue583/article/detai ...

  10. java并发编程 线程基础

    java并发编程 线程基础 1. java中的多线程 java是天生多线程的,可以通过启动一个main方法,查看main方法启动的同时有多少线程同时启动 public class OnlyMain { ...