✔ Bild nach Ablauf eines Counters

Status
Nicht offen für weitere Antworten.
A

AluCeen

Grünschnabel
Hi

bin so ziemlich ein Anfänger in Java und ich bräuchte einen Code, der mir ermöglicht ein Bild von einer Internetseite nach Ablauf des Counters zu laden. Der Counter sollte auch in der Mitte sein und ohne Rahmen. Hier mal den Code

==========================================================
<html>
<head>
<title>Datum-Countdown mit JavaScript</title>

<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown() {
startDatum=new Date(); // Aktuelles Datum
EndDatum=new Date(); // EndDatum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {

var jahre=0
var monate=0
var tage=0
var stunden=0
var minuten=0
var sekunden=0

// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;

// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;

// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}

// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);

// Anzeige formatieren
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

document.countdownform.countdowninput.value=
jahre+monate+tage+stunden+minuten+sekunden;

setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
}
</script>
</head>

<body onload="countdown()">
<form name="countdownform">
<p>
<input size="75" name="countdowninput">
</p>
</form>
</body>

</html>
=============================================================
 
So müsste es in JavaScript gehen:
Javascript: 
<html>
<head>
<title>Datum-Countdown mit JavaScript</title>

<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown() {
startDatum=new Date(); // Aktuelles Datum
EndDatum=new Date(); // EndDatum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {

var jahre=0
var monate=0
var tage=0
var stunden=0
var minuten=0
var sekunden=0

// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;

// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;

// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}

// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);

// Anzeige formatieren
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

document.countdownform.countdowninput.value=
jahre+monate+tage+stunden+minuten+sekunden;

setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else { 
document.countdownform.countdowninput.value=
"0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
document.getElementById('bild').style.display = 'block';
}
}
</script>
</head>

<body onload="countdown()">
<form name="countdownform">
<p><center>
<input size="75" name="countdowninput" style="border:0px;">
<div id="bild" style="display:none;"><img border="0" src="..." width="..." height="..." /></div>
</center></p>
</form>
</body>

</html>
 
Zuletzt bearbeitet:
Also Ich hab das Bild nun so eingefügt:


75. document.getElementById('http://www.google.de/intl/de_de/images/logo.gif').style.display = 'block';
}


war das richtig, oder war es falsch? denn es funktioniert leider nicht, aber vielen dank für die Hilfe schonmal!
 
Falsch, ändere die Zeile 85:
HTML: 
<div id="bild" style="display:none;"><img border="0" src="http://www.google.de/intl/de_de/images/logo.gif" /></div>
 
Hi,

füg mal in Zeile 85 den URL zur Grafik im src-Attribut des img-Elements ein:

Code: 
<div id="bild" style="display:none;"><img border="0" src="http://www.google.de/intl/de_de/images/logo.gif'" width="..." height="..." /></div>
Und lass Zeile 75 so stehen:

Code: 
document.getElementById('bild').style.display = 'block';
 
Wow vielen Dank

Jetzt noch 2 Fragen:

Ich habe den Zähler nun auf Minuten umgestellt, so das er nur minuten anzeigt. Jetzt ist die Ausgabe aber nicht mehr in der Mitte... wie bekomm Ich sie zurück? Und wie bekomme Ich die Schrift 2 numern größer und in Fett und grau?
 
Probier es mal mit dieser CSS-Regel für das input-Element:

Code: 
<style type="text/css">
input {
text-align: center; /* horizontale Textausrichtung */
font-size: 13px; /* Schriftgröße - ggfs. noch weiter erhöhen */
font-weight: bold; /* fettes Schriftgewicht */
color: gray; /* graue Schriftfarbe */
}
</style>
Das Stylesheet bindest du im Dokumentheader ein.
 
Schrift ändern:
HTML: 
<input size="75" name="countdowninput" style="border:0px; color:gray; font-weight:bold; font-size:14px;">
Ich habe den Zähler nun auf Minuten umgestellt, so das er nur minuten anzeigt
Zum Vergrößern anklicken....
Was hast du denn geändert?
 
Zuletzt bearbeitet:
DAS hab Ich gemacht... wollte einen Counter haben wie auf http://www.linkinpark.com...
Wollte das der genau so aussieht, also auch mit dem Komma... dann auch in dem Grau und in der Schrift


Code: 
<html>
<head>
<title>Datum-Countdown mit JavaScript</title>

<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2007, monat=4, tag=4, stunde=14, minute=20, sekunde=00;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown()
{startDatum=new Date(); // Aktuelles Datum
EndDatum=new Date(); // EndDatum 

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {
 
var jahre=0
var monate=0
var tage=0
var stunden=0
var minuten=0
var sekunden=0 

// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000); 


// Anzeige formatieren
(jahre!=1)?jahre=jahre+"":jahre=jahre+"";
(monate!=1)?monate=monate+"":monate=monate+"";
(tage!=1)?tage=tage+"":tage=tage+"";
(stunden!=1)?stunden=stunden+"":stunden=stunden+"";
(minuten!=1)?minuten=minuten+"":minuten=minuten+"";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+"":sekunden=sekunden+""; 

document.countdownform.countdowninput.value=
minuten; 

setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else { 
document.countdownform.countdowninput.value=
"";
document.getElementById('bild').style.display = 'block';
}
}
</script>
</head> 

<body onload="countdown()">
<form name="countdownform">
<p><center>
<input size="75" name="countdowninput" style="border:0px; color:gray; font-weight:bold; font-size:14px;">
<div id="bild" style="display:none;"><img border="0" src="http://www.google.de/intl/de_de/images/logo.gif" /></div>
</center></p>
</form>
</body> 

</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück