直接给代码:
/**
*返回浏览器类型(ie,firefox,opera)
*/
function getBrowser(){
var type = "";
var Browser = {
'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
};
if(Browser["isIE"]==true){type='ie'};
if(Browser["isFirefox"]==true){type='firefox'};
if(Browser["isOpera"]==true){type='opera'};
return type;
}
/**
*生成静态进度条
*@param progress 进度(例如:10/120,也可为文字:进度不正常时的提示文字)
*@param id 进度条id
*@param color 进度条颜色
*/
function processBar(progress,id,color){
var browser = getBrowser();
var height = "";
if(browser.toLowerCase()=='ie'){
height = 28;
}else if(browser.toLowerCase()=='firefox'){
height = 24;
}else if(browser.toLowerCase()=='opera'){
height = 24;
}
var processStr = "";
if(parseInt(progress)<90){//进度显示放在span外
processStr =
'<div id="'+id+'" style="height:24px;text-align:left;background:white;border: 1px solid green;cursor:hand;" >'+
'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';width:'+progress+'%;"></div>'+progress+"%"+
'</div>';
}else if(parseInt(progress)>=90){//进度显示放在span中
processStr =
'<div id="'+id+'" style="height:24px;text-align:left;background:white;border: 1px solid green;cursor:hand;" >'+
'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';width:'+progress+'%;">'+progress+"%"+'</div>'+
'</div>';
}else{
processStr =
'<div id="'+id+'" style="height:24px;text-align:center;background:white;border: 1px solid green;cursor:hand;" >'+
'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';"></div>'+progress+
'</div>';
}
return processStr;
}
应用效果预览:
大家注意生成进度条时传入id,这个id就给了大家丰富的想象空间,有个这个id就可以干很多事哦~
分享到:
相关推荐
用html5 javascript实现的视频自定义进度条。可以直接用到开发视频监控回放的进度条。纯javascript css html 实现。本资源已完成了视频播放的开始,暂停,调节进度等功能。
利用javascript弹出一个层,层里面实现进度条的效果。 在上传或是下载方面,自己设置滚动时间和进度!
使用 CommonJS 模式的 iOS Appcelerator Titanium 自定义进度条。 它显示了创建和使用线性和圆形进度条的示例。 两个进度条都可以很容易地针对任何平台定制,如用 Javascript 编写。 线性和圆形进度条
可自定义刻度jQuery进度条.zip
videojs-progressTips 在 video.js 播放器上显示悬停时间的工具提示。 此插件已更新至 video.js 4.6.4 并在其上进行测试。 这取决于jQuery。 入门 下载和 在您的网页中: <... script src =" dist/videojs....
ajax版自定义上传文件数量+进度条+JAVA+Servlet QQ群:14622422 WEB开发性感地带■■ 高洪岩版 ajax版自定义上传文件数量+进度条+JAVA+Servlet.
ClipLoading 外形可自定义的一个基于canvas的进度条
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
8.5.3 进度条控制滚动图片 213 8.5.4 百叶窗效果 216 8.5.5 更改表格间隔背景色 219 第9章 JavaScript中的XML 223 9.1 XML语言 223 9.1.1 XML概述 223 9.1.2 XML文档结构 225 9.1.3 XML标记 226 9.1.4 XML文档元素 ...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
8.5.3 进度条控制滚动图片 8.5.4 百叶窗效果 8.5.5 更改表格间隔背景色 第9章 JavaScript中的XML 9.1 XML语言 9.1.1 XML概述 9.1.2 XML文档结构 9.1.3 XML标记 9.1.4 XML文档元素 9.1.5 XML属性 ...
启用了简单轻量级渐变的圆形进度条,用于reactjs / nextjs 安装 使用npm npm i -s react-gradient-progress 基本用法 import { CircleProgress } from 'react-gradient-progress' 道具 姓名 描述 percentage 进度...
3.4.html 用户自定义的实现slice函数功能的函数。 3.5.html 删除数组最后项的方法。 3.6.html 向数组头添加一个项。 3.7.html 多维数组的实现方法。 第4章(\c04) 示例描述:介绍JavaScript的面向...
VIDEO Custom progress bar, playback ...VIDEO自定义进度条,播放按钮,时间 1.Introduce(引入)video.js , video.css 2.use(用法) $(function(event){ new myVideo(event,$(".video-wrap")); }) VIDEO2.0 支持多个video
第8章 案例研究:实现带进度条的异步文件上传功能 8.1 信息载入时的小生命 8.2 起点 8.3 完成整合:上传进度指示器 8.3.1 addProgressBar()对象的结构 8.3.2 载入事件 8.3.3 ...
5)自定义视频播放器:具有进度条,音量和速度控制以及全屏按钮的视频播放器。 6)Video Speed Scrubber:视频播放器,具有鼠标移动无React播放速度洗涤器GUI对象。 7)鼠标移动阴影:鼠标位置敏感的可编辑文本的...
在React中创建基于时间轴和回放的动画
Salesforce - 带有进度条的拖放文件上传... 最初我虽然使用了visualforce remoting,但挑战是如何显示进度条,同样的挑战是自定义控制器或扩展。 所以,我决定创建一个简单的 Apex REST API 来上传附件。 博客文章 -
显示进度条 显示已上传文件大小和百分比 文件后缀名和文件大小检测 向服务端提交额外数据 自定义文件队列中的html模板 css样式分离出单独文件,可自己定制样式 添加文件上传各阶段的回调函数 断点续传
第8章 案例研究:实现带进度条的异步文件上传功能 8.1 信息载入时的小生命 8.2 起点 8.3 完成整合:上传进度指示器 8.3.1 addProgressBar()对象的结构 8.3.2 载入事件 8.3.3 ...