用javascript写了一个简单的进度条
var progressBar = function (div){
function resetStyle(ele){
var style = ele.style;
style.width = '0px';
style.height = '50%';
style.border = '0px';
style.padding = '0px';
style.margin = '0px';
}
var div1 = document.createElement('div');
resetStyle(div1);
div1.style.background = '#B3E761';
if(Object.prototype.hasOwnProperty.call(div1.style,'-moz-border-radius')){div1.style['-moz-border-radius'] = '3px 3px 0px 0px';}//IE中Dom对象没有hasOwnProperty方法,所以只好借用Object对象的这个方法了。
if(Object.prototype.hasOwnProperty.call(div1.style,'-webkit-border-radius')){div1.style['-webkit-border-radius'] = '3px 3px 0px 0px';}
var div2 = document.createElement('div');
resetStyle(div2);
div2.style.background = '#84D700';
if(Object.prototype.hasOwnProperty.call(div2.style,'-moz-border-radius')){div2.style['-moz-border-radius'] = '0px 0px 3px 3px';}
if(Object.prototype.hasOwnProperty.call(div2.style,'-webkit-border-radius')){div2.style['-webkit-border-radius'] = '0px 0px 3px 3px';}
var frag = document.createDocumentFragment();
frag.appendChild(div1);
frag.appendChild(div2);
div.appendChild(frag);
var divStyle = div.style;
divStyle.border = '0px';
divStyle.padding = '0px';
divStyle.margin = '0px';
divStyle.background = '#E0E0E0';
if(Object.prototype.hasOwnProperty.call(divStyle,'-moz-border-radius')){divStyle['-moz-border-radius'] = '3px';}
if(Object.prototype.hasOwnProperty.call(divStyle,'-webkit-border-radius')){divStyle['-webkit-border-radius'] = '3px';}
return {
step: 1,
setStep: function(intSetp){
this.setp = +intSetp;
},
init: function(){
this.setPercentValue('0%');
},
setPercentValue: function(val){
div1.style.width = div2.style.width = val;
},
showDemo: function(){
var me=this, t = setInterval((function(p,f){
return function(){
p = (p+0.13*p)>=100?100:(p+0.15*p);
var percent = Math.floor(p)+'%';
me.setPercentValue(percent);
$('#percent').text(percent);
if(p>=100) {clearInterval(t),typeof(f)=='function' && f()};
};
})(1,function(){}), 100);
}
};
};
progressBar(document.getElementById('progress_bar')).showDemo();