[JavaScript] countdown

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Terrorbeat, 31. August 2007 .

Schlagworte:
  1. 31. August 2007
    countdown

    Brauche ein Countdown der nur runterzählen muss also nicht ausrechnen wie lange noch bis zu einem Bestimmten zeitpunkt hin ist. Dieser sollte mehrmals auf einer seite anwendbar sein und sekunden, minuten, stunden anzeigen können. Am ende sollte er die Seite aktuelisieren.

    kennt jemand soetwas oder kann er mir das Programmieren?
     
  2. 31. August 2007
    AW: countdown

    wenn ich nach [G]javascript countdown[/G] suche, finde ich erstaunlich gute ergebnisse.
     
  3. 1. September 2007
    AW: countdown

    ja und die sind bei mir alle Lila makiert was soviel bedeuten soll wie "website bereits besucht".

    Nochmal damit es auch wirklich alle verstehen:
    Ich suche ein Countdownscript in dieser form 01:34:12 (Stunde:Minute:Sekunde) was ich mehrmals auf einer page einfügen kann und ich möchte nicht die Endzeit eingeben sondern die zeit die er runterzählen soll und das in Sekunden.
     
  4. 1. September 2007
    AW: countdown

    Ok.. Hab mir vor Kurzem ne "Klasse" geschrieben für countdowns, einfach mal so um das Verhalten mit mehreren Instanzen zu testen, die könnte dir evtl helfen wenn du ein wenig ahnung von JS hast kriegste das Umwandeln der Zeiten in das Format auch noch hin, ist zZ naemlich "2 seconds left" oder so..

    Spoiler
    Code:
     function Countdown() {
     var left = 0;
     var speed = 1000;
     var finishText = 'Finished.';
     var element = false; 
     
     this.genEl = false;
     this.id = false;
     this.ready=false;
     this.parent=false;
    
     this.setTime = function(time) {
     left = time;
     }
     this.setSpeed = function(speeed) {
     speed = speeed;
     }
     this.Start = function() {
     Proceed();
     }
     this.selectElement = function(eleement) {
     element = eleement;
     this.ready=true;
     }
     this.generateElement = function(kind,id,append) {
     this.id = id;
     element = document.createElement(kind);
     element.setAttribute('id',id);
     element.style.cssText = 'border:1px solid #000000;padding:20px;width:150px;margin:2px;text-align:center;';
     eval("this.parent = "+append);
     this.parent.appendChild(element);
     this.ready=true;
     }
     
     // intern function to decrement the left time var and bla.
     function Proceed() {
     if(this.ready==false){
     alert('Not yet ready. Please select/generate element.');
     } else {
     if(left > 0) {
     element.innerHTML = 'Countdown: '+left +' left.';
     left--;
     
     setTimeout(function() { Proceed(); },speed);
     } else {
     element.innerHTML = finishText;
     }
     }
     } 
     }
    
    Ist sicher noch n bisschen suboptimal aber funktioniert bei mir.

    Aufruf:
    Code:
     cdown = new Countdown();
     cdown.setTime(60);
     cdown.generateElement('div','cdown_div','document.body');
     cdown.Start();
     // ODER 
     cdown2 = new Countdown();
     cdown2.setTime(120);
     cdown2.setSpeed(500);
     cdown2.generateElement('div','cdown_div','document.body');
     cdown2.Start();
    

    Version 1 ist ohne setSpeed Methode, d.h. Speed liegt bei 1000 millisekunden was 1 Sekunde entspricht.

    Der Rest dürfte sich selber erklären.

    BtW: Wenn jemand Tipps hat wie ich das optimieren kann - danke
     
  5. 2. September 2007
    AW: countdown

    ja man kanns optimieren, denn javascript hat eine eigene funktion dafür:

    HTML:
    <html>
    <head>
    <script type="text/javascript">
     var intel, i, e;
     window.onload = function() {
     e = document.getElementById('cc');
     e.disabled = true;
     i=10;
     intel = window.setInterval("e.value = 'bitte warten '+i; i--; if(i < 0) { window.clearInterval(intel); e.disabled = false; e.value = 'fertig'; }", 1000); 
     }
    </script>
    </head>
    <body>
     <input type="button" id="cc" value="Lade" />
    </body>
    </html>
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.