主要用到的 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. mysql 查询近三个月数据

    select * from t_user where time>DATE_SUB(CURDATE(), INTERVAL 1 WEEK) --一周 select * from t_user wh ...

  2. Boost学习

    使用boost function使用类成员函数作为回调函数 #include <iostream> #include <boost/function.hpp> struct M ...

  3. Java中 intValue，parseInt，Valueof 这三个关键字的区别

    intValue()是把Integer对象类型变成int的基础数据类型: parseInt()是把String 变成int的基础数据类型: Valueof()是把给定的String参数转化成Integ ...

  4. [Python]操作shell脚本报错Permission denied

    问题: In []: os.system('./test_shell_no_para.sh') : ./test_shell_no_para.sh: Permission denied Out[]: ...

  5. 龙芯软硬件培训个人总结-day2

     今天最后一天,主要培训了BSP,QT,KVM云计算相关的内容.大致总结了一些自己关注的点.培训的资料已上传至服务器,如果需要可关注下方二维码,后台直接回复“资料”获取.关于实战的资料还未导出,等导出 ...

  6. mac book 显示隐藏系统文件夹

    打开Finder Finder->Finder Preferences->勾选 Device分类下的MAC username 在Teminal下输入命令 defaults write co ...

  7. Tutorial : Implementing Django Formsets

    A step-by-step tutorial for setting up and testing a standard Django formset. I’ve noticed on #djang ...

  8. HCL试验2

    PC端配置:配置ip地址 交换机1配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type a ...

  9. C#后台正则表达式

    static Regex RegPhone = new Regex(@"^((1[34578][0-9]{1}))\d{8}");        static Regex RegN ...

  10. Python新手练手项目

    1.新手练手项目集中推荐 https://zhuanlan.zhihu.com/p/22164270 2.Python学习网站 https://www.shiyanlou.com 3.数据结构可视化学 ...