kostenloser Webspace werbefrei: lima-city

Countdown 2 mal auf einer Seite anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   ultimate-bravery

   ultimate-bravery hat kostenlosen Webspace.

   12:21, 31.12.2012

   Hallo,
   ich habe einen Javascript Countdown, der eine bestimmte Anzahl von Sekunden runter zählt. Das funktioniert auch einwandfrei, wenn ich den Countdown einmal auf meiner Seite ausgebe. Ich möchte den Countdown allerdings an zwei Stellen auf meiner Seite ausgeben und das klappt nicht.
   
   Hier ist der Code für den Countdown:
   
   

   <script language="JavaScript"> 
   <!--     Countdown für das automatische Aktualisieren
           
   function countdown(zahl){ 
   if(zahl>1){  
        // über 1 Sekunde hinaus -> x Sekunden 
        document.getElementById('downloading').innerHTML=zahl+" Sekunden"; 
        count(zahl);             
   } 
   else if(zahl==1){  
        // 1 Sekunde 
        document.getElementById('downloading').innerHTML=zahl+" Sekunde"; 
        count(zahl);             
   } 
   else {  
        // Countdown abgelaufen, beliebige Handlung kann eingebaut werden 
         document.getElementById('downloading').innerHTML="0 Sekunden"; 
   } 
   } 
                
   function count(countzahl){ 
        // gewünschte Handlung kann hier eingebaut werden 
       countzahl=countzahl-1; 
        setTimeout("countdown("+countzahl+");",1000);             
   } 
   count(<?php echo $rest ?>); 
   
   // --> 
   </script> 
   <?php
   $rest2 = $rest*1000;
   ?>
   <script type="text/javascript">
   function Neuladen () {
   window.location.href = "<?php echo $link ?>";
   }
   window.setTimeout ("Neuladen()", <?php echo $rest2 ?>);
   </script>

   
   
   Ausgegeben wird der Countdown so:
   
   

   <span id='downloading'>$rest Sekunden</span>

   
   
   Wenn ich also versuche, diesen Code zum Ausgeben zwei mal auf meine zu setzen, läuft nur der Countdown runter, der als erstes Ausgegeben wird. Bei der zweiten Ausgabe wird nur die Startzeit angezeigt. Sie läuft nicht runter. Woran liegt das?
   
   Hoffe ihr könnt mir helfen.
   Liebe Grüße
   
   Beitrag zuletzt geändert: 31.12.2012 12:24:09 von ultimate-bravery

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. l*********e

   18:50, 2.1.2013

   Das funktioniert so nicht, weil du zwei Elementen die gleiche ID gegeben hast. Wie soll JavaScript jetzt wissen welche gemeint ist.
   Aber auch für ein solches Problem gibt es eine Lösung:
   
   

   <script language="JavaScript"> 
   <!--     Countdown für das automatische Aktualisieren
           
   function countdown(zahl){ 
   if(zahl>1){  
        // über 1 Sekunde hinaus -> x Sekunden 
        document.getElementById('downloading1').innerHTML=zahl+" Sekunden"; 
        document.getElementById('downloading2').innerHTML=zahl+" Sekunden";
        count(zahl);             
   } 
   else if(zahl==1){  
        // 1 Sekunde 
        document.getElementById('downloading1').innerHTML=zahl+" Sekunde"; 
        document.getElementById('downloading2').innerHTML=zahl+" Sekunde"; 
        count(zahl);             
   } 
   else {  
        // Countdown abgelaufen, beliebige Handlung kann eingebaut werden 
         document.getElementById('downloading1').innerHTML="0 Sekunden"; 
         document.getElementById('downloading'2).innerHTML="0 Sekunden";
   } 
   } 
                
   function count(countzahl){ 
        // gewünschte Handlung kann hier eingebaut werden 
       countzahl=countzahl-1; 
        setTimeout("countdown("+countzahl+");",1000);             
   } 
   count(<?php echo $rest ?>); 
   
   // --> 
   </script> 
   <?php
   $rest2 = $rest*1000;
   ?>
   <script type="text/javascript">
   function Neuladen () {
   window.location.href = "<?php echo $link ?>";
   }
   window.setTimeout ("Neuladen()", <?php echo $rest2 ?>);
   </script>

   
   
   Oder eine kürzere Lösung:
   

   <script language="JavaScript"> 
   <!--     Countdown für das automatische Aktualisieren
           
   function AktualisiereCounter(text)
   {
         document.getElementById('downloading1').innerHTML = text;
         document.getElementById('downloading2').innerHTML = text;
   }
   
   function countdown(zahl){ 
   if(zahl>1){  
        // über 1 Sekunde hinaus -> x Sekunden 
        AktualisiereCounter(zahl+" Sekunden)"; 
        count(zahl);             
   } 
   else if(zahl==1){  
        // 1 Sekunde 
        AktualisiereCounter(zahl+" Sekunde"); 
        count(zahl);             
   } 
   else {  
        // Countdown abgelaufen, beliebige Handlung kann eingebaut werden 
          AktualisiereCounter("0 Sekunden"); 
   } 
   } 
                
   function count(countzahl){ 
        // gewünschte Handlung kann hier eingebaut werden 
       countzahl=countzahl-1; 
        setTimeout("countdown("+countzahl+");",1000);             
   } 
   count(<?php echo $rest ?>); 
   
   // --> 
   </script> 
   <?php
   $rest2 = $rest*1000;
   ?>
   <script type="text/javascript">
   function Neuladen () {
   window.location.href = "<?php echo $link ?>";
   }
   window.setTimeout ("Neuladen()", <?php echo $rest2 ?>);
   </script>

   
   
   Jetzt musst du die Counter natürlich mit
   

   <span id='downloading1'>$rest Sekunden</span>

   und

   <span id='downloading2'>$rest Sekunden</span>

   einbinden

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?