Javascript & Html - Hilfe benötigt

trtwx

Hallöchen!

Derzeit versuche ich auf meiner Seite einen Timer zu integrieren. Der Code dafür ist nicht meiner

und lediglich copy & paste + eigene kleine Änderungen.

Nun gibt es aber ein kleines Problem, welches ich gerne lösen mag :

Spoiler anzeigen

Wie schaffe ich es, (ich habe keine Ahnung wie man sie nennt und nenne sie einfach ''Variablen'') solche

Variablen wie diese :

''Variablen'' wie ''days'', ''hours''....

zu ''benennen'' und in stylecodes wie diesen zu verbauen :

Stylecode Beispiel

um mir einen Timer wie diesen zu bauen? :

Timerdesign Beispiel

Ich weiß einfach nicht mit diesen Javascript-''Variablen'' umzugehen. Bei Php komme ich

einigermaßen hinterher und es leuchtet mir schneller ein, aber hier bin ich leider überfragt.

Hoffentlich könnt ihr mir da weiterhelfen, die Vergangenheit hat es bereits mehrere Male bestätigt.

Liebe Grüße!

Anmerkung : Ich war mir mit dem Unterforum nicht 100%ig sicher und bitte mir ein eventuelles Missverständis zu entschuldingen

strrev

Hi, ich tippe jetzt einfach mal darauf, dass du das Meinst;

Definieren:

Code

:root {
    --strrev-color: #000
}

Nutzen:

Code

body {
    background: var(--strrev-color)
}

Grüße

sttrev

Kpoi

https://jsfiddle.net/0h4khmrp/2/

Hab dir hier mal ein kleines Bespiel geschrieben.

Rapamycin

Zitat von strrev
Hi, ich tippe jetzt einfach mal darauf, dass du das Meinst;

Definieren:
Code
:root {
    --strrev-color: #000
}
Nutzen:
Code
body {
    background: var(--strrev-color)
}
Grüße

sttrev

CSS4 Features zu verwenden ist nicht das schlauste, da es genug Geräte gibt, die diese nicht Unterstützen. Des Weiteren ist der Variablennamen "strrev-color" nichts aussagend und sowieso schwachsinnig gewählt.

trtwx

Zitat von Firesky

https://jsfiddle.net/0h4khmrp/2/

Hab dir hier mal ein kleines Bespiel geschrieben.

Echt cool, das du dir die Mühe gemacht hast (auch wenn es für erfahrene Leute vielleicht nicht der riesige Aufwand ist).

Allerding weiß ich damit halt echt nichts anzufangen bzw dies in den Code einzubauen D:

Auch verwende ich keine weiteren Dateien wie eine .css oder eine .js, sondern habe alles in einem PHP-Dokument.

Ich veranschauliche mal fix den Code, vielleicht habe ich es einfach zu blöd erklärt, entschudligung ..

Countdown-Code

PHP

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
  color:#ffffff;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Dec 24, 2017 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "00d 00h 00m 00s";
    }
}, 1000);
</script>

</body>
</html>

Alles anzeigen

Und genau in diesem hätte ich gerne alles definiert, sodass ich die einzelnen Elemente wie in deinem Beispiel designen kann, ohne externe Dateien zu nutzen, wenn überhaupt machbar bzw möglich.

Analritter von Salzgitter

<div class="hrs"> Arbeite mit divs, dann kannste das via <style>.hrs { font-size:15px; } </style>definierenmund nach deinen Wünschen gestallten.

Hier die Ausgaben vom Timer mal einzeln, denke damit kannst du mehr anfangen

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <style>
    body {
        margin: 0px;
        background: #000000;
    }
    
    p {
        text-align: center;
        font-size: 60px;
        color:#ffffff;
    }
        </style>
    </head>
<body>
    <p id="tage"></p>
        <p id="stunden"></p>
        <p id="minuten"></p>
    <p id="sekunden"></p>
<script>
    // Set the date we're counting down to
        var countDownDate = new Date("Dec 24, 2017 12:00:00").getTime();
    // Update the count down every 1 second
        var x = setInterval(function() {
    // Get todays date and time
        var now = new Date().getTime();
    // Find the distance between now an the count down date
        var distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Output the result in an element with id="demo"
        document.getElementById("tage").innerHTML = days + "Tage ";
        document.getElementById("stunden").innerHTML = hours + "Stunden";
        document.getElementById("minuten").innerHTML = minutes + "Minuten ";
        document.getElementById("sekunden").innerHTML = seconds + "Sekunden ";
    // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "00d 00h 00m 00s";
        }
    }, 1000);
</script>
</body>
</html>

Alles anzeigen

trtwx

Zitat von Analritter von Salzgitter

<div class="hrs"> Arbeite mit divs, dann kannste das via <style>.hrs { font-size:15px; } </style>definierenmund nach deinen Wünschen gestallten.

Hier die Ausgaben vom Timer mal einzeln, denke damit kannst du mehr anfangen

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <style>
    body {
        margin: 0px;
        background: #000000;
    }
    
    p {
        text-align: center;
        font-size: 60px;
        color:#ffffff;
    }
        </style>
    </head>
<body>
    <p id="tage"></p>
        <p id="stunden"></p>
        <p id="minuten"></p>
    <p id="sekunden"></p>
<script>
    // Set the date we're counting down to
        var countDownDate = new Date("Dec 24, 2017 12:00:00").getTime();
    // Update the count down every 1 second
        var x = setInterval(function() {
    // Get todays date and time
        var now = new Date().getTime();
    // Find the distance between now an the count down date
        var distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Output the result in an element with id="demo"
        document.getElementById("tage").innerHTML = days + "Tage ";
        document.getElementById("stunden").innerHTML = hours + "Stunden";
        document.getElementById("minuten").innerHTML = minutes + "Minuten ";
        document.getElementById("sekunden").innerHTML = seconds + "Sekunden ";
    // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "00d 00h 00m 00s";
        }
    }, 1000);
</script>
</body>
</html>

Alles anzeigen

Vielen Dank dafür! Schaue mir das ganze nochmal an und gehe meinem Verlangen nach =)

Analritter von Salzgitter

trtwx hier nochmal im LayOut welches der liebe Kpoi dir angefertigt hatte.

HTML: CountDown

<!DOCTYPE HTML>
<html>
    <head>
        <style>
    html {
        font-family: Sans-Serif;
    }

    #box {
        color: white; 
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        font-weight: 100;
        width: 50px;
        height: 70px;
        background: #1BBC9B;  
        border-radius: 3px;
        padding: 10px;
        line-height: 30px;
        margin-top: 5px;
    }

    #tage {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #stunden {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #minuten {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #sekunden {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
        </style>
    </head>
<body>
    <div id="box">
        <div id="tage"></div>
        <center>Days</center>
    </div>
    <div id="box">
        <div id="stunden"></div>
        <center>Hrs</center>
    </div>
    <div id="box">
        <div id="minuten"></div>
        <center>Min</center>
    </div>
    <div id="box">
        <div id="sekunden"></div>
        <center>Sec</center>
    </div>
<script>
    // Set the date we're counting down to
        var countDownDate = new Date("Dec 24, 2017 12:00:00").getTime();
    // Update the count down every 1 second
        var x = setInterval(function() {
    // Get todays date and time
        var now = new Date().getTime();
    // Find the distance between now an the count down date
        var distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Output the result in an element with id="demo"
        document.getElementById("tage").innerHTML = days;
        document.getElementById("stunden").innerHTML = hours;
        document.getElementById("minuten").innerHTML = minutes;
        document.getElementById("sekunden").innerHTML = seconds;
    // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "00d 00h 00m 00s";
        }
    }, 1000);
        </script>
    </body>
</html>

Alles anzeigen

trtwx

Zitat von Analritter von Salzgitter

trtwx hier nochmal im LayOut welches der liebe Kpoi dir angefertigt hatte.

HTML: CountDown

<!DOCTYPE HTML>
<html>
    <head>
        <style>
    html {
        font-family: Sans-Serif;
    }

    #box {
        color: white; 
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        font-weight: 100;
        width: 50px;
        height: 70px;
        background: #1BBC9B;  
        border-radius: 3px;
        padding: 10px;
        line-height: 30px;
        margin-top: 5px;
    }

    #tage {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #stunden {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #minuten {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
    #sekunden {
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        width: 50px;
        height: 50px;
        background: #049372;
        border-radius: 3px;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
    }
        </style>
    </head>
<body>
    <div id="box">
        <div id="tage"></div>
        <center>Days</center>
    </div>
    <div id="box">
        <div id="stunden"></div>
        <center>Hrs</center>
    </div>
    <div id="box">
        <div id="minuten"></div>
        <center>Min</center>
    </div>
    <div id="box">
        <div id="sekunden"></div>
        <center>Sec</center>
    </div>
<script>
    // Set the date we're counting down to
        var countDownDate = new Date("Dec 24, 2017 12:00:00").getTime();
    // Update the count down every 1 second
        var x = setInterval(function() {
    // Get todays date and time
        var now = new Date().getTime();
    // Find the distance between now an the count down date
        var distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Output the result in an element with id="demo"
        document.getElementById("tage").innerHTML = days;
        document.getElementById("stunden").innerHTML = hours;
        document.getElementById("minuten").innerHTML = minutes;
        document.getElementById("sekunden").innerHTML = seconds;
    // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "00d 00h 00m 00s";
        }
    }, 1000);
        </script>
    </body>
</html>

Alles anzeigen

Herzlichen Dank! Dies ist auch das eigentliche von mir gedachte Ergebnis Finde es echt super, das ihr euch Zeit für sowas nehmt!

Analritter von Salzgitter

Joa, hab die Boxen mal untereinander gelassen, sollte ja nur zur Demonstration dienen Wenn was ist, RetroTown hat ein offenes Ohr!

Kpoi

Dream Team Analritter von Salzgitter.

Analritter von Salzgitter

Zitat von Firesky

Dream Team Analritter von Salzgitter.

Merke es schon Auf weitere Probleme, welche die Community lösen darf!

Jetzt mitmachen!