主要用到的 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. apache的httpclient进行http的交互处理

    使用apache的httpclient进行http的交互处理已经很长时间了,而httpclient实例则使用了http连接池,想必大家也没有关心过连接池的管理.事实上,通过分析httpclient源码 ...

  2. kotlin 冷知识 *号 展开数组

    Kotlin笔记-冷门知识点星号(*) 2019年05月10日 11:37:00 weixin_33724059 阅读数 6   可变参数展开操作符 在数组对象前加*号可以将数组展开,方便传值,比如: ...

  3. 选题 Scrum立会报告+燃尽图 01

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组介绍 组长:贺敬文 组员:彭思雨 王志文 位军营 杨萍 ...

  4. 191022Django模板

    一.变量和句点符深度查找 字符串变量引用 def show_time(request): now_time = datetime.datetime.now() return render(reques ...

  5. 有关C#写一个WindowsService的两篇文章

    1.http://blog.csdn.net/yysyangyangyangshan/article/details/10515035 上面的这篇文章一共两段,第二段讲的是使用代码来安装发布这个Win ...

  6. 【Spark机器学习速成宝典】模型篇05决策树【Decision Tree】（Python版）

    目录 决策树原理 决策树代码(Spark Python) 决策树原理 详见博文:http://www.cnblogs.com/itmorn/p/7918797.html 返回目录 决策树代码(Spar ...

  7. RF中BDD编写

    工程结构 用户关键字 测试用例 运行日志

  8. navicat常用快捷键与SQL基本使用

    一.Navicat常用快捷键 1,Ctrl+q就会弹出一个sql输入窗口 2,Ctrl+r就执行sql了 3,按f6会弹出一个命令窗口 4,Ctrl+/ 注释 5,Ctrl +Shift+/ 解除注释 ...

  9. linux如何查看目录或文件夹的总大小--du命令

    记录一下如何查看一个目录或文件夹的总大小. 使用du命令的选项-s,可以统计整个目录或文件夹的大小. 例如 du -sk ./ 156k -k表示以KB为单位计算.

  10. Python基本语法_函数_参数的多类型传值

    前言 上一篇主要介绍了Python函数的参数类型,本篇继续学习Python函数多类型传值. 目录 前言 目录 软件环境 参数的多类型传值 向函数传递Tuple 向函数传递List 向函数传递Dicti ...