Es können beliebig viele Felder gleichzeitig aktualisiert werden. Intervall und Richtung kann einfach angegeben werden.
== Info ==
Der Code benutzt das Observer Design Pattern.
Die Geschwindigkeit kann manipuliert werden.
== Konfiguration ==
Das Update Interval wird im Konstruktor übergeben. Im Beispiel wird pro Sekunde 1x runtergezählt:
Optional könnt ihr das Updateintervall in Millisekunden auch als 2ten Parameter angeben. Folgendes Beispiel macht ein Update, alle 2 Sekunden.
Jedes Objekt das aktualisiert werden soll, muss registriert werden. Das funktioniert wie folgt:
Das update1 referenziert einen Container mit der ID "update1". Es kann ein Blockelement (DIV), aber auch ein Inlineelement (SPAN) sein.
== HTML Datei ==
Alles anzeigen
== JavaScript Datei ==
Alles anzeigen
== Demo ==
demo.easy-coding.de/javascript/update-counters/
Download: demo.easy-coding.de/javascript/update-counters/download.zip
Der Code benutzt das Observer Design Pattern.
Die Geschwindigkeit kann manipuliert werden.
== Konfiguration ==
Das Update Interval wird im Konstruktor übergeben. Im Beispiel wird pro Sekunde 1x runtergezählt:
Optional könnt ihr das Updateintervall in Millisekunden auch als 2ten Parameter angeben. Folgendes Beispiel macht ein Update, alle 2 Sekunden.
Jedes Objekt das aktualisiert werden soll, muss registriert werden. Das funktioniert wie folgt:
Das update1 referenziert einen Container mit der ID "update1". Es kann ein Blockelement (DIV), aber auch ein Inlineelement (SPAN) sein.
== HTML Datei ==
Quellcode
- <!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>
== JavaScript Datei ==
Quellcode
- /**
- * 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);
- };
- }
== Demo ==
demo.easy-coding.de/javascript/update-counters/
Download: demo.easy-coding.de/javascript/update-counters/download.zip
8.549 mal gelesen