Frage Countdown/Timer in HTML/CSS

thesenseofthelife · 27 September 2019

Guten Tag,
ich würde gerne auf einer Website einen Countdown der von 150 Sekunden runterzählt oder ein Timer der bis 150 Sekunden läuft. Leider habe ich nur Countdowns gefunden, bei denen vorher ein bestimmtes Datum eingegeben werden mussten. Habe bisschen rumgeforscht und das hier kommt dem am nächsten nur fehlt eben die bestimmte Sache, die derzeitige Zeit mit 150 Sekunden zu addieren.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>

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

<script>
// Get today's date and time
var now = new Date().getTime();

var timer = now + #150 Sekunden ;

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

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

// Find the distance between now and the count down date
var distance = timer - now;

// 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>

Bisschen umgeschrieben, von der Website "https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown"
Bei der Stelle var timer = now + #150 Sekunden
würde ich halt gerne irgendwie die derzeitige Zeit mit 150 Sekunden addieren.
Bin noch Anfänger, sorry wenn das ne dumme Frage ist konnte aber wie oben gesagt nur Countdowns für einen bestimmten Punkt finden.

basti1012 · 28 September 2019

thesenseofthelife schrieb:
Guten Tag,
ich würde gerne auf einer Website einen Countdown der von 150 Sekunden runterzählt oder ein Timer der bis 150 Sekunden läuft.

Müßen die 150 Sekunden auf der Aktuellen Zeit drauf gerechnet werden ?
oder reicht dir ein Countdown der einfach von 0 auf 150 hochzählt , oder runterzählt ?
Dafür brauch es ja nicht viel
0 bis 150

Code:

x=0;
timer=setInterval(function(){
  x++;
  if(x<150){
      console.log(x)
  }else{
      console.log(clearInterval(timer)+' Timer gestoppt')         
  }
},1000)

oder andersrum von 150 auf 0

Code:

x=150;
timer=setInterval(function(){
  x--;
  if(x>0){
    console.log(x)
  }else{
      console.log(clearInterval(timer)+' Timer gestoppt')         
  }
},1000)

Wenn es aber mit auf der Uhrzeit drauf soll dann kucke mal ob du damit weiter kommst
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Zeitberechnung

thesenseofthelife · 28 September 2019

Vielen vielen Dank @basti1012 ,
leider fehlt mir jetzt nur noch ein Baustein nämlich die Frage wie man es auf einer website, also außerhalb der Konsole, darstellt. Habe jetzt paar Stunden dran gesessen und ein bisschen im Internet gesucht aber nix gefunden was funktioniert.
Das war jetzt mein Ansatz

HTML:

  <html>

  <head>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <title></title>

  </head>

  <body>

         <div id="box1">

         <button onclick="krugs()"><img src="bilder/krugs.jpg" alt="" border="0" width="330" height="200"></button>

         </div>

         <script>

         k=150

         a=' krugs'

         function krugs(){

           krugstimer=setInterval(function(){

           k--;

           if(k>0)

           document.getElementById("box1").innerHTML = k;

           }else{

             console.log(clearInterval(krugstimer)+' Timer gestoppt')

           }

         },1000)

         }

         </script>

  </button>

  </body>

</html>

leider taucht bei mir immer wieder die Fehlermeldung

Uncaught ReferenceError: krugs is not defined
at HTMLButtonElement.onclick (index.html:10)

auf, obwohl ich eigentlich im script untendrunter krugs() mit der function definiert habe. Habe auch versucht mit input und output was zu machen, hat leider auch nicht funktioniert.

Wo liegt bei mir der Fehler? Und gibt es einen besseren Weg es umzusetzen?

basti1012 · 28 September 2019

Ok, das geht so leider nicht.

Wichtig ist es das Variabeln und functionen nicht den gleichen namen haben.
Bei dir wäre das

Code:

a='krug'
function krug()

Das ist nicht gut das gibt immer nur komplikationen.
Dann hast du Klammern vergessern } oder falsch gesetzt.

Dein Timer output ( innerHTML ) ist bei id box1, wenn er gehen würde , wäre dein Button weg , weil er überschrieben würde.
Dein Html hat ein Fehler, warum ist das </button> nochmal vorhanden ?

Versuch nochmal dein glück. Wenn du es dann immer noch nicht schaffst dann mach ich das , aber ich denke mal das du den willen hast und es schaffen kannst

thesenseofthelife · 28 September 2019

Hey vielen Dank,
ich hatte echt nur eine Klammer vergessen und jetzt funktioniert das runterzählen. Nur fehlt mir jetzt nur die Möglichkeit den Timer von neuzustarten. Habe aber nur einen Button gefunden der die ganze Website refreshed.

HTML:

<div id="box9">
         <form><input type=button value="Refresh" onClick="history.go()"></form>
</div>

Wie kann ich spezifizieren, dass nur die box2 refreshed wird, in der der Timer läuft?

basti1012 · 28 September 2019

Das ist doch schon mal gut das du es soweit geschafft hast .
Jetzt müsste man deinen aktuellen Code sehen um das genau zu sagen wie man den Timer neu starten läst.
Ist der Timer komplett bis zum Ende runtergelaufen , läst sich der Timer zb so auch wieder neu starten.

HTML:

  <body>
    <div id="box1">
    <button id="start"><img src="bilder/krugs.jpg" alt="" border="0" width="330" height="200"></button>
  </div>
    <div id="counterout"></div>
<script>

document.getElementById('start').addEventListener('click',function(){
  k=150;
krugstimer=setInterval(function(){

   k--;
   if(k>0){
       document.getElementById("counterout").innerHTML = k;
    }else{
       document.getElementById("counterout").innerHTML = 0;
       clearInterval(krugstimer);
    }
},1000)
});
</script>
</body>
</html>

Nachteil ist , wenn der Button vor ablauf der Zeit gedrückt wird , oder mehrmals , wird der Timer nur noch Blödsinn machen weil er doppelt gemoppelt gestartet wurde.

Wenn dann sperrt man den Button wärend der Zeit wo der Timer läuft , oder man muß sich was einfallen lassen damit bei jeden klick auf den Button der Timer resetet und nicht nochmal startet.

HTML:

 <body>
<div id="box1">
    <button id="start"><img src="bilder/krugs.jpg" alt="" border="0" width="330" height="200"></button>
</div>
<div id="counterout"></div>
<script>
var krugstimer;
var laufzeit=150;
function reset(){
     clearTimeout(krugstimer);
     console.log('Timer resetet '+laufzeit)
}
function start(k){
       k--;
       if(k>0){
         document.getElementById("counterout").innerHTML = k;
         krugstimer=setTimeout(function(){ start(k)},1000);
       }else{
         document.getElementById("counterout").innerHTML = 0;
       }
}
document.getElementById('start').addEventListener('click',function(){
   reset();
   start(laufzeit);
});
</script>
</body>

Wie sieht dein Code den jetzt aus ?

EDIT:
Achte mal auf deinen HTML Code , du vergisst immer """" , das ist wohl erlaubt, aber mal Ja und mal Nein ist gerade nicht der Hit

thesenseofthelife · 29 September 2019

Hallo vielen Dank, ich will 4 solcher Countdowns und habe auch alles umbenannt trotzdem funktioniert nur der eine von dir. Habe es mit beiden deiner Ansätze probiert:

Code:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title></title>
  </head>
  <body>
         <div id="box1">
           <button id="start"><img src="bilder/krugs.jpg" alt="" border="0" width="330" height="200"></button>
         </div>
         <div id="box2">
           <button id="startr"><img src="bilder/raptors.jpg" alt="" border="0" width="275" height="200"></button>
         </div>
        
         <div id="box5">
         <div id="counterout"></div>
         </div>
         <div id="box6">
         <div id="counteroutr"></div>
         </div>

         <div id="box7">

         </div>

         <div id="box8">
         </div>
  <script>
document.getElementById('start').addEventListener('click',function(){
  k=10;
krugstimer=setInterval(function(){

   k--;
   if(k>0){
       document.getElementById("counterout").innerHTML = k;
    }else{
       document.getElementById("counterout").innerHTML = 0;
       clearInterval(krugstimer);
    }
},1000)
});


document.getElementById('startr').addEventListener('clickr',function(){
  r=10;
raptorstimer=setInterval(function(){

   r--;
   if(r>0){
       document.getElementById("counteroutr").innerHTML = r;
    }else{
       document.getElementById("counteroutr").innerHTML = 0;
       clearInterval(raptorstimer);
    }
},1000)
});

  </script>
  </body>
</html>

und

Code:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title></title>
  </head>
  <body>
         <div id="box1">
           <button id="start"><img src="bilder/krugs.jpg" alt="" border="0" width="330" height="200"></button>
         </div>
         <div id="box2">
           <button id="startr"><img src="bilder/raptors.jpg" alt="" border="0" width="275" height="200"></button>
         </div>
         <div id="box5">
         <div id="counterout"></div>
         </div>
         <div id="box6">
         <div id="counteroutr"></div>
         </div>

         <div id="box7">

         </div>

         <div id="box8">
         </div>
  <script>
         var krugstimer;
         var laufzeit=10;
         function reset(){
             clearTimeout(krugstimer);
             console.log('Timer resetet '+laufzeit)
         }
         function start(k){
              k--;
              if(k>0){
                document.getElementById("counterout").innerHTML = k;
                krugstimer=setTimeout(function krugsk(){ start(k)},1000);
              }else{
                 document.getElementById("counterout").innerHTML = 0;
         }
         }
         document.getElementById('start').addEventListener('click',function krugsreset(){
           reset();
           start(laufzeit);
         });


         var raptorstimer;
         var laufzeitr=10;
         function resetr(){
             clearTimeout(raptorstimer);
             console.log('Timer resetet '+laufzeitr)
         }
         function startr(r){
              r--;
              if(r>0){
                document.getElementById("counteroutr").innerHTML = r;
                raptorstimer=setTimeout(function raptorsr(){ startr(r)},1000);
              }else{
                 document.getElementById("counteroutr").innerHTML = 0;
         }
         }
         document.getElementById('startr').addEventListener('clickr',function raptorsreset(){
           resetr();
           startr(laufzeitr);
         });

  </script>
  </body>
</html>

praktisch habe ich doch alles richtig umbenannt?

basti1012 · 29 September 2019

Bei beiden Versionen ist die Zeile schon mal falsch

Code:

    document.getElementById('startr').addEventListener('clickr',function

Ein Buchstabe zu viel, wenn du genau hinkuckst wirst du ihn finden.

Bei Version 2 mit mehreren Counter wird so auch nicht richtig klappen.
Version 1 könntest du so weiter bauen bis 4 Counter. Doch wird der Code da unübersichtlich und auch unötig lang.
man sollte beide Varianten anders bauen wenn man mehrere Counter brauch.Da muß ich mal selber testen welche möglichkeiten da an besten wäre , die mir gerade einfallen

Frage Countdown/Timer in HTML/CSS

thesenseofthelife

Neues Mitglied

basti1012

Senior HTML'ler

thesenseofthelife

Neues Mitglied

basti1012

Senior HTML'ler

thesenseofthelife

Neues Mitglied

basti1012

Senior HTML'ler

thesenseofthelife

Neues Mitglied

basti1012

Senior HTML'ler

Neueste Beiträge