Javascript auf Webseite anzeigen

Unregistriert

Ich habe eine Javascript Code gefunden
http://www.kostenlose-javascripts.de...Countdown.html,
den ich gerne auf meiner Webseite einbinden möchte. Leider habe ich keine Ahnung von Javascript. Wie zeige ich das Ganze an, weil bei mir kommt nur eine weisse Seite? Google sagt mir, dass ich das mit OnLoad funktion machen muss. Aber das geht irgendwie nicht. Wie muss ich das machen?

HTML-Code:
<html>
<head>
</head>
<body>
<div align="center" id="countdown" style="font-size:1.3em; font-weight:medium; font-family:Times New Roman, sans serif; "></div>
<script type="text/javascript">
<!--//

/*DEFINITION VON END-DATUM, FARBEN UND TEXTEN BEGINNT HIER*/

EndYear = 2013; //End-Jahr als 4-Stellige Zahl
EndMonth = 12; //End-Monat als Zahl (1 für Januar)
EndDay = 21; //End-Tag als Zahl (1 für den 1.)
PreEndHour = 16; //End-Stunde als Zahl (3 für 3 uhr [UTC] [In der SZ 2 St., in der WZ 1 St. früher als in Deutschl. ] )
PreEndMinute = 0; //End-Minute als Zahl (2 für z.B.: 19:02 )
EndSecond = 0;//End-Sekunde als Zahl (2 für z.B.: 19:17"02 )
NormColor = 'rgb(0,0,0)'; //Normale Farbe des Countdowns Siehe #
TenColor = 'rgb(190,34,5)' //Farbe bei den letzten 10 Sekunden Siehe #
EndColor = 'rgb(213,43,13)'; //Farbe, wenn der Countdown bereits abgelaufen ist Siehe #
TextA = 'There are'; //Text der über dem Countdown steht. Nur MIT Anführungstrichen
TextZ = 'left until...'; //Text der unter dem Countdown steht. Nur MIT Anführungstrichen
EndText = 'The time has come!'; /*Text der angezeigt wird, wenn der Countdown bereits abgelaufen ist. Nur MIT Anführungstrichen
// #1. Zahl für Rot-Anteil, 2. Zahl für Grün-Anteil, 3. Zahl für Blau-Anteil (Werte zwischen 0 und 255). Tabelle Farbfinder gibt es hier: http://www.npage.de/php-bin/seiten…url_farbe&set=0
(Farbe auswählen und dann die einzelnen Werte kopieren [R,G und B] und hier einfügen.)

/*DEFINITION ENDET HIER: AB HIER SOLLTE NICHTS VERÄNDERT WERDEN.*/

EndMonth--;
CD = window.setInterval('CountDown()',1000);
function CountDown(){
ActDate = new Date();
ActTime = ActDate.getTime();
if (ActDate.getDate() != ActDate.getUTCDate()){
ActHour = ActDate.getHours() +24;
} else {
ActHour = ActDate.getHours();
}
UtcDiffH = ActHour - ActDate.getUTCHours();
EndHour = PreEndHour + UtcDiffH;
UtcDiffM = ActDate.getMinutes() - ActDate.getUTCMinutes();
EndMinute = PreEndMinute + UtcDiffM;
DayM = 24*60;
EndClockM = (60*EndHour) +EndMinute;
if (EndClockM > DayM){
EndDay++;
EndClockM = EndClockM - DayM;
} else if (EndClockM == DayM){
EndDay++;
EndClockM = 0;
}
EndHourFalse = EndClockM/60;
EndHour = Math.floor(EndHourFalse);
EndMinute = EndClockM - (60*EndHour);
EndDate = new Date(EndYear, EndMonth, EndDay, EndHour, EndMinute, EndSecond);
EndTime = EndDate.getTime();
DiffTime = EndTime - ActTime;
DaysFalse = DiffTime/1000/60/60/24;
Days = Math.floor(DaysFalse);
HoursFalse = DiffTime/1000/60/60;
Hours = Math.floor(HoursFalse) - (24*Days);
MinutesFalse = DiffTime/1000/60;
Minutes = Math.floor(MinutesFalse) - (60*24*Days) - (60*Hours);
SecondsFalse = DiffTime/1000;
Seconds = Math.floor(SecondsFalse) - (60*60*24*Days) - (60*60*Hours) - (60*Minutes);
if (Minutes == 60){
M = 0;
} else {
M = Minutes;
}
if (Seconds == 60){
S = 0;
} else {
S = Seconds
}
if (Lang == 'DE'){
if (Days == 1){
Day = 'Day';
} else {
Day = 'Days';
}
if (Hours == 1){
Hour = 'Hour';
} else {
Hour = 'Hours';
}
if (Minutes == 1){
Minute = 'Minute';
} else {
Minute = 'Minutes';
}
if (Seconds == 1){
Second = 'Second';
} else {
Second = 'Seconds';
}
document.getElementById('countdown').innerHTML = '<span style="color:' + NormColor + '; ">' + TextA + '<br><br><span style="font-size:1.3em; ">' + Days + ' ' + Day +',<br>' + Hours + ' ' + Hour + ',<br>' + M + ' ' + Minute + ' and<br>' + S + ' ' + Second + '<br><br><\/span>' + TextZ + ',<br><br>on ' + EndDate + ' (local time)<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds < 11){
document.getElementById('countdown').innerHTML = '<span style="font-size:300px; color:' + TenColor + '; ">' + Seconds + '<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds == 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
if (DiffTime < 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
}
</script>
</body>
</html>

synaptic

na du hast da doch das komplette ding als html und so sollte es doch auch lauffähig sein...

du brauchst nen div mit der ID countdown
und dann hauste das javascript am besten in deinen body, kurz vorm schliessenden bodytag.

alternativ hau das script in den head und schreibe

Code

window.onload = function(){
    CD = window.setInterval('CountDown()',1000);
}

dann musste aber diese zeile hier: CD = window.setInterval('CountDown()',1000); aus deinem script selber entfernen

Unregistriert

So oder? Aber dann ist immer noch alles weiss.
[/CODE]
<html>
<head>

</head>
<body>
<div align="center" id="countdown" style="font-size:1.3em; font-weight:medium; font-family:Times New Roman, sans serif; "></div>
<script type="text/javascript">
<!--//

/*DEFINITION VON END-DATUM, FARBEN UND TEXTEN BEGINNT HIER*/

EndYear = 2013; //End-Jahr als 4-Stellige Zahl
EndMonth = 12; //End-Monat als Zahl (1 für Januar)
EndDay = 21; //End-Tag als Zahl (1 für den 1.)
PreEndHour = 16; //End-Stunde als Zahl (3 für 3 uhr [UTC] [In der SZ 2 St., in der WZ 1 St. früher als in Deutschl. ] )
PreEndMinute = 0; //End-Minute als Zahl (2 für z.B.: 19:02 )
EndSecond = 0;//End-Sekunde als Zahl (2 für z.B.: 19:17"02 )
NormColor = 'rgb(0,0,0)'; //Normale Farbe des Countdowns Siehe #
TenColor = 'rgb(190,34,5)' //Farbe bei den letzten 10 Sekunden Siehe #
EndColor = 'rgb(213,43,13)'; //Farbe, wenn der Countdown bereits abgelaufen ist Siehe #
TextA = 'There are'; //Text der über dem Countdown steht. Nur MIT Anführungstrichen
TextZ = 'left until...'; //Text der unter dem Countdown steht. Nur MIT Anführungstrichen
EndText = 'The time has come!'; /*Text der angezeigt wird, wenn der Countdown bereits abgelaufen ist. Nur MIT Anführungstrichen
// #1. Zahl für Rot-Anteil, 2. Zahl für Grün-Anteil, 3. Zahl für Blau-Anteil (Werte zwischen 0 und 255). Tabelle Farbfinder gibt es hier: http://www.npage.de/php-bin/seiten/c...rl_farbe&set=0
(Farbe auswählen und dann die einzelnen Werte kopieren [R,G und B] und hier einfügen.)

/*DEFINITION ENDET HIER: AB HIER SOLLTE NICHTS VERÄNDERT WERDEN.*/

EndMonth--;
CD = window.setInterval('CountDown()',1000);
function CountDown(){
ActDate = new Date();
ActTime = ActDate.getTime();
if (ActDate.getDate() != ActDate.getUTCDate()){
ActHour = ActDate.getHours() +24;
} else {
ActHour = ActDate.getHours();
}
UtcDiffH = ActHour - ActDate.getUTCHours();
EndHour = PreEndHour + UtcDiffH;
UtcDiffM = ActDate.getMinutes() - ActDate.getUTCMinutes();
EndMinute = PreEndMinute + UtcDiffM;
DayM = 24*60;
EndClockM = (60*EndHour) +EndMinute;
if (EndClockM > DayM){
EndDay++;
EndClockM = EndClockM - DayM;
} else if (EndClockM == DayM){
EndDay++;
EndClockM = 0;
}
EndHourFalse = EndClockM/60;
EndHour = Math.floor(EndHourFalse);
EndMinute = EndClockM - (60*EndHour);
EndDate = new Date(EndYear, EndMonth, EndDay, EndHour, EndMinute, EndSecond);
EndTime = EndDate.getTime();
DiffTime = EndTime - ActTime;
DaysFalse = DiffTime/1000/60/60/24;
Days = Math.floor(DaysFalse);
HoursFalse = DiffTime/1000/60/60;
Hours = Math.floor(HoursFalse) - (24*Days);
MinutesFalse = DiffTime/1000/60;
Minutes = Math.floor(MinutesFalse) - (60*24*Days) - (60*Hours);
SecondsFalse = DiffTime/1000;
Seconds = Math.floor(SecondsFalse) - (60*60*24*Days) - (60*60*Hours) - (60*Minutes);
if (Minutes == 60){
M = 0;
} else {
M = Minutes;
}
if (Seconds == 60){
S = 0;
} else {
S = Seconds
}
if (Lang == 'DE'){
if (Days == 1){
Day = 'Day';
} else {
Day = 'Days';
}
if (Hours == 1){
Hour = 'Hour';
} else {
Hour = 'Hours';
}
if (Minutes == 1){
Minute = 'Minute';
} else {
Minute = 'Minutes';
}
if (Seconds == 1){
Second = 'Second';
} else {
Second = 'Seconds';
}
document.getElementById('countdown').innerHTML = '<span style="color:' + NormColor + '; ">' + TextA + '<br><br><span style="font-size:1.3em; ">' + Days + ' ' + Day +',<br>' + Hours + ' ' + Hour + ',<br>' + M + ' ' + Minute + ' and<br>' + S + ' ' + Second + '<br><br><\/span>' + TextZ + ',<br><br>on ' + EndDate + ' (local time)<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds < 11){
document.getElementById('countdown').innerHTML = '<span style="font-size:300px; color:' + TenColor + '; ">' + Seconds + '<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds == 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
if (DiffTime < 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
}
</script>
<div id="countdown"></div>
</body>
</html>
[/CODE]

synaptic

HTML

<html>
<head>
<title></title>
<script type="text/javascript">
<!--//


/*DEFINITION VON END-DATUM, FARBEN UND TEXTEN BEGINNT HIER*/
EndYear = 2013; //End-Jahr als 4-Stellige Zahl
EndMonth = 12; //End-Monat als Zahl (1 für Januar)
EndDay = 21; //End-Tag als Zahl (1 für den 1.)
PreEndHour = 16; //End-Stunde als Zahl (3 für 3 uhr [UTC] [In der SZ 2 St., in der WZ 1 St. früher als in Deutschl. ] )
PreEndMinute = 0; //End-Minute als Zahl (2 für z.B.: 19:02 )
EndSecond = 0;//End-Sekunde als Zahl (2 für z.B.: 19:17"02 )
NormColor = 'rgb(0,0,0)'; //Normale Farbe des Countdowns Siehe #
TenColor = 'rgb(190,34,5)' //Farbe bei den letzten 10 Sekunden Siehe #
EndColor = 'rgb(213,43,13)'; //Farbe, wenn der Countdown bereits abgelaufen ist Siehe #
TextA = 'There are'; //Text der über dem Countdown steht. Nur MIT Anführungstrichen
TextZ = 'left until...'; //Text der unter dem Countdown steht. Nur MIT Anführungstrichen
EndText = 'The time has come!'; /*Text der angezeigt wird, wenn der Countdown bereits abgelaufen ist. Nur MIT Anführungstrichen
// #1. Zahl für Rot-Anteil, 2. Zahl für Grün-Anteil, 3. Zahl für Blau-Anteil (Werte zwischen 0 und 255). Tabelle Farbfinder gibt es hier: http://www.npage.de/php-bin/seiten/c...rl_farbe&set=0
(Farbe auswählen und dann die einzelnen Werte kopieren [R,G und B] und hier einfügen.)


/*DEFINITION ENDET HIER: AB HIER SOLLTE NICHTS VERÄNDERT WERDEN.*/


EndMonth--;


function CountDown(){
ActDate = new Date();
ActTime = ActDate.getTime();
if (ActDate.getDate() != ActDate.getUTCDate()){
ActHour = ActDate.getHours() +24;
} else {
ActHour = ActDate.getHours();
}
UtcDiffH = ActHour - ActDate.getUTCHours();
EndHour = PreEndHour + UtcDiffH;
UtcDiffM = ActDate.getMinutes() - ActDate.getUTCMinutes();
EndMinute = PreEndMinute + UtcDiffM;
DayM = 24*60;
EndClockM = (60*EndHour) +EndMinute;
if (EndClockM > DayM){
EndDay++;
EndClockM = EndClockM - DayM;
} else if (EndClockM == DayM){
EndDay++;
EndClockM = 0;
}
EndHourFalse = EndClockM/60;
EndHour = Math.floogt;' + TextZ + ',<br><br>on ' + EndDate + ' (local time)<\/span>';


if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds < 11){
document.getElementById('countdown').innerHTML = '<span style="font-size:300px; color:' + TenColor + '; ">' + Seconds + '<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds == 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
if (DiffTime < 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
}
</script>
<script type="text/javascript">
window.onload=function(){
CD = window.setInterval('CountDown()',1000);
}
</script>
</head>
<body></body>
</html>

Alles anzeigen

da war noch ne unsinnige sprachabfrage drin... und dein code is auch unfug gewesen, weil du das element countdown doppelt hattest

Unregistriert

Vielen Dank für deine Hilfe.
Aber es geht einfach nicht. Ich habe es genau so hochgeladen, wie es im Code steht, denn du für mich bearbeitet hast. Die Webseite ist nur weiss.

Dieses Script zB geht Problemlos, aber es hat leider keine Zeitzonen Funktion.

Code

<script type="text/javascript">
dateFuture1 = new Date(2013,6,23,17,5,0);


// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");




//###################################
//nothing beyond this point
function GetCount(ddate,iid){


	dateNow = new Date();	//grab current date
	amount = ddate.getTime() - dateNow.getTime();	
	delete dateNow;


	// if time is already past
	if(amount < 0){
		document.getElementById(iid).innerHTML="Now!";
	}
	// else date is still good
	else{
		days=0;hours=0;mins=0;secs=0;out="";


		amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs


		days=Math.floor(amount/86400);//days
		amount=amount%86400;


		hours=Math.floor(amount/3600);//hours
		amount=amount%3600;


		mins=Math.floor(amount/60);//minutes
		amount=amount%60;


		secs=Math.floor(amount);//seconds


		out += days +" "+((days==1)?"Tag":"Tage")+", ";
		out += hours +" "+((hours==1)?"Stunde":"Stunden")+", ";
		out += mins +" "+((mins==1)?"Minute":"Minuten")+", ";
		out += secs +" "+((secs==1)?"Sekunde":"Sekunden")+", ";
		out = out.substr(0,out.length-2);
		document.getElementById(iid).innerHTML=out;


		setTimeout(function(){GetCount(ddate,iid)}, 1000);
	}
}


window.onload=function(){
	GetCount(dateFuture1, 'countbox1');
	//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
};




</script>
<div id="countbox1"></div>

Alles anzeigen

synaptic

sorry, da is wohl beim editieren meines posts was zerschreddert worden, war grad selber erstaunt, da ich es zuvor getestet hatte.
wie dem auch sei, ich habs dir nochmal korrigiert..

HTML

<html>
<head>
<title></title>
<script type="text/javascript">
<!--//


/*DEFINITION VON END-DATUM, FARBEN UND TEXTEN BEGINNT HIER*/


EndYear = 2013; //End-Jahr als 4-Stellige Zahl
EndMonth = 12; //End-Monat als Zahl (1 für Januar)
EndDay = 21; //End-Tag als Zahl (1 für den 1.)
PreEndHour = 16; //End-Stunde als Zahl (3 für 3 uhr [UTC] [In der SZ 2 St., in der WZ 1 St. früher als in Deutschl. ] )
PreEndMinute = 0; //End-Minute als Zahl (2 für z.B.: 19:02 )
EndSecond = 0;//End-Sekunde als Zahl (2 für z.B.: 19:17"02 )
NormColor = 'rgb(0,0,0)'; //Normale Farbe des Countdowns Siehe #
TenColor = 'rgb(190,34,5)' //Farbe bei den letzten 10 Sekunden Siehe #
EndColor = 'rgb(213,43,13)'; //Farbe, wenn der Countdown bereits abgelaufen ist Siehe #
TextA = 'There are'; //Text der über dem Countdown steht. Nur MIT Anführungstrichen
TextZ = 'left until...'; //Text der unter dem Countdown steht. Nur MIT Anführungstrichen
EndText = 'The time has come!'; /*Text der angezeigt wird, wenn der Countdown bereits abgelaufen ist. Nur MIT Anführungstrichen
// #1. Zahl für Rot-Anteil, 2. Zahl für Grün-Anteil, 3. Zahl für Blau-Anteil (Werte zwischen 0 und 255). Tabelle Farbfinder gibt es hier: http://www.npage.de/php-bin/seiten/c...rl_farbe&set=0
(Farbe auswählen und dann die einzelnen Werte kopieren [R,G und B] und hier einfügen.)


/*DEFINITION ENDET HIER: AB HIER SOLLTE NICHTS VERÄNDERT WERDEN.*/


EndMonth--;
CD = window.setInterval('CountDown()',1000);
function CountDown(){
ActDate = new Date();
ActTime = ActDate.getTime();
if (ActDate.getDate() != ActDate.getUTCDate()){
ActHour = ActDate.getHours() +24;
} else {
ActHour = ActDate.getHours();
}
UtcDiffH = ActHour - ActDate.getUTCHours();
EndHour = PreEndHour + UtcDiffH;
UtcDiffM = ActDate.getMinutes() - ActDate.getUTCMinutes();
EndMinute = PreEndMinute + UtcDiffM;
DayM = 24*60;
EndClockM = (60*EndHour) +EndMinute;
if (EndClockM > DayM){
EndDay++;
EndClockM = EndClockM - DayM;
} else if (EndClockM == DayM){
EndDay++;
EndClockM = 0;
}
EndHourFalse = EndClockM/60;
EndHour = Math.floor(EndHourFalse);
EndMinute = EndClockM - (60*EndHour);
EndDate = new Date(EndYear, EndMonth, EndDay, EndHour, EndMinute, EndSecond);
EndTime = EndDate.getTime();
DiffTime = EndTime - ActTime;
DaysFalse = DiffTime/1000/60/60/24;
Days = Math.floor(DaysFalse);
HoursFalse = DiffTime/1000/60/60;
Hours = Math.floor(HoursFalse) - (24*Days);
MinutesFalse = DiffTime/1000/60;
Minutes = Math.floor(MinutesFalse) - (60*24*Days) - (60*Hours);
SecondsFalse = DiffTime/1000;
Seconds = Math.floor(SecondsFalse) - (60*60*24*Days) - (60*60*Hours) - (60*Minutes);
if (Minutes == 60){
M = 0;
} else {
M = Minutes;
}
if (Seconds == 60){
S = 0;
} else {
S = Seconds
}
if (Days == 1){
Day = 'Day';
} else {
Day = 'Days';
}
if (Hours == 1){
Hour = 'Hour';
} else {
Hour = 'Hours';
}
if (Minutes == 1){
Minute = 'Minute';
} else {
Minute = 'Minutes';
}
if (Seconds == 1){
Second = 'Second';
} else {
Second = 'Seconds';
}
document.getElementById('countdown').innerHTML = '<span style="color:' + NormColor + '; ">' + TextA + '<br><br><span style="font-size:1.3em; ">' + Days + ' ' + Day +',<br>' + Hours + ' ' + Hour + ',<br>' + M + ' ' + Minute + ' and<br>' + S + ' ' + Second + '<br><br><\/span>' + TextZ + ',<br><br>on ' + EndDate + ' (local time)<\/span>';


if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds < 11){
document.getElementById('countdown').innerHTML = '<span style="font-size:300px; color:' + TenColor + '; ">' + Seconds + '<\/span>';
}
if (Days == 0 && Hours == 0 && Minutes == 0 && Seconds == 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
if (DiffTime < 0){
window.clearInterval(CD);
document.getElementById('countdown').innerHTML = '<span style="font-size:7em; color:' + EndColor + '; ">' + EndText + '<\/span>';
}
}
window.onload=function(){
CD = window.setInterval('CountDown()',1000);
}
</script>
</head>
<body>


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

Alles anzeigen

Tags