Countdown: Mehrere Zähler aktualisieren

Torben Brodt

Administrator

Lexicon articles: 104

Saturday, June 26th 2010, 11:29am

Content

Abstract

Das Tutorial erklärt, wie man mit JavaScript einen Countdown macht.
Es können beliebig viele Felder gleichzeitig aktualisiert werden. Intervall und Richtung kann einfach angegeben werden.

Article

1. Info

Der Code benutzt das Observer Design Pattern.
Die Geschwindigkeit kann manipuliert werden.

2. Konfiguration

Das Update Interval wird im Konstruktor übergeben. Im Beispiel wird pro Sekunde 1x runtergezählt:

	JavaScript Code
1	var up = new UpdateCounters(-1);

Optional könnt ihr das Updateintervall in Millisekunden auch als 2ten Parameter angeben. Folgendes Beispiel macht ein Update, alle 2 Sekunden.

	JavaScript Code
1	var up = new UpdateCounters(-1, 2000);

Jedes Objekt das aktualisiert werden soll, muss registriert werden. Das funktioniert wie folgt:

	HTML Code
1	<script type="text/javascript">up.push('update1');</script>

Das update1 referenziert einen Container mit der ID "update1". Es kann ein Blockelement (DIV), aber auch ein Inlineelement (SPAN) sein.

	HTML Code
1	<div id="update1">01:02:03</div>

3. HTML Datei

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
	<title>Mehrere Counter runterzählen</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="update-counters.js"></script>
	<script type="text/javascript">
	var up = new UpdateCounters(-1);
	</script>
</head>
<body onload="up.start();">
 
<h2>Das Update ist auf -1 konfiguriert, es wird also runtergezählt</h2>
 
<div id="update1">01:02:03</div>
<script type="text/javascript">up.push('update1');</script>
 
<div id="update2">04:05:06</div>
<script type="text/javascript">up.push('update2');</script>
 
<div id="update3">07:08:09</div>
<script type="text/javascript">up.push('update3');</script>
 
<p>
	<a href="#" onclick="up.fire()">force single update</a> :: 
	<a href="#" onclick="up.start()">start autoupdate</a> ::
	<a href="#" onclick="up.stop()">disable autoupdate</a>
</p>
<p>
	<a href="#" onclick="up.speedUp()">increase speed</a> :: 
	<a href="#" onclick="up.speedDown()">decrease speed</a>
</p>
</body>
</html>

4. JavaScript Datei

JavaScript Code

/**
 * xxx [..] by http://www.easy-coding.de
 * 
 * @param poll	integer		update interval in microsecons
 */
function UpdateCounters(update, poll) {
	this.update = update;
	this.poll = poll ? poll : 1000;
	this.list = [];
	this.timer = null;
	this.format = /(\d+):(\d+):(\d+)/;
 
	/**
	 * adds elem
	 * @param	id		string as id
	 */
	this.push = function(id) {
		this.list.push(id);
	};
 
	/**
	 * gets seconds from string "h:m:s"
	 * parseInt is forced to use decimal system
	 */
	this.fromFormat = function(str) {
		this.format.exec(str);
		return (parseInt(RegExp.$1, 10) * 60 * 60)
			+ (parseInt(RegExp.$2, 10) * 60)
			+ (parseInt(RegExp.$3, 10));
	}
 
	/**
	 * gets string "h:m:s" from seconds
	 */
	this.toFormat = function(s) {
		s = s > 0 ? s : 0;
		var h = m = 0;
		if(s > 59) {
			m = Math.floor(s/60);
			s = s - ( m*60 );
		}
		if(m > 59) {
			h = Math.floor(m/60);
			m = m - ( h*60 );
		}
		if(h < 10) {
			h = "0"+h;
		}
		if(s < 10) {
			s = "0"+s;
		}
		if(m < 10)  {
			m = "0"+m;
		}
		return h +":"+ m +":"+ s;
	}
 
	/**
	 * sends single request
	 * @param loop	boolean		
	 */
	this.fire = function() {
		var i, dom;
		for(i=0; i<this.list.length; i++) {
			dom = document.getElementById(this.list[i]);
			dom.innerHTML = this.toFormat(this.fromFormat(dom.innerHTML) + this.update);
		}
	};
 
	/**
	 * stops auto updater
	 */
	this.stop = function() {
		window.clearTimeout(this.timer);
	};
 
	this.speedUp = function(factor) {
		this.stop();
		this.poll /= factor || 2;
		this.start();
	}
 
	this.speedDown = function(factor) {
		this.stop();
		this.poll *= factor || 2;
		this.start();
	}
 
	/**
	 * starts auto updater
	 */
	this.start = function() {
		this.timer = window.setInterval(function(up) {
			return function() {
				up.fire();
			};
		}(this), this.poll);
	};
}