• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] HILFE! Script richtig positionieren!

D

doppelh09

Neues Mitglied
Moin Moin,

Ich möchte für einen Freund einen simplen Countdown erstellen. Diesen habe ich, aufgrund fehlenden Kenntnissen in HTML etc. über einen Generator erstellt.

Ich möchte, dass das Script mittig platziert wird (vertikal und horizintal) und sich quasi der Bildschirmauflösung anpasst. Nur wie lautet der Befehl hierfür?

Der Code sieht folgendermaßen aus:

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

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

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 15:37:25").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 = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
doppelh09 schrieb:
Ich möchte, dass das Script mittig platziert wird (vertikal und horizintal) und sich quasi der Bildschirmauflösung anpasst. Nur wie lautet der Befehl hierfür?
Zum Vergrößern anklicken....
Die Positionierung des Scripts, respektive des Elements, das den Countdown enthält/wiedergibt, hat mit JavaScript nichts zu tun (= deine ursprüngliche Wahl des Forums), sondern ist eine Aufgabe für die Formatierungssprache CSS.

Schließlich hast du auch die horizontale Zentrierung mit CSS vorgenommen.

Für die vertikale Zentrierung stehen mehrere CSS-Techniken zur Auswahl, die du alle bei Google in Erfahrung hättest bringen können, und z.B. hier zusammengefasst sind:
In meinem kleinen feinen Fiddle-Demo hab ich die aktuellste aller verfügbaren Methoden gewählt: "Flexbox".

Moderation: Thema nach CSS verschoben.
 
Danke erst einmal für deine hilfreiche Antwort!

Ich hatte es schon vermutet. Wie gesagt, ich bin in dem Bereich ein "Newbie" und kenne mich so gut wie garnicht aus. Ich habe den Countdown über einen Generator erstellt. Dort konnte man diverse Einstellungen vornehmen, jedoch keine weiteren für das Zentrieren.

Ich habe mich ein wenig durchgelesen und auch die Befehle, welche auch du netterweise gepostet hast, mir angeschaut. Aber ich blick nicht durch, dass die Codes aufgeteilt sind in HTML, JavaScript und CSS, bzw. weiß ich nicht, wie der Code als Ganzes aussehen soll.
 
Werbung:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <style type="text/css">   
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,body {
        height: 100%;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <p id="demo"></p>
    <script>
       // Set the date we're counting down to
       var countDownDate = new Date("Jan 5, 2018 15:37:25").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 = "EXPIRED";
         }
        }, 1000);
    </script>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben