Progress Bars, also Fortschrittsanzeigen, sind eine gute Möglichkeit zur Visualisierung von Fortschritten. Eine datumsbasierte Progress Bar, die den Fortschritt von einem Startdatum zum Enddatum visualisiert, habe ich auf meiner neuen Studienseite eingebaut.

Demo

DEMO

HTML:

<progress id="progressbar" value="" max="100"></progress>
<div class="progress-value"></div>
<div class="clear"></div>
<div id="progress-days">
  <p>Vergangene Tage:  <span id="days-spend"></span></p>
  <p>Verbleibende Tage: <span id="days-left"></span></p>
  <p>Tage gesamt:  <span id="days-total"></span></p>
</div>

HTML spielt also nur den Platzhalter für die wichtigen Elemente. Wichtig ist nur, dass der max Wert der Progress Bar auf den gewünschten Wert gesetzt ist. Dieser wird von Javascript ausgelesen.

Apropos, Javascript:

$(document).ready(function() {

/**
 * #########################
 *  Time-Based Progress Bar
 * #########################
 * @name	Time-Based Progress Bar
 * @desc	Datumsbasierte Fortschrittsanzeige 
 * @author	Hannes Schurig
 * @date	2013-06-27
 * @lastmodified	2013-06-30
 * @version	0.1
 *
 * @ref http://studium.hannes-schurig.de
 * @see http://studium.hannes-schurig.de
 */

	// Progress Bar Management
	// nice short introduction: http://www.hongkiat.com/blog/html5-progress-bar/
	var progressbar = '#progressbar',
		startDate = [2012,04,01], endDate = [2015,04,01],
		max = $(progressbar).attr('max'),
		finishedSeconds = 0, finishedPercent = 0, finishedPercentRound = 0,
		daysSpend = daysSince(startDate[0],startDate[1],startDate[2]), 
		daysLeft = daysUntil(endDate[0],endDate[1],endDate[2]),
		daysTotal = daysSpend + daysLeft;

	function calculateProgressedPercent() {
		finishedSeconds = ((new Date() - new Date(startDate[0],startDate[1]-1,startDate[2])) / 1000);
		totalSeconds = daysTotal * 86400; // days total to seconds
		finishedPercentRound = Math.round(((finishedSeconds * 100) / totalSeconds) * 10000) / 10000;
		$(progressbar).val(finishedPercentRound);
		$('.progress-value').html(finishedPercentRound + '%');
		return finishedPercentRound;
	}	
	
	calculateProgressedPercent();
	
	// setting up timer for recalculating the progressbar
	var animate = setInterval(function() {
	    var finishedPercentRound = calculateProgressedPercent();
	    if (finishedPercentRound >= max) {
	        clearInterval(animate);			           
	    }
	}, 5000);
	
	// days until... adapted the following function:
	// see: http://stackoverflow.com/questions/1854410/shopping-days-till-christmas-counter-jquery
	function daysUntil(year, month, day) {
	  var now = new Date(),
		  dateEnd = new Date(year, month - 1, day), // months are zero-based
		  days = (dateEnd - now) /1000/60/60/24;   // convert milliseconds to days
	
	  return Math.round(days);
	}
	// adapted for own daysSince function
	function daysSince(year, month, day) {
	  var now = new Date(),
		  dateStart = new Date(year, month - 1, day), // months are zero-based
		  days = (now - dateStart) /1000/60/60/24;   // convert milliseconds to days
	
	  return Math.round(days);
	}
	
	// dates to html and update
	$('#days-spend').html(daysSpend);
	$('#days-left').html(daysLeft);
	$('#days-total').html(daysTotal);

});

Okay, let’s go through:
In den Zeilen 20 und 21 müsst ihr die ID der Progress Bar und das gewünschte Start- und Enddatum eintragen; der Rest läuft dann von selbst.
Die Zeilen 22 bis 26 errechnen ein paar initiale Werte, die später noch gebraucht werden.
In der Funktion

calculateProgressedPercent()

wird der Prozentwert der bereits verstrichenen Zeit angezeigt. Dieser wird auch direkt als Wert der Progress Bar in Inhalt des Overlays gesetzt und dann zurückgegeben. Funktionalität und Anzeige könnte man hier natürlich trennen.
Die Zeile 31 bestimmt übrigens am Ende die Anzahl der Nachkommastellen des Prozentwertes. An der Stelle

* 10000) / 10000

könnt ihr also Nullen entfernen oder anhängen um den Prozentwert zu verändern.
Zeile 37 führt diese Funktion beim Seitenaufruf ein Mal initial auf.
Zeile 40 bis 45 setzen einen Timer, der alle 5 Sekunden diese Funktion aufruft; bis der Prozentwert den max Wert der Progress Bar überschreitet.
Die 2 Datumsfunktionen errechnen die Anzahl der Tage von 2 Szenarien: Startdatum bis heute und heute bis Enddatum.
Und die letzten 3 Zeilen schreiben diese Tagesanzahl einfach nur zur Übersicht auf die Seite.

Sicherlich lassen sich die Berechnungen und der Code an sich noch optimieren. Aber die Sache läuft ganz rund.