Vorlage:Countdown: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Loki (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
Loki (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
<center><div class="countdown" style="border-collapse: separate; font-size:200%; text-align:center; background-color:{{{FARBE|LightGreen}}}; color:white; width:45%"><br/></div></center><noinclude> | <center><div class="countdown" style="border-collapse: separate; font-size:200%; text-align:center; background-color:{{{FARBE|LightGreen}}}; color:white; width:45%"><br/></div></center><noinclude> | ||
Funktionsfähigkeit erreicht die '''Vorlage:Countdown''' erst durch Einfügen des folgenden Javascripts auf der monobook.js-Seite (Link: <nowiki>http://wiki.shadowhelix.de/Benutzer:Name_des_Benutzers/monobook.js</nowiki>): | Funktionsfähigkeit erreicht die '''Vorlage:Countdown''' erst durch Einfügen des folgenden Javascripts auf der monobook.js-Seite (Link: <nowiki>http://wiki.shadowhelix.de/Benutzer:Name_des_Benutzers/monobook.js</nowiki>), außerdem benötigt die Vorlage hasClass: | ||
==Variante 1 - Millisekunden== | |||
<pre> | <pre> | ||
Zeile 60: | Zeile 62: | ||
</pre> | </pre> | ||
==Variante 1 - Centisekunden== | |||
<pre> | |||
/* Countdown */ | |||
function pause(delay) { | |||
var start = new Date(); | |||
while ((new Date()) - start <= delay) {} | |||
} | |||
function updateCountdown () { | |||
var Countdown = document.getElementsByTagName( "div" ); | |||
for ( var i = 0; i < Countdown.length; i++ ) { | |||
// div mit class="countdown" raussuchen | |||
if ( hasClass( Countdown[i], "countdown" ) ) { | |||
// div wird geleert | |||
while(Countdown[i].hasChildNodes()){ | |||
Countdown[i].removeChild(Countdown[i].lastChild); | |||
} | |||
var targetTime = new Date("December 24, 2011 00:00:00"); | |||
var currentTime = new Date (); | |||
var differenceTime = new Date(targetTime - currentTime); | |||
var Brk = document.createElement( "br" ); | |||
if (differenceTime > 0) { | |||
var days = (Math.floor(differenceTime/(86400*1000))).toString(); | |||
var hours = (Math.floor(differenceTime/(3600*1000)) % 24).toString(); | |||
if (hours < 10) {hours = "0"+hours} | |||
var minutes = (Math.floor(differenceTime/(60*1000)) % 60).toString(); | |||
if (minutes < 10) {minutes = "0"+minutes} | |||
var seconds = (Math.floor(differenceTime/1000) % 60).toString(); | |||
if (seconds < 10) {seconds = "0"+seconds} | |||
var centiseconds = (Math.floor(differenceTime/10) % 100).toString(); | |||
if (centiseconds < 10) {centiseconds = "0"+centiseconds} | |||
var CountdownText1 = document.createTextNode( "Countdown to the Sixth World"); | |||
var CountdownText2 = document.createTextNode( days+" Tage "+hours+":"+minutes+":"+seconds+":"+centiseconds ); | |||
// einfügen in div | |||
Countdown[i].insertBefore( CountdownText2, Countdown[i].childNodes[0] ); | |||
Countdown[i].insertBefore( Brk, Countdown[i].childNodes[0] ); | |||
Countdown[i].insertBefore( CountdownText1, Countdown[i].childNodes[0] ); | |||
// reset der lineHeight notwendig | |||
Countdown[i].style.lineHeight = "1.5em"; | |||
// nächster aufruf von updateCountdown() nach 100ms | |||
setTimeout('updateCountdown();',10); | |||
} else { | |||
} | |||
} | |||
} | |||
} | |||
addOnloadHook( updateCountdown ); | |||
</pre> | |||
[[Kategorie:!GimmickVorlagen|Countdown]]</noinclude> | [[Kategorie:!GimmickVorlagen|Countdown]]</noinclude> |
Version vom 20. Juni 2010, 17:51 Uhr
Funktionsfähigkeit erreicht die Vorlage:Countdown erst durch Einfügen des folgenden Javascripts auf der monobook.js-Seite (Link: http://wiki.shadowhelix.de/Benutzer:Name_des_Benutzers/monobook.js), außerdem benötigt die Vorlage hasClass:
Variante 1 - Millisekunden
/* Countdown */ function updateCountdown () { var Countdown = document.getElementsByTagName( "div" ); for ( var i = 0; i < Countdown.length; i++ ) { // div mit class="countdown" raussuchen if ( hasClass( Countdown[i], "countdown" ) ) { // div wird geleert while(Countdown[i].hasChildNodes()){ Countdown[i].removeChild(Countdown[i].lastChild); } var targetTime = new Date("December 24, 2011 00:00:00"); var currentTime = new Date (); var differenceTime = new Date(targetTime - currentTime); var days = (Math.floor(differenceTime/(86400*1000))).toString(); var hours = (Math.floor(differenceTime/(3600*1000)) % 24).toString(); if (hours < 10) {hours = "0"+hours} var minutes = (Math.floor(differenceTime/(60*1000)) % 60).toString(); if (minutes < 10) {minutes = "0"+minutes} var seconds = (Math.floor(differenceTime/1000) % 60).toString(); if (seconds < 10) {seconds = "0"+seconds} var milliseconds = (Math.floor(differenceTime) % 1000).toString(); if (milliseconds < 10) {milliseconds = "00"+milliseconds} else if (milliseconds < 100) {milliseconds = "0"+milliseconds} var CountdownText1 = document.createTextNode( "Countdown to the Sixth World"); var CountdownText2 = document.createTextNode( days+" Tage "+hours+":"+minutes+":"+seconds+":"+milliseconds ); var Brk = document.createElement( "br" ); // einfügen in div Countdown[i].insertBefore( CountdownText2, Countdown[i].childNodes[0] ); Countdown[i].insertBefore( Brk, Countdown[i].childNodes[0] ); Countdown[i].insertBefore( CountdownText1, Countdown[i].childNodes[0] ); // reset der lineHeight notwendig Countdown[i].style.lineHeight = "1.5em"; // nächster aufruf von updateCountdown() nach 1000ms setTimeout('updateCountdown();',1); } } } addOnloadHook( updateCountdown );
Variante 1 - Centisekunden
/* Countdown */ function pause(delay) { var start = new Date(); while ((new Date()) - start <= delay) {} } function updateCountdown () { var Countdown = document.getElementsByTagName( "div" ); for ( var i = 0; i < Countdown.length; i++ ) { // div mit class="countdown" raussuchen if ( hasClass( Countdown[i], "countdown" ) ) { // div wird geleert while(Countdown[i].hasChildNodes()){ Countdown[i].removeChild(Countdown[i].lastChild); } var targetTime = new Date("December 24, 2011 00:00:00"); var currentTime = new Date (); var differenceTime = new Date(targetTime - currentTime); var Brk = document.createElement( "br" ); if (differenceTime > 0) { var days = (Math.floor(differenceTime/(86400*1000))).toString(); var hours = (Math.floor(differenceTime/(3600*1000)) % 24).toString(); if (hours < 10) {hours = "0"+hours} var minutes = (Math.floor(differenceTime/(60*1000)) % 60).toString(); if (minutes < 10) {minutes = "0"+minutes} var seconds = (Math.floor(differenceTime/1000) % 60).toString(); if (seconds < 10) {seconds = "0"+seconds} var centiseconds = (Math.floor(differenceTime/10) % 100).toString(); if (centiseconds < 10) {centiseconds = "0"+centiseconds} var CountdownText1 = document.createTextNode( "Countdown to the Sixth World"); var CountdownText2 = document.createTextNode( days+" Tage "+hours+":"+minutes+":"+seconds+":"+centiseconds ); // einfügen in div Countdown[i].insertBefore( CountdownText2, Countdown[i].childNodes[0] ); Countdown[i].insertBefore( Brk, Countdown[i].childNodes[0] ); Countdown[i].insertBefore( CountdownText1, Countdown[i].childNodes[0] ); // reset der lineHeight notwendig Countdown[i].style.lineHeight = "1.5em"; // nächster aufruf von updateCountdown() nach 100ms setTimeout('updateCountdown();',10); } else { } } } } addOnloadHook( updateCountdown );