Javasript: Countdown - anders als in ein Textfeld?

Dieses Thema im Forum "Web Page Design" wurde erstellt von Robbat, 19.04.2005.

  1. Robbat

    Robbat Thread Starter MacUser Mitglied

    Beiträge:
    228
    Zustimmungen:
    0
    MacUser seit:
    24.09.2004
    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
     
  2. Nogger

    Nogger MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    0
    MacUser seit:
    03.08.2004
    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.
     
  3. XVCD

    XVCD MacUser Mitglied

    Beiträge:
    1.376
    Zustimmungen:
    51
    MacUser seit:
    21.01.2005
    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: 21.04.2005
  4. Robbat

    Robbat Thread Starter MacUser Mitglied

    Beiträge:
    228
    Zustimmungen:
    0
    MacUser seit:
    24.09.2004
    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!
     
  5. XVCD

    XVCD MacUser Mitglied

    Beiträge:
    1.376
    Zustimmungen:
    51
    MacUser seit:
    21.01.2005
    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: 22.04.2005
  6. Nogger

    Nogger MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    0
    MacUser seit:
    03.08.2004
    *Hualp*...

    Welches Programm schreibt den sowas?
     
  7. Nogger

    Nogger MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    0
    MacUser seit:
    03.08.2004
    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 
    document.getElementById("countdown");
               if (
    && e.innerHTML){
                 
    e.innerHTML "" Tage eTage Stunden eStunden Minuten eMinuten " " Sekunden eSekunden;
               }
               
    window.setTimeout("VerbleibendeZeit();"1000);
             }
             
    VerbleibendeZeit();
           
    </script>
    ...
     
    Zuletzt bearbeitet: 22.04.2005
  8. XVCD

    XVCD MacUser Mitglied

    Beiträge:
    1.376
    Zustimmungen:
    51
    MacUser seit:
    21.01.2005

    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) ???!
     
  9. Nogger

    Nogger MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    0
    MacUser seit:
    03.08.2004
    > <!--
    > -->

    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>
    
     
  10. Robbat

    Robbat Thread Starter MacUser Mitglied

    Beiträge:
    228
    Zustimmungen:
    0
    MacUser seit:
    24.09.2004
    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>
     
Die Seite wird geladen...

Diese Seite empfehlen