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

JavaScript: Countdown Zähler zur in Sekunden

L

laptop45276

Neues Mitglied
Hallo,

ich habe einen Countdown Zähler auf der Seite.

Ich bin auf der suche, wie ich den Code ändern muss, damit er nicht anzeigt: Verbleibende Jahre, Tage, Stunden usw. Sondern, dass er nur die verbleibenden Sekunden anzeigt.
Sprich, es müsste doch eine Lösung gegeben, dass er die verbleibende Zeit (Jahre, Tage, Stunden, Minuten ...) komplett in Sekunden ausrechnet, die das als Countdown ablaufen.

Aktuell sieht er so aus:
https://count.filmbank.info/neu.html

Meine Vorstellung wäre: Die verbleibenden Sekunden bis zu Datum xy.


Der aktuelle Code sieht so aus:

<style>
/* CountDown */
#countdown {
text-align: center;
}
#countdown p {
display: inline-block;
padding: 10px;
background-color: #ff0000;
margin: 0 0 20px;
border-radius: 3px;
font-weight: bolder;
font-size: 40px;
color: black;
min-width: 3.6rem;
}
</style>

<script>
// CountDown
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
downTime('dec, 15, 2021, 22:00:00'); // *** Datum und Uhrzeit anpassen! ***
};

function downTime(countTo) {
nowd = new Date();
countTo = new Date(countTo);
difference = (countTo-nowd);
daysd=Math.floor(difference/(60*60*1000*24)*1);
yearsd = Math.floor(daysd / 365);
if (yearsd >= 1){ daysd = daysd - (yearsd * 365)}
hoursd=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
minsd=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secsd=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if (secsd < 0) {
yearsd = daysd = hoursd = minsd = 0;
secsd = -1;
window.clearTimeout(downTime);
// Eventuell eine Aktion ausführen ...
}
document.getElementById('yearsD').firstChild.nodeValue = yearsd;
document.getElementById('daysD').firstChild.nodeValue = daysd;
document.getElementById('hoursD').firstChild.nodeValue = hoursd;
document.getElementById('minutesD').firstChild.nodeValue = minsd;
document.getElementById('secondsD').firstChild.nodeValue = secsd;
if (secsd >= 0) {
clearTimeout(downTime.to);
downTime.to=setTimeout(function(){ downTime(countTo); },1000);
}
else {
document.getElementById('secondsD').firstChild.nodeValue = 0;
}
}
</script>

<div id="countdown">
<p id="yearsD">00</p>
<p>Jahre</p>
<p id="daysD">00</p>
<p>Tage</p>
<p id="hoursD">00</p>
<p>Stunden</p>
<p id="minutesD">00</p>
<p>Minuten</p>
<p id="secondsD">00</p>
<p>Sekunden</p>
</div>
 
Werbung:
Werbung:
laptop45276 schrieb:
Leider habe ich nichts brauchbares gefunden.
Zum Vergrößern anklicken....
Bitte was? Gleich der erste Treffer liefert dir ein Beispiel!!! :mad: :mad: :mad:

Javascript: 
var a = new Date();
alert("Wait a few seconds, then click OK");

var b = new Date();
var difference = (b - a) / 1000;

console.log("You waited: " + difference + " seconds");
 
m.scatello schrieb:
Bitte was? Gleich der erste Treffer liefert dir ein Beispiel!!! :mad: :mad: :mad:

Javascript: 
var a = new Date();
alert("Wait a few seconds, then click OK");

var b = new Date();
var difference = (b - a) / 1000;

console.log("You waited: " + difference + " seconds");
Zum Vergrößern anklicken....

Das habe ich auch gefunden. Nur er berechnet nur die Seit die ich gewartet habe. Das kann ich aber hier nicht benutzen.

Da ich einen Countdown benötigte (siehe kompletten Code oben).

Nur wie gesagt, ich suche einen Code, den ich wie den originalen Code benutzen kann. So das er am Ende
zum Beispiel: 1.000.005 Sekunden anzeigt, die er auch runter zählt.
 
laptop45276 schrieb:
Nur er berechnet nur die Seit die ich gewartet habe.
Zum Vergrößern anklicken....
Richtig, aber damit hast du ein Beispiel, wie man auf Sekunden rechnet. Also nimmst du das gewünschte Datum, ziehst davon das aktuelle Datum ab und bingo, hast du die Differenz in Sekunden. Die ganzen p's entfernst du, bis auf das, in dem die Sekunden angezeigt werden sollen. Ebenso entfernst du im JavaScript die ganzen Berechnungen, nimmst die Berechnung aus dem Beispiel und setzt dann den Text in den übrig gebliebene p.

Ich bin alles andere als ein JavaScript-Spezialist, aber das ist eine so einfache Nummer, dass selbst ich das hinbekomme. Man muss halt nur mal etwas nachdenken.
 
Werbung:
m.scatello schrieb:
Richtig, aber damit hast du ein Beispiel, wie man auf Sekunden rechnet. Also nimmst du das gewünschte Datum, ziehst davon das aktuelle Datum ab und bingo, hast du die Differenz in Sekunden. Die ganzen p's entfernst du, bis auf das, in dem die Sekunden angezeigt werden sollen. Ebenso entfernst du im JavaScript die ganzen Berechnungen, nimmst die Berechnung aus dem Beispiel und setzt dann den Text in den übrig gebliebene p.

Ich bin alles andere als ein JavaScript-Spezialist, aber das ist eine so einfache Nummer, dass selbst ich das hinbekomme. Man muss halt nur mal etwas nachdenken.
Zum Vergrößern anklicken....

Vielen Dank. Aber ich gebs auf. Es funtioniert leider nicht
 
So schnell gibst du schon auf? Dein Ehrgeiz scheint ja nicht besonders groß zu sein :frown:
Auch wenn ich eigentlich total dagegen bin, fertige Lösungen zu posten, zumal das hier wirklich sehr simple ist, wenn man sich damit mal ernsthaft beschätigen würde, hier des Rätsels Lösung:
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown</title>

  <style>
/* CountDown */
#countdown {
text-align: center;
}
#countdown p {
display: inline-block;
padding: 10px;
background-color: #ff0000;
margin: 0 0 20px;
border-radius: 3px;
font-weight: bolder;
font-size: 40px;
color: black;
min-width: 3.6rem;
}
</style>
  </head>
  <body>
   <div id="countdown">
   <p id="output">Fehler im Script</p>
   </div>
  </body>
<script>
  window.onload=function()
  {
    downTime();
  };

  function downTime()
  {
    var a = new Date(2021, 12, 15, 22, 0, 0, 0);
    var b = new Date();

    var difference = (a-b) / 1000;
    document.getElementById('output').innerHTML = Math.floor(difference) + " Sekunden";
    setTimeout(downTime, 1000);
  }
</script> 
</html>
Wie du jetzt selber siehst, ist das keine Raketenwissenschaft. Du solltest deutlich mehr Eigeninitiative an den Tag legen, denn du wirst nicht immer so einfache Lösungen serviert bekommen.

PS: vielleicht kennen JavaScript-Experten eine bessere Lösungen.
 
m.scatello schrieb:
So schnell gibst du schon auf? Dein Ehrgeiz scheint ja nicht besonders groß zu sein :frown:
Auch wenn ich eigentlich total dagegen bin, fertige Lösungen zu posten, zumal das hier wirklich sehr simple ist, wenn man sich damit mal ernsthaft beschätigen würde, hier des Rätsels Lösung:
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown</title>

  <style>
/* CountDown */
#countdown {
text-align: center;
}
#countdown p {
display: inline-block;
padding: 10px;
background-color: #ff0000;
margin: 0 0 20px;
border-radius: 3px;
font-weight: bolder;
font-size: 40px;
color: black;
min-width: 3.6rem;
}
</style>
  </head>
  <body>
   <div id="countdown">
   <p id="output">Fehler im Script</p>
   </div>
  </body>
<script>
  window.onload=function()
  {
    downTime();
  };

  function downTime()
  {
    var a = new Date(2021, 12, 15, 22, 0, 0, 0);
    var b = new Date();

    var difference = (a-b) / 1000;
    document.getElementById('output').innerHTML = Math.floor(difference) + " Sekunden";
    setTimeout(downTime, 1000);
  }
</script>
</html>
Wie du jetzt selber siehst, ist das keine Raketenwissenschaft. Du solltest deutlich mehr Eigeninitiative an den Tag legen, denn du wirst nicht immer so einfache Lösungen serviert bekommen.

PS: vielleicht kennen JavaScript-Experten eine bessere Lösungen.
Zum Vergrößern anklicken....

Ich kann es nicht fassen. Es funktioniert, perfekt. Hätte ich nicht gedacht, das es wirklich so einfach ist.

Tausend Dank an dich.

PS: Hast du noch einen Vorschlag, wie ich die Sekunden trennen kann? Also so zum Beispiel: 5.000.000 Sekunden?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben