Javasript: Countdown - anders als in ein Textfeld?

Robbat

Robbat

Aktives Mitglied
Thread Starter
Dabei seit
24.09.2004
Beiträge
233
Reaktionspunkte
0
Hallo!
Ich habe so ein tolles Javascript, das schön alle Tage, Stunden, Minuten und Sekunden bis zu einem festgelegten Datum runterzählt... Allerdings ist in dem Dokument wo ich das her hab die Anzeige in ein Textfeld eingebunden mit hilfe der 'name="x"'-Angabe... Ich hoffe ihr könnt mir folgen ^^
Ich finde das Textfeld drumherum aber doof und hässlich und wollte fragen ob man des vielleicht ganz normal in eine Tabelle einbauen könnte oder so das man halt nur die Schirft auf dem Hintergrund sieht... Wenn ja, wie??
Wär ganz nett, wenn ihr eine einfache Erklärung hättet, da ich so ziemlich keine Ahnung von Javascript hab *g* Danke!

Robbat
 
Wenn du HTML benutzt und nicht XHTML geht:

<div id="countdown"></div>

und im Javascript-Teil

var e = document.getElementById("countdown");
if (e && e.innerHTML){
e.innerHTML = datumswert;
}

datumswert ist dabei die Variable, die den Wert des Countdowns enthält, und die bisher dem Wert des Inputfeld zugewiesen wurde.

innerHTML ist zwar nicht offizieller DOM Standard, wird aber von allen relevanten Browsern unterstützt.

Statt eines DIVs kannst du auch ein P, SPAN, TD oder was auch immer benutzen.
 
Du kannst es auch *mit* dem üblichen Textfeld machen.
Dann aber, um den Rahmen zu entfernen (oder andere Hintergrund-/Textfarbe) einfach dem Feld per CSS die neuen Werte vergeben.

Bsp:
Das Input-Feld würde in etwa so lauten:
...form blabla - wie gewohnt...
...div blabla - wie gewohnt...
<input class="meintextfeld" type="text" size="38" value="TestText TestText">

Und das CSS oben in der HEAD-Sektion dazu in etwa so:
<style type="text/css">
<!--
.meintextfeld {font-size: xx-small; background-color: #000000; line-height: 9pt; color: #0099FF; font-family: Verdana, Arial, Helvetica, sans-serif; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; top: 0px; clip: rect( ); text-align: right}
-->
</style>

Da gibts aber noch viel mehr Einstellungen, die man per CSS einstellen kann, wie relative/absolute Position usw.
Im Bsp oben ist grauer Text auf schwarz, Textfeld rechts ausgerichtet, OHNE Rahmen, ab Position 0 Pixel von oben.
 
Zuletzt bearbeitet:
Mhh... Also Noggers Anleitung check ich nicht und danke an XVCD aber es soll halt kein Textfeld sein! Hab mir hier mal was aus verschiedenen Scripts zusammengebastelt, aber das wird nur immer für ganz kurze Zeit eingeblendet und läuft nich mehr "live" ab...
Hier mal der Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Unbenannte Seite</title>
	</head>

	<body bgcolor="#ffffff">
		<table width="64" border="0" cellspacing="0" cellpadding="0" align="center">
			<tr>
				<td>
						<script language="JavaScript">
	var jahr = 2005;
	var monat = 04;
	var tag = 29;
	var stunde = 0;
	var minute = 0;
	var sekunde = 0;
	
	function VerbleibendeZeit()
	{
		heute = new Date();
		bis = new Date();
		bis.setYear(jahr); 
		bis.setMonth(monat-1); 
		bis.setDate(tag); 
		bis.setHours(stunde); 
		bis.setMinutes(minute); 
		bis.setSeconds(sekunde);
	
		Tage = Math.floor( (bis - heute) / 86400000 );
		Stunden = Math.floor( (bis - heute) / 3600000 - (24 * Tage) );
		Minuten = Math.floor( (bis - heute) / 60000 - (1440 * Tage) - (60 * Stunden) );
		Sekunden = Math.floor( (bis - heute) / 1000 - (86400 * Tage) - (3600 * Stunden) - (60 * Minuten) );
	
		eTage = (Tage==1)  ? " :: " : " Tage, "
		eStunden = (Stunden==1) ? " :: " : " Stunden, ";
		eMinuten = (Minuten==1) ? " :: " : " Minuten & ";
		eSekunden = (Sekunden==1) ? " " : " Sekunden! ";
	
		window.setTimeout("VerbleibendeZeit();", 1000);
		document.write("" + Tage + eTage + Stunden + eStunden + Minuten + eMinuten + " " + Sekunden + eSekunden + "");
	}
	VerbleibendeZeit();
                        </script>
				</td>
			</tr>
		</table>
	</body>

</html>

Wie mach ichs, dass er so wie im Textfeld die Sekunden richtig schön zählt???

Hier das Original mit Textfeld:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>

	<body>
		<form name="Form_Zeit">
			<input name="Zeit" type="text" border="0" style="padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; font-family:helvetica; font-size:20px; color:#000000; font-weight:bold; background-color:#DFE7E9; float:left" size="50">
		</form>
		<script language="JavaScript">
	var jahr = 2005;
	var monat = 04;
	var tag = 29;
	var stunde = 0;
	var minute = 0;
	var sekunde = 0;
	
	function VerbleibendeZeit()
	{
		heute = new Date();
		bis = new Date();
		bis.setYear(jahr); 
		bis.setMonth(monat-1); 
		bis.setDate(tag); 
		bis.setHours(stunde); 
		bis.setMinutes(minute); 
		bis.setSeconds(sekunde);
	
		Tage = Math.floor( (bis - heute) / 86400000 );
		Stunden = Math.floor( (bis - heute) / 3600000 - (24 * Tage) );
		Minuten = Math.floor( (bis - heute) / 60000 - (1440 * Tage) - (60 * Stunden) );
		Sekunden = Math.floor( (bis - heute) / 1000 - (86400 * Tage) - (3600 * Stunden) - (60 * Minuten) );
	
		eTage = (Tage==1)  ? " :: " : " Tage, "
		eStunden = (Stunden==1) ? " :: " : " Stunden, ";
		eMinuten = (Minuten==1) ? " :: " : " Minuten & ";
		eSekunden = (Sekunden==1) ? " " : " Sekunden! ";
	
		window.document.Form_Zeit.Zeit.value = "        " + Tage + eTage + Stunden + eStunden + Minuten + eMinuten + " " + Sekunden + eSekunden + "";
		window.setTimeout("VerbleibendeZeit();", 1000);
	}
	VerbleibendeZeit();
                        </script>
	</body>

</html>

Hoffentlich könnt ihr mir helfen!
 
Das / Dein ;) Problem ist das Document.write. Das wird nur einmalig ausgeführt und zwar exakt dann, wenn die Seite aufgerufen wird!
Eine Wiederholung der Textausgabe geht eben NUR mit dem Textfeld, welches aber wenn Du es per CSS veränderst *nicht* als solches zu erkennen ist! Nur dieses kann auf Kommando vom Browser neu gerendert werden und funktioniert so nicht per Document.write.

Andere Möglichkeiten:
- als Frame, daß sich selbst updatet (google nach: setTimeout) *)
- als iFrame *)
- Flash / Java **)
*) = unelegante Lösung
**) = overkill
oder eventuell per document.xxxx.innerHTML.text oder so ähnlich. Und das an ein mouseover in der Body-Sektion koppeln. D.h. immer wenn die Maus bewegt wird, wird der Text berechnet und geändert. Aber das ist die Spaghetti und Bad-Code Methode :)

Thomas.
 
Zuletzt bearbeitet:
XVCD schrieb:
Und das CSS oben in der HEAD-Sektion dazu in etwa so:
<style type="text/css">
<!--
.meintextfeld {font-size: xx-small; background-color: #000000; line-height: 9pt; color: #0099FF; font-family: Verdana, Arial, Helvetica, sans-serif; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; top: 0px; clip: rect( ); text-align: right}
-->
</style>
Zum Vergrößern anklicken....

*Hualp*...

Welches Programm schreibt den sowas?
 
Robbat schrieb:
Hab mir hier mal was aus verschiedenen Scripts zusammengebastelt,
Zum Vergrößern anklicken....

Man merkts.

PHP: 
...
<table width="64" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
       <span id="countdown"></span>
       <script type="text/javascript">
         ...	
           var e = document.getElementById("countdown");
           if (e && e.innerHTML){
             e.innerHTML = "" + Tage + eTage + Stunden + eStunden + Minuten + eMinuten + " " + Sekunden + eSekunden;
           }
           window.setTimeout("VerbleibendeZeit();", 1000);
         }
         VerbleibendeZeit();
       </script>
...
 
Zuletzt bearbeitet:
Nogger schrieb:
*Hualp*..
Zum Vergrößern anklicken....


Ja, das ist grueselig lang. Aber warum 'Hualp'?? Was stimmt denn damit nicht?
Font Größe/Farbe/Schriftart, Feldhöhe, (3D-)Ränder weg, Clipping an, Position, Textausrichtung - is doch alles drin, was rein muß(te) ???!
 
XVCD schrieb:
Was stimmt denn damit nicht?
Zum Vergrößern anklicken....

> <!--
> -->

Sind unnötig und bewirken bei XHTML zudem, daß die Style Deklarationen auch wirklich auskommentiert und nicht verwendet werden.

> font-size: xx-small;

Argh, Lupengröße. Kann man natürlich machen, wenn man will.

> line-height: 9pt;

"Absolute length units are only useful when the physical properties of the output medium are known." (und ist zudem auf manchen Browsers fehlerhaft implementiert)

9pt kann größer oder auch kleiner sein als xx-small.

> border-style: none; border-top-width: 0px; border-right-width: 0px;
> border-bottom-width: 0px; border-left-width: 0px;

Entspricht border: none;

> top: 0px;

top hat keine Wirkung bei position: static

> clip: rect( );

Syntaxfehler, Clipbereich nicht angegeben. Unnötig dazu.

Styles sollten immer so einfach wie möglich sein, damit man sieht, was da überhaupt wirklich passiert.

Code: 
<style type="text/css">
.meintextfeld {
  background-color: #000000; 
  color: #0099FF; 
  border: none; 
  text-align: right;
}
</style>
 
Hey, danke hab jetzt hier mal eine Version, die in Safari funktioniert, allerdings in keinem anderen Browser, geschweige denn auf einem Windoofs-Rechner... Könnt ihr mir das so anpassen, damit es überall funktionier??? Hier die komplette Datei:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Unbenannte Seite</title>
		<script language="JavaScript">
	var jahr = 2005;
	var monat = 04;
	var tag = 29;
	var stunde = 0;
	var minute = 0;
	var sekunde = 0;
	
	function VerbleibendeZeit()
	{
		heute = new Date();
		bis = new Date();
		bis.setYear(jahr); 
		bis.setMonth(monat-1); 
		bis.setDate(tag); 
		bis.setHours(stunde); 
		bis.setMinutes(minute); 
		bis.setSeconds(sekunde);
	
		Tage = Math.floor( (bis - heute) / 86400000 );
		Stunden = Math.floor( (bis - heute) / 3600000 - (24 * Tage) );
		Minuten = Math.floor( (bis - heute) / 60000 - (1440 * Tage) - (60 * Stunden) );
		Sekunden = Math.floor( (bis - heute) / 1000 - (86400 * Tage) - (3600 * Stunden) - (60 * Minuten) );
	
		eTage = (Tage==1)  ? " Tage, " : " Tage, "
		eStunden = (Stunden==1) ? " Stunden, " : " Stunden, ";
		eMinuten = (Minuten==1) ? " Minuten & " : " Minuten & ";
		eSekunden = (Sekunden==1) ? " Sekunden " : " Sekunden ";
	
**********var e = document.getElementById("countdown"); 
***********if (e && e.innerHTML){ 
*************e.innerHTML = "" + Tage + eTage + Stunden + eStunden + Minuten + eMinuten + " " + Sekunden + eSekunden; 
***********} 
***********window.setTimeout("VerbleibendeZeit();", 1000); 
*********} 
*********VerbleibendeZeit(); 
                        </script>
	</head>

	<body bgcolor="#ffffff">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
			<tr>
				<td align="center" valign="middle">
					<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
			<tr>
				<td>
					<div id="countdown" align="center"> </div></td>
			</tr>
		</table>
				</td>
			</tr>
		</table>
	</body>

</html>
 
Nogger schrieb:
Styles sollten immer so einfach wie möglich sein, damit man sieht, was da überhaupt wirklich passiert.
Zum Vergrößern anklicken....
Danke schön! Deine Änderungen werde ich mir mal zu Gemüte führen!

@Robbat:
Probier das mal - lag bei mir noch auf der Pladde rum. k.A. woher ich das habe... :)

<html>
<head>
<script language="JavaScript">
var Temp2;
var timerID = null;
var timerRunning = false;
function showtime() {
now = new Date();
var CurHour = now.getHours();
var CurMinute = now.getMinutes();
var CurMonth = now.getMonth();
var CurDate = now.getDate();
var CurYear = now.getYear();
var CurSecond = now.getSeconds();
now = null;
Hourleft = 23 - CurHour; // Ziel-Stunde
Minuteleft = 59 - CurMinute; // Ziel-Minute
Secondleft = 59 - CurSecond; // Ziel-Sekunde
var Yearleft = 105 - CurYear; // Ziel-Jahr (2005 = 105, 2006 = 106 usw.)
var Monthleft = 3 - CurMonth; // Ziel-Monat; immer Monatsnummer MINUS 1 ! (k.A. warum...)
var Dateleft = 28 - CurDate; // Ziel-Tag - immer einen abrechnen, da ja bis 'Tag davor' 23:59:59 berechnet wird
if (Yearleft!=1) {var ys="e"} else {var ys=""};
if (Monthleft!=1) {var mos="e"} else {var mos=""}
if (Dateleft!=1) {var ds="e"} else {var ds=""}
if (Hourleft!=1) {var hs="n"} else {var hs=""}
if (Minuteleft!=1) {var mis="n"} else {var mis=""}
if (Secondleft!=1) {var ss="n"} else {var ss=""}
Temp3=Yearleft+' Jahr'+ys+', '+Monthleft+' Monat'+mos+', '+Dateleft+' Tag'+ds+', '+Hourleft+' Stunde'+hs+', '+Minuteleft+' Minute'+mis+', '+Secondleft+' Sekunde'+ss
document.form1.textfeld.value=Temp3;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}

var timerID = null;
var timerRunning = false;

function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}

function startclock () {
stopclock();
showtime();
}
</script>
</head>

<body onload="startclock()">
<form name="form1" action="">
<input type="text" size="60" name="textfeld"> bis zum 29.04.2005 0:00 Uhr
</form>
</body>
</html>
 
Zuletzt bearbeitet:
Funktioniert auch sehr gut, ist aber halt wieder ein Textfeld und gerade das wollte ich ja weghaben... Kannst du meins (das was ich als letztes gepostet hab) nicht so anpassen, damit es auch in anderen Browsern und auf einem Windows funktioniert!? Wär echt super... Ich versuche deins mal anzupassen... :)
 
Robbat schrieb:
Funktioniert auch sehr gut, ist aber halt wieder ein Textfeld und gerade das wollte ich ja weghaben...
Zum Vergrößern anklicken....

Wie oben bereits erwähnt:
Unter der "Head" Sektion das einfügen:

<style type="text/css">
.meintextfeld {
color: #0099FF;
border: none;
border-style: none;
text-align: right;
}
</style>

und unten, die Input-Zeile muss so lauten:

<input type="text" size="60" name="textfeld" class="meintextfeld"> bis zum 29.04.2005 0:00 Uhr

und der Rahmen ward nicht mehr gesehen. Jedenfalls im IE und Firefox.
Beim Safari und gff. Opera ist er noch da, keine Ahnung warum denen das nicht schmeckt.

Ebenso könnte die Berechnung (das Jahr) unter Win nicht ganz stimmen. Ggf dann die Jahreszahl ändern (statt 105 -> 2004 o.ä.). Kannst Dir ja dort den entsprechenden Wert (CurYear) per "alert (CurYear);" ausgeben lassen; dann weißt Du, was Du abziehen mußt/wie das Differenzjahr lautet (05 oder 2005).. Je nachdem, was der Webserver zurückgibt.
Oder eben das ganze formatiert per Maske berechnen lassen.
 
Zuletzt bearbeitet:
Robbat schrieb:
Hey, danke hab jetzt hier mal eine Version, die in Safari funktioniert, allerdings in keinem anderen Browser, geschweige denn auf einem Windoofs-Rechner...
Zum Vergrößern anklicken....

Funktioniert hier mit Firefox und Opera problemlos.

Auch wenn du den Countdown startest, bevor das <span> Element überhaupt erzeugt wurde. Gut, daß ich dir die Zuweisung in einen if Block gesetzt habe :)

Ersetze <script language="JavaScript"> durch <script type="text/javascript">.

Versuche es mit Firefox, und schau in dessen Javascriptconsole, wenn es weiter nicht funktioniert.
 
XVCD schrieb:
;
border: none;
border-style: none;

Wenn es schon keinen Rahmen gibt, dann ist der Stil des nicht vorhandenen Rahmens entbehrlich :)


und der Rahmen ward nicht mehr gesehen. Jedenfalls im IE und Firefox.
Beim Safari und gff. Opera ist er noch da, keine Ahnung warum denen das nicht schmeckt.
Zum Vergrößern anklicken....

Weil die Formatierung(smöglichkeiten) von Formularelementen durch die Browser sehr unterschiedlich gehandhabt werden.

Da steht der Gestaltungswusch des Designers gegen die Usability. Bekannte Oberflächenelemente (Scrollbalken, Knöpfe, Auswahlboxen...) sollen in allen Anwendungen gleich aussehen, damit der Benutzer sie nur einmal lernen muß und sie auch immer sofort erkennt. Gerade beim Mac ist das eine zentrale Benutzeroberflächenrichtlinie.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten