[JavaScript] Countdown + Progressbar

Dieses Thema im Forum "Webentwicklung" wurde erstellt von badloader, 24. Februar 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 24. Februar 2009
    Countdown + Progressbar

    Hallo,

    da ich weiß, dass es sowas sicher schon fertig gibt, wollte ich mal nachfragen, ob jemand von euch ein Script kennt, mit dem man eine Zeit definiert an der der Countdown anhält und wo dazu noch eine Progressbar mit geht.

    Beispiel:

    Input: timestamp von jetzt in 3 stunden
    Output:
    Progressbar: geht aktiv prozentual mit
    Countdown: noch 3 Stunden (zählt aktiv runter)

    Ich denke ihr wisst, was ich meine

    gruß bad
     
  2. 25. Februar 2009
    AW: Countdown + Progressbar

    So ich habe es jetzt sogar geschafft, einen counter zu finden wie ich ihn haben will jetzt wollte ich noch die progressbar erstellen. das ganze mache ich mit scriptaculous.

    Alle nötigen libs sind geladen! Irgendwie werden die Prozent nicht richtig ausgerechnet aber ich habe absolut keine ahnung wieso es nicht klappt.

    HTML:
    <span id="countdown">Kein JS aktiviert</span>
    <div id="barContainer"><div id="progressBar"></div></div>
    <script type='text/javascript'>
    var end = new Date(<?php echo $timestamp*1000 ?>);
    function toSt2(n) {
     s = '';
     if (n < 10) s += '0';
     return (s + n).toString();
    }
    function toSt3(n) {
     s = '';
     if (n < 10) s += '00';
     else if (n < 100) s += '0';
     return (s + n).toString();
    }
    function countdown()
    {
     now = new Date();
     count = Math.floor(end.getTime() - now.getTime());
     progressBar(count);
     if(count > 0) {
     miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
     seconds = toSt2(count%60); count = Math.floor(count/60);
     minutes = toSt2(count%60); count = Math.floor(count/60);
     hours = toSt2(count%24);
     days = count;
     document.getElementById('countdown').innerHTML = hours + ':' + minutes + ':' + seconds
     setTimeout('countdown()', 100);
     } else {
     document.getElementById('countdown').innerHTML = 'Fertig!';
     window.location.reload();
     }
    }
    function progressBar(rest)
    {
     maxwidth = 200;
     restsekunden = Math.floor(rest/1000);
     gesamtsekunden = Math.floor(end.getTime()/1000);
     percentage = gesamtsekunden / restsekunden;
     width = maxwidth * percentage;
     // Prozent wird völlig falsch errechet!!!
     // Zu prüfen mit: document.getElementById('progressBar').innerHTML = percent;
     new Effect.Morph('progressBar', {style:'width:' + width + 'px', duration:'0'});
    }
    countdown();
    </script>
     
  3. 25. Februar 2009
    AW: Countdown + Progressbar

    width = maxwidth/percentage;

    bsp:
    gesamtsekunden = 100;
    restsekunden = 20;
    percentage = 100/20; // 5
    width = maxwidth / 5;
    maxwidth = 250
    width = 50; // ein fünftel aka 20%

    mathe sollte man schon können.
     
  4. 25. Februar 2009
    AW: Countdown + Progressbar

    Der witz ist, dass es nicht klappt....

    Mathe kann ich ja so ist es eigentlich nicht. auch prozentrechnen geht ja

    aber wenn ich das mache (funktion countdown bleibt gleich):
    Code:
    function progressBar(rest)
    {
     maxwidth = 200;
     restsekunden = Math.floor(rest/1000);
     gesamtsekunden = Math.floor(end.getTime()/1000);
     percent = gesamtsekunden / restsekunden;
     width = maxwidth/percent;
     document.getElementById('progressBar').innerHTML = width;
     //new Effect.Morph('progressBar', {style:'width:' + width + 'px', duration:'0'});
    }
    Dabei kommt sowas raus: 0.000008902655372437565
     
  5. 26. Februar 2009
    AW: Countdown + Progressbar

    Habe die Lösung selbst gefunden:

    Code:
    <script type='text/javascript'>
    var end = new Date(<?php echo $skill['end']*1000 ?>);
    var start = new Date();
    var holeDiff = end.getTime() - start.getTime();
    function toSt2(n) {
     s = '';
     if (n < 10) s += '0';
     return (s + n).toString();
    }
    function toSt3(n) {
     s = '';
     if (n < 10) s += '00';
     else if (n < 100) s += '0';
     return (s + n).toString();
    }
    function countdown()
    {
     now = new Date();
     count = Math.floor(end.getTime() - now.getTime());
     progressBar(count);
     if(count > 0) {
     miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
     seconds = toSt2(count%60); count = Math.floor(count/60);
     minutes = toSt2(count%60); count = Math.floor(count/60);
     hours = toSt2(count%24);
     days = count;
     document.getElementById('countdown').innerHTML = hours + ':' + minutes + ':' + seconds
     setTimeout('countdown()', 100);
     } else {
     document.getElementById('countdown').innerHTML = 'Fertig!';
     window.location.reload();
     }
    }
    function progressBar(rest)
    {
     maxwidth = 200;
     percentage = (holeDiff-rest) / holeDiff;
     width = percentage * maxwidth;
     new Effect.Morph('progressBar', {style:'width:' + width + 'px', duration:'0'});
    }
    countdown();
    </script>
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.