/**
* 纯js进度条
* Created by kiner on 15/3/22.
*/ function progress(options){ this.w = (options && options.width)?parseFloat(options.width) : parseFloat(this.options.width);
this.h = (options && options.height)?parseFloat(options.height) : parseFloat(this.options.height);
this.bgColor = (options && options.bgColor)?options.bgColor : this.options.bgColor;
this.proColor = (options && options.proColor)?options.proColor : this.options.proColor;
this.fontColor = (options && options.fontColor)?options.fontColor : this.options.fontColor;
this.showPresent = (options && options.showPresent != undefined)?options.showPresent : this.options.showPresent;
this.completeCallback = (options && options.completeCallback)?options.completeCallback : this.options.completeCallback;
this.changeCallback = (options && options.changeCallback)?options.changeCallback : this.options.changeCallback;
this.text = (options && options.text)?options.text : this.options.text;
this.val = (options && options.val)?options.val : this.options.val; this.strTemp = this.text.substring(0,this.text.indexOf('#*'))+"{{pro}}"+this.text.substring(this.text.indexOf('*#')+2); this.init(); }
/**
* 默认选项
* @type {{width: number, height: number, bgColor: string, proColor: string, fontColor: string, val: number, text: string, showPresent: boolean, completeCallback: Function, changeCallback: Function}}
*/
progress.prototype.options = { width : 200,
height: 30,
bgColor : "#005538",
proColor : "#009988",
fontColor : "#FFFFFF",
val : 10,
text:"当前进度为#*val*#%",
showPresent : true,
completeCallback:function(){},
changeCallback:function(){} }; /**
* 初始化
*/
progress.prototype.init = function(){ this.proBox = document.createElement('div');
this.proBg = document.createElement('div');
this.proPre = document.createElement('div');
this.proFont = document.createElement('div'); addClass(this.proBox,'proBox');
addClass(this.proBg,'proBg');
addClass(this.proPre,'proPre');
addClass(this.proFont,'proFont'); this.proBox.setAttribute("style","width:"+this.w+"px; height:"+this.h+"px; position:relative; overflow:hidden; box-shadow:0 0 5px #FFFFFF; -moz-box-shadow:0 0 5px #FFFFFF; -webkit-box-shadow:0 0 5px #FFFFFF; -o-box-shadow:0 0 5px #FFFFFF;");
this.proBg.setAttribute("style","background-color:"+this.bgColor+"; position:absolute; z-index:1; width:100%; height:100%; top:0; left:0;");
this.proPre.setAttribute("style","transition:all 300ms; -moz-transition:all 300ms; -webkit-transition:all 300ms; -o-transition:all 300ms; width:"+this.val+"%; height:100%; background-color:"+this.proColor+"; position:absolute; z-index:2; top:0; left:0;");
if(this.showPresent){ this.proFont.setAttribute("style","overflow:hidden;text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap; width:100%; height:100%; color:"+this.fontColor+"; text-align:center; line-height:"+this.h+"px; z-index:3; position:absolute; font-size:12px;"); var text = this.parseText();
this.proFont.innerHTML = text;
this.proFont.setAttribute("title",text);
this.proBox.appendChild(this.proFont);
} this.proBox.appendChild(this.proBg);
this.proBox.appendChild(this.proPre); }; /**
*
*/
progress.prototype.refresh = function(){
this.proPre.style.width = this.val+"%"; this.proFont.innerHTML = this.parseText();
}; /**
* 转换文字
* @returns {options.text|*}
*/
progress.prototype.parseText = function(){
this.text = this.strTemp.replace("{{pro}}",this.val);
return this.text;
}; /**
* 更新进度条进度
* @param val
*/
progress.prototype.update = function(val){ this.val = val;
this.refresh(); this.changeCallback.call(this,val);
if(val==100){ this.completeCallback.call(this,val); }
};
/**
* 获取进度条本身的html对象，可直接将其塞入容器中
* @returns {HTMLElement|*}
*/
progress.prototype.getBody = function(){
return this.proBox;
};
/**
* 获取当前进度条的值
* @returns {*}
*/
progress.prototype.getVal = function(){
return this.val;
}; function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
}
}
progess.js使我们能够实现进度条功能，下边是当初下载时候的例子。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>进度条插件progress.js</title>
<script src="progress.js"></script>
<style>
body{
background: url("bg.png");
} .pro,.result {
width: 200px;
margin: 100px auto; }
.result{
text-align: center;
text-shadow: 0 0 5px #333333;
color:#FFFFFF;
}
</style>
<script> window.onload = function(){ var result = document.getElementsByClassName('result')[0]; var pro = new progress({
width : 200,//进度条宽度
height: 30,//进度条高度
bgColor : "#3E4E5E",//背景颜色
proColor : "#009988",//前景颜色
fontColor : "#FFFFFF",//显示字体颜色
val : 10,//默认值
text:"当前进度为#*val*#%",//显示文字信息
showPresent : true,
completeCallback:function(val){
console.log('已完成');
result.innerHTML = '已完成';
},
changeCallback:function(val){
console.log('当前进度为'+val+'%');
result.innerHTML = '当前进度为'+val+'%';
}
}); document.getElementsByClassName('pro')[0].appendChild(pro.getBody()); setTimeout(function(){ pro.update(50);
setTimeout(function(){ pro.update(10);
setTimeout(function(){ pro.update(100);
setTimeout(function(){ pro.update(0);
},3000);
},3000); },3000);
},3000); }; </script>
</head>
<body>
<div class="pro"></div>
<div class="result"></div>
</body>
</html>
自己写的我也贴出来吧，后来自己写的就是简单的应用了。
<script type="text/javascript">
$(function() { if("${onOff}"=="on"){
document.getElementById("batchId").disabled=true;
}
//异步保存发送
$("#addform").eblueValidate( { submitHandler : function(form) {
$(form).ajaxSubmit({
resetForm : false,
dataType:'json',
success : function(msg) {
if(msg.result==true)
{
pro.update(100);
window.parent.alertExpand({message_param:msg.info});
setTimeout(function(){
document.getElementsByClassName('pro')[0].removeChild(pro.getBody());
},1000); }else{
window.parent.alertExpand({message_param:msg.info,iconCls_param:'error',timeout_param:3000});
setTimeout(function(){
document.getElementsByClassName('pro')[0].removeChild(pro.getBody());
},1000);
}
}
}); }
}); });
var pro1 = document.getElementById("pro1");
var pro ="";
function addSubmit(){
var kddbf = document.getElementById("kddbf").value;
var kcdbf = document.getElementById("kcdbf").value;
var ksdbf = document.getElementById("ksdbf").value;
var imgzip = document.getElementById("imgzip").value;
var sfzid = document.getElementById("sfzid").value;
var fdat = document.getElementById("fdat").value;
if(kddbf.length>0 && kcdbf.length>0 && ksdbf.length>0 && imgzip.length>0 && sfzid.length>0 && fdat.length>0){
pro = new progress({
width : 200,//进度条宽度
height: 30,//进度条高度
bgColor : "#3E4E5E",//背景颜色
proColor : "#009988",//前景颜色
fontColor : "#FFFFFF",//显示字体颜色
val : 10,//默认值
text:"当前进度为#*val*#%",//显示文字信息
showPresent : true,
completeCallback:function(val){
console.log('已完成');
// result.innerHTML = '已完成';
// result.style.display='none';
},
changeCallback:function(val){
console.log('当前进度为'+val+'%');
// result.innerHTML = '当前进度为'+val+'%';
}
});
setTimeout(function(){
pro.update(15);
},3000);
document.getElementsByClassName('pro')[0].appendChild(pro.getBody());
}
//移除disabled可以上传batchId值
$("#batchId").removeAttr("disabled");
$("#addform").attr("action", "<%=contextPath%>/hfims/stuInfo/importStuData.do");
$("#addform").submit();
};
</script>
<div class="pro" id="pro1" align="middle"></div>