Zeit runter Zählen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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:

    Source Code

    1. function countDown() {
    2. var time = document.getElementById('counter').innerHTML;
    3. time = time - 1; // oder +1
    4. // time formatieren
    5. document.getElementById('counter').innerHTML = time;
    6. }
    7. window.setInterval("countDown()", 1000);
    Display All



    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

    Source Code

    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);
    30. }
    Display All



    html

    Source Code

    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

    Source Code

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



    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

    Source Code

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

    Source Code

    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. };
    13. // beispiel: "17.5.2010"
    14. alert( strftime('%d.%m.%Y', 1274113924) );
    Display All


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

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

    Source Code

    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

    Source Code

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


    lg
    Dragon
    Riek-Media.com - Webhosting riek-media.com
  • Kannst du auch mit der aktuellen Uhrzeit arbeiten?
    Dann ist es viel einfacher:

    Source Code

    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 :)
  • 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


    Source Code

    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');
    9. function t()
    10. {
    11. n=new Date();
    12. s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
    13. m=0;
    14. h=0;
    15. if(s<0)
    16. {
    17. bx.innerHTML=""
    18. }
    19. else
    20. {
    21. if(s>59)
    22. {
    23. m=Math.floor(s/60);
    24. s=s-m*60;
    25. }
    26. if(m>59)
    27. {
    28. h=Math.floor(m/60);
    29. m=m-h*60;
    30. }
    31. if(s<10)
    32. {
    33. s="0"+s
    34. }
    35. if(m<10)
    36. {
    37. m="0"+m
    38. }
    39. bx.innerHTML=h+":"+m+":"+s+"";
    40. }
    41. window.setTimeout("t();",999)
    42. }
    43. window.onload=t;
    44. </script>
    45. {/literal}
    46. </td>
    47. <td width="82%">{$trans.msg}</td>
    48. </tr>
    49. {/foreach}
    50. </table>
    Display All
    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


    Source Code

    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});
    9. function t()
    10. {
    11. n=new Date();
    12. s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
    13. m=0;
    14. h=0;
    15. if(s<0)
    16. {
    17. bx.innerHTML=""
    18. }
    19. else
    20. {
    21. if(s>59)
    22. {
    23. m=Math.floor(s/60);
    24. s=s-m*60;
    25. }
    26. if(m>59)
    27. {
    28. h=Math.floor(m/60);
    29. m=m-h*60;
    30. }
    31. if(s<10)
    32. {
    33. s="0"+s
    34. }
    35. if(m<10)
    36. {
    37. m="0"+m
    38. }
    39. bx.innerHTML=h+":"+m+":"+s+"";
    40. }
    41. window.setTimeout("t();",999)
    42. }
    43. window.onload=t;
    44. </script>
    45. {/literal}
    46. </td>
    47. <td width="82%">{$trans.msg}</td>
    48. </tr>
    49. {/foreach}
    50. </table>
    Display All



    und hier mal der Quellcode des browsers

    Source Code

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



    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