Suche im Forum:
Suchen


Autor Nachricht
Beitrag13.08.2008 um 03:45 (UTC)    
Titel: Hilfe!!! Javascript code für spezial Countdownzähler
Antworten mit Zitat
Hi,

ich will in meine homepage einen endlosschleifenden Countdown zähler einbauen, dieser soll auf 2std (mit minuten und sec. angabe) eingestellt sein und dann immer bis 0 herunter zählen, so bald dieser bei 0 angelangt ist wieder auf 2std umspringen.
da ich aber absoulut keine ahnung von sowas hab und stunden lang googlete, habe ich einfach nix finden können das meinen vorstellungen entspricht

vielleicht kann mir ja einer von den erfahrenen hier helfen sowas zu erstellen.
wäre super

schon mal danke im voraus

Mfg edy
↑
Beitrag13.08.2008 um 22:19 (UTC)    
Titel:
Antworten mit Zitat
Code:
<script language="javascript" type="text/javascript">
   
    /*
     * -------------------------------------------------------------------------------------
     * "THE BEER-WARE LICENSE":
     * As long as you retain this notice you can do whatever you want with this stuff.
     * If we meet some day, and you think this stuff is worth it, you can buy me a beer
     * in return, Marcel Melzig - glattwalzwerk@web.de
     *
     * PS: If I meet the author of this license (Poul-Henning Kamp) i will spend him a beer.
     *
     * -------------------------------------------------------------------------------------
     */

      function countdown() {
     
      var Zeit = new Date();
     
      var Stunden = Zeit.getHours();
      var Minuten = Zeit.getMinutes();
      var Sekunden = Zeit.getSeconds();
     
      var countmin = 60 - (Minuten + 1);
      var countsec = 60 - (Sekunden + 1);
     
      var countminstring = countmin.toString();
      var countsecstring = countsec.toString();
      if(countminstring.length < 2)
      {
        var countminout = "0" + countminstring;
      } else {
        var countminout = countminstring;
      }
     
      if(countsecstring.length < 2)
      {
        var countsecout = "0" + countsecstring;
      } else {
        var countsecout = countsecstring;
      }
     
      if(Stunden %2 == 0)
        {
          document.getElementById("anzeige").firstChild.nodeValue = "1 : " + countminout + " : " + countsecout;
        }
          else
          {
            document.getElementById("anzeige").firstChild.nodeValue = "0 : " + countminout + " : " + countsecout;
          }
         
            var uhr = setInterval("countdown()", 1000);
      }
    </script>
   
    <input type="button" name="go" onclick="countdown()" />
    <p id="anzeige">00:00</p>


Habe ich heute nachmittag geschrieben. Das Script kannst du in "Text über dem Design" einfügen. Das Interval beginnt jede gerade Stunde des Tages. Also 14:00 Uhr, 16:00Uhr ...

Das Script startet hier mit einem Klick auf einen Button, aber du kannst es jedem Eventhandler zuweisen.


Zuletzt bearbeitet von glattwalzwerk am 13.08.2008, 23:20, insgesamt einmal bearbeitet
↑
Beitrag14.08.2008 um 11:42 (UTC)    
Titel:
Antworten mit Zitat
Hier nochmal eine überarbeitete Version, die automatisch startet und einem die Uhrzeit angibt, die beim Ablaufen des Countdown sein wird:


Code:
 <script language="javascript" type="text/javascript">
   
    /*
     * -------------------------------------------------------------------------------------
     * "THE BEER-WARE LICENSE":
     * As long as you retain this notice you can do whatever you want with this stuff.
     * If we meet some day, and you think this stuff is worth it, you can buy me a beer
     * in return, Marcel Melzig - glattwalzwerk@web.de
     *
     * PS: If I meet the author of this license (Poul-Henning Kamp) i will spend him a beer.
     *
     * -------------------------------------------------------------------------------------
     */
     

     var uhr = setInterval("countdown()", 1000);
     

      function countdown() {
     
      var Zeit = new Date();
     
      var Stunden = Zeit.getHours();
      var Minuten = Zeit.getMinutes();
      var Sekunden = Zeit.getSeconds();
     
      var countmin = 60 - (Minuten + 1);
      var countsec = 60 - (Sekunden + 1);
     
      var countminstring = countmin.toString();
      var countsecstring = countsec.toString();
     
      if(countminstring.length < 2)
      {
        var countminout = "0" + countminstring;
      } else {
        var countminout = countminstring;
      }
     
      if(countsecstring.length < 2)
      {
        var countsecout = "0" + countsecstring;
      } else {
        var countsecout = countsecstring;
      }
     
     switch(Stunden)
      {
        case 0: var nextstd = "02:00 Uhr";
        break;
       
        case 1: var nextstd = "02:00 Uhr";
        break;
       
        case 2: var nextstd = "04:00 Uhr";
        break;
       
        case 3: var nextstd = "04:00 Uhr";
        break;

        case 4: var nextstd = "06:00 Uhr";
        break;
       
        case 5: var nextstd = "06:00 Uhr";
        break;

        case 6: var nextstd = "08:00 Uhr";
        break;
       
        case 7: var nextstd = "08:00 Uhr";
        break;

        case 8: var nextstd = "10:00 Uhr";
        break;
       
        case 9: var nextstd = "10:00 Uhr";
        break;

        case 10: var nextstd = "12:00 Uhr";
        break;
       
        case 11: var nextstd = "12:00 Uhr";
        break;

        case 12: var nextstd = "14:00 Uhr";
        break;
       
        case 13: var nextstd = "14:00 Uhr";
        break;

        case 14: var nextstd = "16:00 Uhr";
        break;
       
        case 15: var nextstd = "16:00 Uhr";
        break;

        case 16: var nextstd = "18:00 Uhr";
        break;
       
        case 17: var nextstd = "18:00 Uhr";
        break;

        case 18: var nextstd = "20:00 Uhr";
        break;
       
        case 19: var nextstd = "20:00 Uhr";
        break;

        case 20: var nextstd = "22:00 Uhr";
        break;
       
        case 21: var nextstd = "22:00 Uhr";
        break;

        case 22: var nextstd = "00:00 Uhr";
        break;
       
        case 23: var nextstd = "00:00 Uhr";
        break;
       
        default: var nextstd = "error";
      }
     
      if(Stunden %2 == 0)
        {
          document.getElementById("anzeige").firstChild.nodeValue = "Noch " + "1 Stunde " + countminout + " Minuten und " + countsecout + " Sekunden" + " bis " + nextstd;
        }
          else
          {
            document.getElementById("anzeige").firstChild.nodeValue = "Noch " + "0 Stunden " + countminout + " Minuten und " + countsecout + " Sekunden" + " bis " + nextstd;
          }
      }
    </script>
    <p id="anzeige" style="font: bold 16px arial; color: blue;">00:00</p>


PS: Ich hoffe es ist aufgefallen. Den switch-Teil musste ich nochmal nachbearbeiten, da sonst nur jede zweite Stunde eine Uhrzeit angezeigt werden würde.


Zuletzt bearbeitet von glattwalzwerk am 14.08.2008, 15:34, insgesamt einmal bearbeitet
↑
Beitrag14.08.2008 um 22:10 (UTC)    
Titel:
Antworten mit Zitat
Danke.. das sieht schon eher nach dem aus Smile
kann ich den text ohne probleme doch ändern oder?

Mfg edy
↑
Beitrag15.08.2008 um 09:40 (UTC)    
Titel:
Antworten mit Zitat
Der Text der Angezeigt wird steht ja hier:

Code:
"Noch " + "0 Stunden " + countminout + " Minuten und " + countsecout + " Sekunden" + " bis " + nextstd;


countminout, countsecout und nextstd sind die Zahlen die Eingetragen werden. Alles was zwischen den "..." sind einfach nur Wörter. Die kannst du ändern oder löschen oder neues Einfügen.

Das Aussehen des Textes ist ja im style-Attribut des <p>-Tags festgelegt:

Code:
<p id="anzeige" style="font: bold 16px arial; color: blue;">00:00</p>


Da kann alles an CSS hinein geschrieben werden.
↑
Beitrag15.08.2008 um 12:19 (UTC)    
Titel:
Antworten mit Zitat
also mit CSS kenn ich mich gar nicht aus.. javacript hab ich mir so ein kleinen überblick verschaft.

ich danke dir für deine mühe.
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.