mehrere unterschiedliche Timer gleichzeitig anzeigen

Shrek · 6. Februar 2004

mehrere unterschiedliche Countdowns gleichzeitig anzeigen

Mein Problem ist das ich auf einer Seite mehrere unterschiedliche Countdowns anzeigen will. Dabei liest Javascript eine Variabel ein. Die Variable gibt die Zeit in Sekunden an. Das Javascript soll dann die Zeit als HH:MM:SS ausgeben. Wobei die Zeit gemäß eines Counters runterlaufen soll. Bei einer Variable klappt das super, jedoch bei mehrern Variabeln nimmt er immer nur die Erste. Ich vermute das Javascript probleme bekommt weil alle Variabeln die Selbe ID haben. Die Möglichkeit die ich kenne ist das ich für jede weiter Variabel eine andere ID vergebe und dann meine Javascriptfunktion immer kopiere.

So hier mal meine HTML-Datei:

Code:

<html>
<head>
<title></title>
</head>
<body OnLoad="start()">
<script type="text/javascript" src="decision.js"></script>
<div id="zeit">6100</div>
<div id="zeit">6100</div>
<div id="zeit">6100</div>
<div id="zeit">6100</div>
<-- und so weiter die Anzahl ist auf 10 festgelegt muss aber nicht 10 sein
</body>
</html>

Die Javascriptdatei beinhaltet:

Code:

function start()
{
var zeit = parseInt(document.getElementById( 'zeit' ).innerHTML);
zaehler( zeit );
}

function zaehler(zeit)
{
    var std = Math.floor( zeit / 3600 );
	var min = Math.floor( ( zeit - std * 3600 ) / 60 );
	var sek = zeit - std * 3600 - min * 60;
    //Stunden
    if ( std >= 10 )
    {

    }
	else if( std == 0)
    {
    	std += "0";
    }
    else
    {
    	std = "0" + std;
    }
    //Minuten
    if ( min >= 10 )
    {

    }
	else if( min == 0)
    {
    	min += "0";
    }
    else
    {
    	min = "0" + min;
    }
    //Sekunden
    if ( sek >= 10 )
    {

    }
	else if( sek == 0)
    {
    	sek += "0";
    }
    else
    {
    	sek = "0" + sek;
    }
    //fertig
    if ( min == 0 && std == 0 && sek == 0)
    {
        document.getElementById( 'zeit' ).innerHTML= "abgeschlossen";
        window.setTimeout( "location=self.location", 1000 );
    }
    else
    {
        document.getElementById( 'zeit' ).innerHTML = std + ":" + min + ":" + sek;
        zeit = zeit - 1;
    	window.setTimeout( "zaehler( " + zeit + " )", 1000 );
    }
}

Ich hoffe ihr könnt mir helfen.

Sven Mintel · 7. Februar 2004

Jo, das ist normal....zum einen gibt es für Javascript nur ein einziges Element mit der ID "zeit"...woher sollte es auch wissen, welches davon es nehmen soll ...weil eine ID eindeutig sein muss... also eigentlich nicht mehrmals vergeben werden darf.
Zum anderen hast du die Variable "zeit".... eine Variable hat einen Wert... um mehrere Werte zu speichern, benutzt man Arrays[].

so sollte es aber trotzdem gehen...(ist zwar nicht ganz koscher, weil es eben wie erwähnt nicht legitim ist, eine ID mehrmals zu vergeben, ..aber was solls

)

Code:

<script type="text/javascript" >
<!--
counterObjs=new Array();

function start()
{
for(i=0;i<document.getElementsByTagName('div').length;++i)
	{
	tmpObj=document.getElementsByTagName('div')[i];
	if(tmpObj.id=='zeit')
		{
		tmpArr=new Array(tmpObj,tmpObj.innerHTML);
		counterObjs.push(tmpArr);
		}
	}
zaehler();
}

function zaehler()
{
for(var a in counterObjs)
	{
	std = Math.floor(counterObjs[a][1]/ 3600 );
	min = Math.floor( (counterObjs[a][1]- std * 3600 ) / 60 );
	sek =counterObjs[a][1]- std * 3600 - min * 60;

	if( std == 0){std += "0";}else if( std <10){std = "0" + std;}
	if( min == 0){min += "0";}else if(min<10){min = "0" + min;}
	if( sek <10){sek = "0" + sek;}
	if (counterObjs[a][1] == 0)
		{
		counterObjs[a][0].innerHTML= "abgeschlossen";
		setTimeout("location.replace(document.location)", 1000 );return;
		}
	else
		{
		counterObjs[a][0].innerHTML = std + ":" + min + ":" + sek;
		counterObjs[a][1]--;
		}
	}
setTimeout( "zaehler()", 1000 );
}
//->
</script>

In start() wird ein Array angelegt, in welchem jeweils paarweise die <div>'s als Objekt und der dazugehörige Wert gespeichert sind... darauf wird dann in zaehler()
in einer Schleife zugegriffen.

Shrek · 8. Februar 2004

Funktioniert leider net.

Ich habe mal selber was mit unterschiedlichen IDs ausprobiert. Jedoch stehe ich jetzt auch wieder vor einem Problem. Javascript meldet keine Fehler aber der Countdown läuft einfach net.

Html Code:

Code:

<html>
<head>
  <title></title>
</head>
<body OnLoad="start()">
<script type="text/javascript" >
<!--
function start()
{
    var zeit = new Array();
    for(x=1;x<5;x++)
    {
        if ( document.getElementById( "zeit"+x ) )
        {
        	zeit[x] = parseInt(document.getElementById( 'zeit'+x ).innerHTML);
	        zaehler( "zeit"+x,zeit[x] );
        }
    }
}

function zaehler(idname,zeit)
{
    var std = Math.floor( zeit / 3600 );
    var min = Math.floor( ( zeit - std * 3600 ) / 60 );
    var sek = zeit - std * 3600 - min * 60;
    //Stunden
    if ( std >= 10 )
    {

    }
	else if( std == 0)
    {
    	std += "0";
    }
    else
    {
    	std = "0" + std;
    }
    //Minuten
    if ( min >= 10 )
    {

    }
    else if( min == 0)
    {
    	min += "0";
    }
    else
    {
    	min = "0" + min;
    }
    //Sekunden
    if ( sek >= 10 )
    {

    }
	else if( sek == 0)
    {
    	sek += "0";
    }
    else
    {
    	sek = "0" + sek;
    }
    //fertig
    if ( min == 0 && std == 0 && sek == 0)
    {
        document.getElementById( 'idname' ).innerHTML= "abgeschlossen";
        window.setTimeout( "location=self.location", 1000 );
    }
    else
    {
        document.getElementById( 'idname' ).innerHTML = std + ":" + min + ":" + sek;
        zeit = zeit - 1;
    	window.setTimeout( "zaehler( " + idname + "," + zeit + " )", 1000 );
    }
}
-->
</script>
<div id="zeit1">6100</div>
<div id="zeit2">5100</div>
<div id="zeit3">4100</div>
<div id="zeit4">3100</div>

</body>
</html>

Ich weiss nicht was ich falsch gemacht habe und hoffe ihr könnt mir helfen.

Sven Mintel · 8. Februar 2004

Mag sein, dass es so nicht nicht läuft, das ist aber auch nicht der von mir gepostete Code... der funktioniert.

Shrek · 8. Februar 2004

Dein Code funktionierte bei mir net. Hab ich ja oben schon beschrieben. Aber du beweist mir ja das Gegenteil. Ok ich schau mir deinen Quelltext nochmal genau an.

Danke

Sven Mintel · 9. Februar 2004

Tut mir leid... aber was funktioniert in dem Beispiel nicht? .... mit welchem Browser?
Bei deinem Code kommt sehr wohl eine Fehlermeldung,

Zeile 73,Zeichen 9,document.getElementById('idname') ...ist kein Objekt

...ist es auch nicht

Shrek · 9. Februar 2004

Super jetzt funktioniert alles. Das Problem war nur das mir mein PHP Editor die Vorschau im veralteten und nicht benutzten IE anzeigt. Als ich dein Beispiel mit Mozilla im Web sah funktionierte es super.

Eine Frage habe ich jedoch noch. Wenn ich das Javascriptt in eine externe Datei speichere und diese dann in meinen HTML Code importiere, zeigt er mir einen Fehler in Zeile 7 an. Ich vermute das er die global deklarierte Array-Variabel nicht erkennt. Wenn es keine andere Möglcihkeit gibt kann ich den JS-Text auch direkt in HTML schreiben. Ich würde es jedoch lieber in eine externen Datei schreiben.

Danke für alles

Sven Mintel · 9. Februar 2004

Ob extern oder intern ist eigentlich egal, die Variablen/Objekte sind gleichbleibend vorhanden. Da muss ein anderer Fehler drinn sein.... hast du die <script>-Tags und Kommentarklammern aus dem externen Script entfernt...und was besagt die Fehlermeldung.....?

Apropos IE.. das sollte eigentlcih ab IE5.0 problemlos laufen, hast du etwa noch einen älteren zuhause

Shrek · 9. Februar 2004

Ok, meine HTLM-Site sieht so aus:

Code:

<html>
<head>
<title>test</title>
</head>
<body onload="start()">
<script language=\"JavaScript\" src=\"test.js\"></script>
<div id="zeit">6100</div>
<div id="zeit">5100</div>
<div id="zeit">4100</div>
<div id="zeit">3100</div>
</body>
</html>

Und meine Javascriptdatei "test.js" beinhaltet diesen Text:

Code:

counterObjs=new Array();

function start()
{
for(i=0;i<document.getElementsByTagName('div').length;++i)
	{
	tmpObj=document.getElementsByTagName('div')[i];
	if(tmpObj.id=='zeit')
		{
		tmpArr=new Array(tmpObj,tmpObj.innerHTML);
		counterObjs.push(tmpArr);
		}
	}
zaehler();
}

function zaehler()
{
for(var a in counterObjs)
	{
	std = Math.floor(counterObjs[a][1]/ 3600 );
	min = Math.floor( (counterObjs[a][1]- std * 3600 ) / 60 );
	sek =counterObjs[a][1]- std * 3600 - min * 60;

	if( std == 0){std += "0";}else if( std <10){std = "0" + std;}
	if( min == 0){min += "0";}else if(min<10){min = "0" + min;}
	if( sek <10){sek = "0" + sek;}
	if (counterObjs[a][1] == 0)
		{
		counterObjs[a][0].innerHTML= "abgeschlossen";
		setTimeout("location.replace(document.location)", 1000 );return;
		}
	else
		{
		counterObjs[a][0].innerHTML = std + ":" + min + ":" + sek;
		counterObjs[a][1]--;
		}
	}
setTimeout( "zaehler()", 1000 );
}

So zur Fehlermeldung:
Mozilla meldet keine Fehler, jedoch stehen dort meine Werte in ms. Der IE V6 meldet "Objekt erwartet" in Zeile "5" Zeichen "1".

Sven Mintel · 10. Februar 2004

wozu hast du da im <script>-Tag die Anführungszeichen maskiert?

Code:

<script type="text/javascript"src="test.js"></script>

mehrere unterschiedliche Timer gleichzeitig anzeigen

Shrek

Mitglied

Sven Mintel

Mitglied

Shrek

Mitglied

Sven Mintel

Mitglied

Shrek

Mitglied

Sven Mintel

Mitglied

Shrek

Mitglied

Sven Mintel

Mitglied

Shrek

Mitglied

Sven Mintel

Mitglied

Neue Beiträge