✔ mal wieder countdown.... ^^

D

dennisnowack

Mitglied
Hi Leute!

Ja, google kenne ich und ja, ich habe sogar "suchen" hier gefunden.... Hilft alles nix...

Ich habe eine fortwährend anders gefüllte Tabelle (brosergame - arena) und zZ stehen zu jedem Helden die Cooldowns in einem <td> daneben. Eben diese wollte ich in javascript portieren, damti die COuntdowns herunterzählen, ohne neuladen zu müssen.
Die Variablen mit den Cooldowns kann ich übergeben, kein Problem. Nur sämtliche Countdown-Funktionen die ich gefunden habe, beziehen sich IMMER aus einen timer, KEINE Funktion kann scheinbar mehrere Timer händeln. Und die Funktionen vorher definieren ist UNMÖGLICH (denke ich), da ich nie weiß, wieviele Countdowns benötigt werden... Kann jemand helfen?

Nachfolgend ein abgespecktes Mini-Beispiel, anhand dessen ihr auch basteln könnt:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head></head>
<body>
<?php

$i=1;
$a[1]=100; //Beispielcountdowns
$a[2]=50;
$a[3]=155;
$n[1]="Hero-1";
$n[2]="Hero-2";
$n[3]="Hero-n";

while($i<=3) //Wie groß das Array letzlich ist, ist unbekannt
{
echo $a[$i] . "Countdown: ........";
$i++;
}

?>
</body>
</html>


Danke im Voraus!
 
Zuletzt bearbeitet:
hat sich erledigt :)

für alle, die es jetzt oder später ebenfalls benötigen, hier ein Beispiel:

<HTML>
<head>
<script language="JavaScript">
<!--
function countdown(id_name, time) {
document.getElementById(id_name).innerHTML = time;
if (time != 0) {
window.setTimeout("countdown('" + id_name + "', " + (time-1) + ")", 1000);
}
}
//-->
</script>
</head>
<body>
<div><p id="clock1"><script language="javascript">countdown('clock1', 45);</script></p></div><br>
<div><p id="clock2"><script language="javascript">countdown('clock2', 89);</script></p></div><br>
<div><p id="clock3"><script language="javascript">countdown('clock3', 34);</script></p></div><br>
</body>
</HTML>

Gruß, Dennis
 
Geht alles ;)

Anbei mal meine Version hab eben gemerkt das Intervalle in einen solchen Zeitpunkt nicht sehr günstig sind , mit setTimeout klappt es wesentlich besser.

man übergibt quasi nen kompletten Zeitstring wobei man bei den Stunden wohl etwas großzügiger rangehen sollte sobald du es in ein Browsergame einbauen möchtest.

Und arbeitet einfach nach dem Schema hh:mm:ss als String reinjagen und fertig :)
Code: 
<html>
<head>
<script type="text/javascript">
/**
* JavaScript Eieruhr oder auch Timer 
* Beispiel 
* var t = new Counter(id);
*  t.setTime('00:00:05');
*/			
function Counter(outPut,delay) {
				
    var time = new Array();
    var seconds = 0;
    var timeInterval = null;
    var out = outPut;
    				
 /**
    * einen Zeitraum übergeben von dem begonnen werden soll zurück zu zählen
    * Überprüfung mittels eines Regulären Ausdrucks ob es sich um eine gültige Zeitangabe handelt hh:mm:ss
    * Umrechnung in Sekunden
    * @access public
    * @param String Zeit
    * @return void
    */
    this.setTime = function(timeString) {
        var pattern = /((2[0-3])|[01][0-9]):([0-5][0-9]):([0-5][0-9])$/;
        if(!timeString.match(pattern)) {
            alert("kein g&uuml;ltiges Zeitformat angegeben");
            return 1;
        }
					
        try {
            document.getElementById(outPut).innerHTML = timeString;
        } catch (e) {
        }
        					
        time = timeString.split(':');
        seconds = parseInt(time[2]);
        seconds += parseInt(time[1])*60;
        seconds += parseInt(time[0])*3600;

        window.setTimeout(countBack,980);	
    }
				
 /**
    * Die Zeit zurückzählen
    * @access private
    * @return void
    */ 
    function countBack () {
					
        seconds--;
        var sec  = seconds%60; 
        var min  = Math.floor(seconds/60)%60;
        var hour = Math.floor(seconds/3600)%24; 
        	
        if(seconds > 0 ) {
            try {
                document.getElementById(outPut).innerHTML = ((hour<10)?0:'')+hour+':'+
                                                            ((min<10)?0:'')+min+':'+
                                                            ((sec<10)?0:'')+sec;
                                                                            
                window.setTimeout(countBack,980);
            } catch (e) {
                alert("es handelt sich hiebei nun nicht um ein Input feld oder die ID ist nicht gegeben");
            }
            
        }
}

window.onload = function () {
    var counter1 = new Counter('counter1');
        counter1.setTime('23:31:26');
    var counter2 = new Counter('counter2');
        counter2.setTime('13:31:45');
    var counter3 = new Counter('counter3');
        counter3.setTime('07:57:03');
}
</script>
</head>
<body>
    <div id="counter1"></div>
    <div id="counter2"></div>
    <div id="counter3"></div>
</body>
</html>

Edit: Na da hab ich so lange dran rumeditiert und den Interval durch das Timeout ersetzt da hattest es nun schon selber fertig ;) Eventuell hilft Dir das ja auch nen bissel.
 
Zuletzt bearbeitet:
Klar, sehr sogar, danke :)

Denn die Multi-Variante benötigte ich für die Arena, kurze Intervalle, Minuten reichen völligst ^^ Dinge wie Kaserne, hast du Recht, Stunden und co (dafür einzelne Timer..) :)
von daher:

vielen Dank und viele Grüße!


p.s.: Spiel ist bereits fertig und läuft, soll "nur" an Comfort gewinnen ^^ von daher, evtl bis die Tage =D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück