Vorlage:Countdown: Unterschied zwischen den Versionen

Aus Shadowhelix
Zur Navigation springen Zur Suche springen
KKeine Bearbeitungszusammenfassung
K (Vorlagen-Kategorie umbenannt)
 
(4 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
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%">
Countdown to the Sixth World<br/>{{#expr:floor((1324684800 - {{#time: U | now }})/86400)}} Tage {{#expr:((1324684800 - {{#time: U | now }})/3600) mod 24}} Stunden {{#expr:((1324684800 - {{#time: U | now }})/60) mod 60}} Minuten
</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 64:
</pre>
</pre>


[[Kategorie:!GimmickVorlagen|Countdown]]</noinclude>
==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:!Vorlagen/Gimmick|Countdown]]</noinclude>

Aktuelle Version vom 2. Mai 2013, 16:45 Uhr

Countdown to the Sixth World
-4535 Tage -18 Stunden -25 Minuten

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 );