https://pictriev.com/js/lin-gauge.js

1
2function LinGauge(gaugeId) {
3	this._id = gaugeId ;
4	this._width = 200 ;
5	this._height = 15 ;
6	this._val = 0 ;
7	this._timer = false ;
8	$(gaugeId).html("<div class='gauge-left'></div><div class='gauge-right'></div><div class='gauge-text'>&nbsp;50%</div><div class='gauge-end'></div>")
9	
10	this.set = function() {
11		var val = arguments[0] ;
12		if (val < 0 || val > 100) return ;
13		
14		var duration = 0 ; if (arguments.length > 1) { duration = arguments[1] ; }
15		this._val = val ;
16
17		if (duration == 0) {
18			var w = Math.floor( this._width * val / 100 + 0.5 ) ;
19			$(this._id + " .gauge-left").css('width', w) ;
20			$(this._id + " .gauge-right").css('width', this._width - w) ;
21			$(this._id + " .gauge-text").html('&nbsp' + val + '%') ;
22		}
23		else {
24			if (this._timer) return ;
25			
26			var func = function(){
27				var gauge = func.self ;
28
29				if (typeof func.gaugeLeft == 'undefined') func.gaugeLeft = $(gauge._id + " .gauge-left") ;
30				if (typeof func.gaugeRight == 'undefined') func.gaugeRight = $(gauge._id + " .gauge-right") ;
31				if (typeof func.gaugeText == 'undefined') func.gaugeText = $(gauge._id + " .gauge-text") ;
32
33				if (typeof func.val == 'undefined') {
34					var w1 = func.gaugeLeft.css('width') ;
35					w1 = parseInt( w1.replace("px", '') ) ;
36					func.val = w1 * 100 / gauge._width ;
37				}
38
39				var val = gauge._val ;
40				if (val == func.val) {
41					clearInterval(gauge._timer) ;
42					gauge._timer = false ;
43					return ;
44				}	
45
46				var delta = 100.0 / gauge._width ;
47				if (delta < 1) delta = 1 ;
48
49				if (Math.abs(func.val - val) <= delta) func.val = val ;
50				else if (func.val > val) func.val -= delta ;
51				else func.val += delta ;
52				
53				var w1 = Math.floor( gauge._width * func.val / 100 + 0.5 ) ;
54				func.gaugeLeft.css('width', w1) ;
55				func.gaugeRight.css('width', gauge._width - w1) ;
56				func.gaugeText.html('&nbsp' + Math.floor(func.val + 0.5) + '%') ;
57			} ;
58			func.self = this ;
59			
60			this._timer = setInterval(func, duration) ;
61		}
62	}
63	
64	this.option = function() {
65		if (arguments.length == 0) return false ;
66		
67		var oname = arguments[0] ;
68		if (arguments.length == 1) {
69			if (oname == 'width') return this._width ;
70			else if (oname == 'height') return this.height ;
71			else return false ;		// ERROR
72		}
73		else {
74			var oval = arguments[1] ;
75			if (oname == 'width') {
76				if (this._width != oval) {
77					this._width = oval ;
78					this.set(this._val) ;
79				}
80			}
81			else if (oname == 'height') {
82				if (this._height != oval) {
83					this._height = oval ;
84					$(this._id + " .gauge-left").css('height', oval) ;
85					$(this._id + " .gauge-right").css('height', oval) ;
86					$(this._id + " .gauge-text").css('font-size' + oval) ;
87				}
88			}
89		}
90		return this ;
91	} ;
92	
93	return this ;	
94}
95/*
96	var g = new LinGauge('#gauge-1') ;
97	g.option('width', 100).set(80, 20) ;
98*/