js实现简单进度条
主要用到的 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实现简单进度条的更多相关文章
- wpf 导出Excel Wpf Button 样式 wpf简单进度条 List泛型集合对象排序 C#集合
wpf 导出Excel 1 private void Button_Click_1(object sender, RoutedEventArgs e) 2 { 3 4 ExportDataGrid ...
- js(ext)中，设置[！！异步！！]上传的简单进度条
代码在updateHmis的历史记录中,此处存档 handler : function() { //显示进度条 Ext.MessageBox.wait('数据上传中...','提示'); //上传数据 ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- JS网页顶部进度条demo
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- asp.net 的一个简单进度条功能
我们先看下效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <sc ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...
- iOS-CALayer实现简单进度条
/** * 用CALayer定制下载进度条控件 * 1.单独创建出CALayer * 2.直接修改CALayer的frame值,执行隐式动画,实现进度条效果 * 3.用定时器(NSTimer) ...
- JGUI源码：实现简单进度条(19)
程序效果如下 实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装 <style> .jgui-proce ...
随机推荐
- ZooKeePer总汇
一.什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization) ...
- spring 手动注册bean
//将applicationContext转换为ConfigurableApplicationContext ConfigurableApplicationContext configurableAp ...
- 20175215 2018-2019-2 第二周java课程学习总结
一.学生免费申请使用IDEA 下载好IDEA后,设置到最后有一个界面, 我们需要到IDEA官网进行IDEA免费试用权的申请,如果有学校的邮箱,使用学校的邮箱注册并证明是自己的就可以直接通过申请.如下图 ...
- ShiroFilterFactoryBean 找不到的原因
是因为参考的那篇shiro的博客,没有引入这个依赖的原因 <dependency> <groupId>org.apache.shiro</groupId> < ...
- 【Spark机器学习速成宝典】基础篇04数据类型（Python版）
目录 Vector LabeledPoint Matrix 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策树 Python代码(sk ...
- python 元组和数组
参考:https://stackoverflow.com/questions/1708510/list-vs-tuple-when-to-use-each tuple(元组):不可变,不能添加.删除. ...
- 十七：jinja2之宏
宏有点类似于函数,接收一些数据,进行处理,但是没有返回值,可以将一些常用的代码片段放到宏中,然后把不固定的值抽出来做变量 使用maacro来定义宏,使用宏的时候,参数可以设默认值 自定义一个input ...
- Java Array数组 遍历 四种方式（包含 Lambda 表达式遍历）
示例代码如下: package com.miracle.luna.lambda; import java.util.Arrays; /** * @Author Miracle Luna * @Date ...
- Eclipse_Package Presentation
Package Presentation ->Flat ->Hierarchical更常用
- W3C验证工具
HTML验证工具:http://validator.w3.org/ CSS验证工具:http://jigsaw.w3.org/css-validator/