主要用到的 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. kill 与 killall和过滤后杀掉

    1.绝杀 kill -9 PID  杀掉单一进程  例如:kill -9 pid号   同意的 kill -s SIGKILL   这个强大和危险的命令迫使进程在运行时突然终止,进程在结束后不能自我清 ...

  2. MYSQL5.5源码包编译安装

    MYSQL5.5源码安装首先安装必要的库yum -y install gcc*###### 安装 MYSQL ######首先安装camke 一.支持YUM,则yum install -y cmake ...

  3. overflow-x scroll 内部元素滚动,父级容器代码

    display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch;

  4. IDEA/Git 提交/commit 忽略 文件夹

    commit的时候.idea文件夹被默认选中了,如果忘记点掉就会被提交上去,想要默认忽略其实很简单. 找到项目根目录处的.gitignore文件(如果是用git版本控制的话) 双击打开之后  我们在最 ...

  5. 关系/对象映射 多对多关系(@ManyToMany 注释)【重新认识】

    old: @ManyToMany 注释:表示此类是多对多关系的一边, mappedBy 属性定义了此类为双向关系的维护端, 注意:mappedBy 属性的值为此关系的另一端的属性名. 例如,在Stud ...

  6. PowerDesigner_15连接Oracle11g,反向工程导出模型图

    1.启动PowerDesigner2.菜单:File->ReverseEngineer->Database出来NewPhysicalDataModel对话框,DBMS选择ORACLEVer ...

  7. python基础语法之集合set

    1 概念 集合是一个无需的,不重复的数组组合,它的主要作用如下: 去重,将一个列表装换成集合,会将其去重 关系测试,测试两组数据的交集,差集,并集等关系. 集合对象是一组无需排列的可哈希的值,集合成员 ...

  8. 1.MySQL的基本使用

    数据库的操作: 1.Windows中如何使用CMD进入MySQL数据库:     1 Windows+R  -->  输入 cmd 运行     2 C:\Users\***>D:    ...

  9. kettle学习资料

    1.kettle资源丰富:kettle中文网 http://www.kettle.net.cn/category/use?tdsourcetag=s_pctim_aiomsg

  10. ros3。3教程 入门到高级

    115.com 目录route 基 础 篇(21课) 1 Ros简介 主要讲解ros的基础知识,让用户对ros有个大致了解,并对ros进行简单演示 语音视频 20分16秒   2 CDROM安装 主要 ...