主要用到的 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. Zookeeper入门(七)之Java连接Zookeeper

    Java操作Zookeeper很简单,但是前提要把包导对. 关于Zookeeper的Linux环境搭建可以参考我的这篇博客:Linux环境下Zookeeper安装 下面进入正题: 一.导入依赖 < ...

  2. C++入门经典-例3.24-找图书的位置

    1:运行代码: // 3.24.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  3. 死磕java多线程

    1.线程和进程 1.1线程和进程的区别 进程 它是内存中的一段独立的空间,可以负责当前应用程序的运行.当前这个进程负责调度当前程序中的所有运行细节(操作系统为进程分配一块独立的运行空间): 线程 它是 ...

  4. 【转载】Linux的五个查找命令

    原文:http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html 最近,我在学习 ...

  5. 【转】微信接口$GLOBALS['HTTP_RAW_POST_DATA']接收不到值

    $xml = $GLOBALS['HTTP_RAW_POST_DATA']; 打印$xml出来,结果是null 使用的是php7,原因是php7已移除这个全局变量,改成 $xml = file_get ...

  6. Python之 反射、迭代器、生成器

    反射 反射就是通过 内置函数getattr() 以字符串的形式导入模块,以字符串的形式调用模块/对象里方法 l=['add','del','set','find'] for i in l: print ...

  7. React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值

    1.案例实现代码如下 import React, { Component } from 'react'; /** * 特别注意this,对于传值和绑定都十分重要 */ class Home4 exte ...

  8. Cocos2d-X多线程(2) 线程的互斥量std::mutex和线程锁

    多个线程同时访问共享资源时,经常会出现冲突等.为了避免这种情况的发生,可以使用互斥量,当一个线程锁住了互斥量后,其他线程必须等待这个互斥量解锁后才能访问它. thread提供了四种不同的互斥量: 1. ...

  9. Apache编译安装及LAMP架构

    1.apache三种工作模式 1)prefork工作模式 一个进程处理一个用户请求 稳定但是不适合高并发的生产环境 2)worker工作模式 一个进程生成多个线程 合适高并发环境但是需要考虑到线程的安 ...

  10. C语言循环队列

    #include<stdio.h> #include<stdlib.h> #include<string.h> //循环队列 typedef struct { in ...