主要用到的 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. WebSocket 结合 Nginx 实现域名及 WSS 协议访问-Nginx配置

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  2. 牛客 19-5-3 QAQ

    #include<iostream> #include<cstring> using namespace std; typedef long long LL; int main ...

  3. C#开启一个进程

    Process myProc = null; myProc = Process.Start(@"E:\QQ轻聊\Tencent\QQLite\Bin\QQScLauncher.exe&quo ...

  4. [Java]算术表达式求值之一（中序表达式转后序表达式方案）

    第二版请见:https://www.cnblogs.com/xiandedanteng/p/11451359.html 入口类,这个类的主要用途是粗筛用户输入的算术表达式: package com.h ...

  5. DeepWalk 安装指南

    DeepWalk 安装指南 创建 conda 虚拟环境 conda create -n deepwalk pip python=3.5 conda activate deepwalk 安装 deepw ...

  6. 【转载】解决jquery-1.10.2.min.map 404 Not Found错误

    最近写代码遇到问题,报错说jquery-1.10.2.min.map NOT FOUND.但是我检查了几遍代码发现代码中没有问题,而且根本就没有包含甚至提到jquert-1.10.2.min.map这 ...

  7. 什么是web语义化，有什么好处

    web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化.HTML语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 CSS命名的语义化是指 ...

  8. Chrome OS支持在窗口中运行Linux了！！！

    借助Crouton Chrome扩展,Chrome OS可以在窗口中运行Linux了.在使用该扩展之前,你需要先将自己的Chromebook设置成开发者模式(Develeper Mode). 此前,C ...

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

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

  10. 求第n个质数

    输入一个不超过 10000 的正整数 n,求第n个质数 样例输入 10 样例输出 29 题目地址 #include<stdio.h> #include<math.h> int ...