Zeit runter Zählen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Zeit runter Zählen

    Hallo zusammen

    Hab da mal ne kleine frage wie ich das hinbekommen könnte. Undzwar wenn ich hier einen auftrag anklicke steht danach eine zeit z.b 02.33.29 dort. Wenn ich die seite aktualisiere aktualisiert er auh die zeit keine frage. Wie könnt ich es aber so machen das die zeit automatisch ruer läuft? Hab da mal was versucht mit nen javascript jedoch bisher ohne erfolg :)
    Riek-Media.com - Webhosting riek-media.com

  • Uiii ein Bonner :)

    Ich würde es als Timestamp in ein HTML Element mit ID ausgeben und dann einen Javascript Timer laufen lassen, der diese Zahl nimmt und im Sekundentakt um 1 verringert/erhöht.

    Gaaanz grob und ungetestet:

    Quellcode

    1. function countDown() {
    2. var time = document.getElementById('counter').innerHTML;
    3. time = time - 1; // oder +1
    5. // time formatieren
    7. document.getElementById('counter').innerHTML = time;
    8. }
    11. window.setInterval("countDown()", 1000);
    Alles anzeigen



    Da gibts aber auch schon geile jQuery Plugins für. Falls du das Rad nicht neu erfinden möchtest.

    Viele Grüße,
    X-Eon



    Edit: Natürlich setInterval -.-

  • puh das hab ich jetzt überhaupt nicht verstanden ^^

    mein versuch wars mit

    Quellcode

    1. function t(){
    2. v=new Date();
    3. var bxx=document.getElementById('bxx');
    4. n=new Date();
    5. ss=pp;
    6. s=ss-Math.round((n.getTime()-v.getTime())/1000.);
    7. m=0;h=0;
    8. if(s<0){
    9. //ps como session :P
    10. bxx.innerHTML=""
    11. }else{
    12. if(s>59){
    13. m=Math.floor(s/60);
    14. s=s-m*60
    15. }
    16. if(m>59){
    17. h=Math.floor(m/60);
    18. m=m-h*60
    19. }
    20. if(s<10){
    21. s="0"+s
    22. }
    23. if(m<10){
    24. m="0"+m
    25. }
    26. bxx.innerHTML=h+":"+m+":"+s+"<br>"
    27. }
    28. pp=pp-1;
    29. window.setTimeout("t();",999);
    31. }
    Alles anzeigen



    html

    Quellcode

    1. <table class="main" width="100%" align="center">
    2. {foreach from=$transferlist item=trans}
    3. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    4. <td width="2%"><div id="bxx">
    5. {$trans.str_time}</div></td>
    6. <td width="82%">{$trans.msg}</td>
    7. </tr>
    8. {/foreach}
    9. </table>



    so hatte ich es jetzt versucht aber leider geht da nix
    Riek-Media.com - Webhosting riek-media.com

  • ja ein Bonner :)

    Besten dank

    hab es nun so mal versucht

    Quellcode

    1. {literal}<script language=JavaScript>anz={$cnt_transferlist}; countDown();</script>{/literal}
    3. <table class="main" width="100%" align="center">
    4. {foreach from=$transferlist item=trans}
    5. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    6. <td width="2%"><div id="counter">
    7. {$trans.str_time}</div></td>
    8. <td width="82%">{$trans.msg}</td>
    9. </tr>
    10. {/foreach}
    11. </table>
    13. {literal}
    14. <script type="text/javascript">
    15. function countDown() {
    16. var time = document.getElementById('counter').innerHTML;
    17. time = time - 1; // oder +1
    19. // time formatieren
    21. document.getElementById('counter').innerHTML = time;
    22. }
    25. window.setInterval("countDown()", 1000);
    26. </script>
    27. {/literal}
    Alles anzeigen



    aber ihrgendwas mach ich falsch :)
    Riek-Media.com - Webhosting riek-media.com

  • So habs nun hinbekommen das er nun runter zählt.

    Wie bekomme ich nun den timespam in eine Uhrzeit formatiert?

    Hier mal mein bisheriger Code

    Quellcode

    1. {literal}
    2. <script type="text/javascript">
    3. function countDown()
    4. {
    5. var time = document.getElementById('counter').innerHTML;
    6. time = time - 1; // oder +1
    8. // time formatieren
    11. document.getElementById('counter').innerHTML = time;
    12. }
    13. window.setInterval("countDown()", 1000);
    16. </script>
    17. {/literal}
    19. <script language=JavaScript>anz={$cnt_transferlist}; counter();</script>
    21. <table class="main" width="100%" align="center">
    22. {foreach from=$transferlist item=trans}
    23. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    24. <td width="2%"><div id="counter">
    25. {$trans.str_time}</div></td>
    26. <td width="82%">{$trans.msg}</td>
    27. </tr>
    28. {/foreach}
    29. </table>
    Alles anzeigen
    Riek-Media.com - Webhosting riek-media.com

  • Ich möchte nur kurz anmerken, dass die Zeit nicht hundertprozentig genau runter gezählt wird. Gründe dafür sind vor allem der PC und entsprechende Prozesse, die neben dem Browser laufen könnten. Öffnet beispielsweise ein Besucher mit älterer Hardware ein Programm neben dem Browser, bleibt die Zeit gerne kurz stehen. Empfehlenswert wären, kommt es auf die Genauigkeit an, das Holen der Zeit über AJAX vom Server oder direkt vom Rechner.

  • Den Datumsstring musst du dir durch Aufruf diverser Funktionen selber konvertieren, siehe de.selfhtml.org/javascript/objekte/date.htm

    Oder du benutzt einfach folgende Funktion - aber sie beherrscht nicht alle Platzhalter

    Quellcode

    1. function strftime(f, t) {
    2. var date = new Date(t * 1000);
    3. f = f.replace('%%', '%');
    4. f = f.replace('%Y', date.getFullYear());
    5. f = f.replace('%y', date.getFullYear() % 100);
    6. f = f.replace('%m', date.getMonth() + 1);
    7. f = f.replace('%d', date.getDate());
    8. f = f.replace('%H', date.getHours());
    9. f = f.replace('%i', date.getMinutes());
    10. f = f.replace('%s', date.getSeconds());
    11. return f;
    12. };
    14. // beispiel: "17.5.2010"
    15. alert( strftime('%d.%m.%Y', 1274113924) );
    Alles anzeigen


    Willst du die komplette Funktion mit allen Platzhaltern haben, dann brauchst du die 300 Zeilen Quelltext von hier:
    phpjs.org/functions/date

  • X-Eon schrieb:

    Die Funktion von d0nut mit in deinen Javascript-Tag kopieren und dann da wo "//time formatieren" steht folgendes einfügen:

    Quellcode

    1. time = strftime('%d.%m.%Y %H:%i:%s', time);




    Leider klappt das noch nicht so ganz.... er formatiert zwar aber gibt kurz die zeit aus und danach steht dort NaN.NaN.NaN

    Hier mal der code

    Quellcode

    1. <table class="main" width="100%" align="center">
    2. {foreach from=$transferlist item=trans}
    4. {literal}
    5. <script type="text/javascript">
    6. function strftime(f, t) {
    7. var date = new Date(t * 1000);
    8. f = f.replace('%%', '%');
    9. f = f.replace('%Y', date.getFullYear());
    10. f = f.replace('%y', date.getFullYear() % 100);
    11. f = f.replace('%m', date.getMonth() + 1);
    12. f = f.replace('%d', date.getDate());
    13. f = f.replace('%H', date.getHours());
    14. f = f.replace('%i', date.getMinutes());
    15. f = f.replace('%s', date.getSeconds());
    16. return f;
    17. };
    18. function countDown()
    19. {
    20. var time = document.getElementById('counter').innerHTML;
    21. time = time - 1; // oder +1
    23. // time formatieren
    24. time = strftime('%H:%i:%s', time);
    26. document.getElementById('counter').innerHTML = time;
    27. }
    28. window.setInterval("countDown()", 1000);
    31. </script>
    33. {/literal}
    37. <script language=JavaScript>anz={$cnt_transferlist}; counter();</script>
    41. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    42. <td width="2%"><div id="counter">
    43. {$trans.str_time}</div></td>
    44. <td width="82%">{$trans.msg}</td>
    45. </tr>
    46. {/foreach}
    47. </table>
    Alles anzeigen


    lg
    Dragon
    Riek-Media.com - Webhosting riek-media.com

  • Kannst du auch mit der aktuellen Uhrzeit arbeiten?
    Dann ist es viel einfacher:

    Quellcode

    1. function countDown() {
    2. document.getElementById('counter').innerHTML = strftime('%H:%i:%s', parseInt((new Date()).getTime() / 1000));
    3. }


    Ansonsten solltest du noch ein verstecktes Eingabefeld einführen indem du den Unix Timestamp speicherst.
    Zu deinen Additionen müsstest du dann noch parseInt benutzen.

    Ich denke den Rest bekommst du alleine hin :)

  • ja so klappt es nur leider zählt er nun hoch und nicht runter :) Und wenn ich 3 Einträge habe lässt er beim ersten die zeit laufen und bei den anderen 2 schreibt er nur nenn time stamp. Wie kann ich das lösen das er bei allen die zeit laufen lässt

    lg
    Dragon
    Riek-Media.com - Webhosting riek-media.com

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Dragon4048 ()

  • So läuft es nun jedoch nur der erste.... wenn man mehre einträge hat zählt er immer nur eins runter und bei den anderen passiert nix

    hier mal der code


    Quellcode

    1. <table class="main" width="100%" align="center">
    2. {foreach from=$transferlist item=trans}
    3. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    4. <td width="2%"><div id="bx">{$trans.str_time_f}</div>
    5. {literal}
    6. <script type="text/javascript">
    7. v=new Date();
    8. var bx=document.getElementById('bx');
    10. function t()
    11. {
    12. n=new Date();
    13. s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
    14. m=0;
    15. h=0;
    16. if(s<0)
    17. {
    18. bx.innerHTML=""
    19. }
    20. else
    21. {
    22. if(s>59)
    23. {
    24. m=Math.floor(s/60);
    25. s=s-m*60;
    26. }
    27. if(m>59)
    28. {
    29. h=Math.floor(m/60);
    30. m=m-h*60;
    31. }
    32. if(s<10)
    33. {
    34. s="0"+s
    35. }
    36. if(m<10)
    37. {
    38. m="0"+m
    39. }
    40. bx.innerHTML=h+":"+m+":"+s+"";
    41. }
    42. window.setTimeout("t();",999)
    43. }
    44. window.onload=t;
    45. </script>
    46. {/literal}
    47. </td>
    48. <td width="82%">{$trans.msg}</td>
    49. </tr>
    50. {/foreach}
    51. </table>
    Alles anzeigen
    Riek-Media.com - Webhosting riek-media.com

  • ok das klingt natürlich logisch :)

    nHab das dann mal mit den id's gemacht aber leider geht es da auch nicht so wie es soll ^^

    die erste zeitzählt runter aber die 2 dann nicht mehr. Im Quellcode zeigt er aber auch die richtigen id's an


    bin echt sprachlos

    Hier nochmal den code


    Quellcode

    1. <table class="main" width="100%" align="center">
    2. {foreach from=$transferlist item=trans}
    3. <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
    4. <td width="2%"><div id="{$trans.id}">{$trans.str_time_f}</div>
    5. {literal}
    6. <script type="text/javascript">
    7. v=new Date();
    8. var bx=document.getElementById({/literal}{$trans.id}{literal});
    10. function t()
    11. {
    12. n=new Date();
    13. s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
    14. m=0;
    15. h=0;
    16. if(s<0)
    17. {
    18. bx.innerHTML=""
    19. }
    20. else
    21. {
    22. if(s>59)
    23. {
    24. m=Math.floor(s/60);
    25. s=s-m*60;
    26. }
    27. if(m>59)
    28. {
    29. h=Math.floor(m/60);
    30. m=m-h*60;
    31. }
    32. if(s<10)
    33. {
    34. s="0"+s
    35. }
    36. if(m<10)
    37. {
    38. m="0"+m
    39. }
    40. bx.innerHTML=h+":"+m+":"+s+"";
    41. }
    42. window.setTimeout("t();",999)
    43. }
    44. window.onload=t;
    45. </script>
    46. {/literal}
    47. </td>
    48. <td width="82%">{$trans.msg}</td>
    49. </tr>
    50. {/foreach}
    51. </table>
    Alles anzeigen



    und hier mal der Quellcode des browsers

    Quellcode

    1. <table class="main" width="100%" align="center">
    2. <tr bgcolor="#eeeeee">
    3. <td width="2%"><div id="4121">02:09:43</div>
    6. <script type="text/javascript">
    7. v=new Date();
    8. var bx=document.getElementById(4121);
    10. function t()
    11. {
    12. n=new Date();
    13. s=7783-Math.round((n.getTime()-v.getTime())/1000.);
    14. m=0;
    15. h=0;
    16. if(s<0)
    17. {
    18. bx.innerHTML=""
    19. }
    20. else
    21. {
    22. if(s>59)
    23. {
    24. m=Math.floor(s/60);
    25. s=s-m*60;
    26. }
    27. if(m>59)
    28. {
    29. h=Math.floor(m/60);
    30. m=m-h*60;
    31. }
    32. if(s<10)
    33. {
    34. s="0"+s
    35. }
    36. if(m<10)
    37. {
    38. m="0"+m
    39. }
    40. bx.innerHTML=h+":"+m+":"+s+"";
    41. }
    42. window.setTimeout("t();",999)
    43. }
    44. window.onload=t;
    45. </script>
    47. </td>
    48. <td width="82%"><font color='#00FF00'>Ihre Flotte wird bei 6:1:10 spionieren</font></td>
    49. </tr>
    50. <tr bgcolor="#dddddd">
    51. <td width="2%"><div id="4120">02:07:28</div>
    53. <script type="text/javascript">
    54. v=new Date();
    55. var bx=document.getElementById(4120);
    57. function t()
    58. {
    59. n=new Date();
    60. s=7648-Math.round((n.getTime()-v.getTime())/1000.);
    61. m=0;
    62. h=0;
    63. if(s<0)
    64. {
    65. bx.innerHTML=""
    66. }
    67. else
    68. {
    69. if(s>59)
    70. {
    71. m=Math.floor(s/60);
    72. s=s-m*60;
    73. }
    74. if(m>59)
    75. {
    76. h=Math.floor(m/60);
    77. m=m-h*60;
    78. }
    79. if(s<10)
    80. {
    81. s="0"+s
    82. }
    83. if(m<10)
    84. {
    85. m="0"+m
    86. }
    87. bx.innerHTML=h+":"+m+":"+s+"";
    88. }
    89. window.setTimeout("t();",999)
    90. }
    91. window.onload=t;
    92. </script>
    95. </td>
    96. <td width="82%"><font color='#00FF00'>Ihre Flotte wird bei 6:1:10 spionieren</font></td>
    97. </tr>
    98. </table>
    Alles anzeigen



    Vileicht siehst du den fehler.... ich bin scheinbar zu blöd dazu :P

    lg
    Dragon
    Riek-Media.com - Webhosting riek-media.com

  • Warum der Code nicht funktioniert:
    * ids dürfen nicht numerisch sein, schreib stattdessen irgendwas davor, z.B. ein x
    * settimer ruft immer die funkton t auf, die du immer wieder mit anderem Inhalt überschreibst
    * alles muss eindeutig sein, also eine eindeutige ID, einen eindeutigen Funktionsnamen und einen einmaligen window.onload event.
    * die funktion t() nutzt globale Variablen - bei mehrmaligem Aufruf, kann sich das in die Query kommen
    * Warum hat deine Sekunde nur 999 Millisekunden?

    Wenn ich morgen ein bisschen Zeit habe, versuch ich mal mein "Glück" ;)
    So lange, nehm dir meine Ratschläge zu Herzen und machs nochmal neu.
    Ich würde dir empfehlen eine Liste zu führen mit allen Elementen die aktualisiert werden sollen.
    Dann brauch es nur einen einzigen Timer geben, der alle Elemente runterzählt.
    Gute Codebasis dazu ist das hier: [wiki]Mehrere DIV Container mit AJAX aktualisieren[/wiki]
    Du musst nur den AJAX Part entfernen.

  • @d0nut nice nice :D
    - ich weis, dass php 4 veraltet ist und ich lieber php 5 nutzen sollte
    - ich mache das ganze nicht nur um mein projekt zu erstellen, sondern um das ganze auch zu verstehen
    - wenn das ganze in php 4 funktioniert will ich es sauber nach php 5 migrieren
    - kurz gesagt ich WILL LERNEN VERSTEHEN und restlos BEGREIFEN wie das was ich möchte in php 4 / 5 / 6 umgesetzt werden soll