首页 Javascript 正文
193

js进度条

  • yiqingpeng
  • 2015-07-02
  • 0
  •  
用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();

正在加载评论...