Countdown: Mehrere Zähler aktualisieren

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

  • Das Tutorial erklärt, wie man mit JavaScript einen Countdown macht.
    Es können beliebig viele Felder gleichzeitig aktualisiert werden. Intervall und Richtung kann einfach angegeben werden.
    == Info ==
    Der Code benutzt das Observer Design Pattern.
    Die Geschwindigkeit kann manipuliert werden.

    == Konfiguration ==
    Das Update Interval wird im Konstruktor übergeben. Im Beispiel wird pro Sekunde 1x runtergezählt:

    Quellcode

    1. var up = new UpdateCounters(-1);


    Optional könnt ihr das Updateintervall in Millisekunden auch als 2ten Parameter angeben. Folgendes Beispiel macht ein Update, alle 2 Sekunden.

    Quellcode

    1. var up = new UpdateCounters(-1, 2000);


    Jedes Objekt das aktualisiert werden soll, muss registriert werden. Das funktioniert wie folgt:

    Quellcode

    1. <script type="text/javascript">up.push('update1');</script>


    Das update1 referenziert einen Container mit der ID "update1". Es kann ein Blockelement (DIV), aber auch ein Inlineelement (SPAN) sein.

    Quellcode

    1. <div id="update1">01:02:03</div>


    == HTML Datei ==

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <title>Mehrere Counter runterzählen</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <script type="text/javascript" src="update-counters.js"></script>
    7. <script type="text/javascript">
    8. var up = new UpdateCounters(-1);
    9. </script>
    10. </head>
    11. <body onload="up.start();">
    12. <h2>Das Update ist auf -1 konfiguriert, es wird also runtergezählt</h2>
    13. <div id="update1">01:02:03</div>
    14. <script type="text/javascript">up.push('update1');</script>
    15. <div id="update2">04:05:06</div>
    16. <script type="text/javascript">up.push('update2');</script>
    17. <div id="update3">07:08:09</div>
    18. <script type="text/javascript">up.push('update3');</script>
    19. <p>
    20. <a href="#" onclick="up.fire()">force single update</a> ::
    21. <a href="#" onclick="up.start()">start autoupdate</a> ::
    22. <a href="#" onclick="up.stop()">disable autoupdate</a>
    23. </p>
    24. <p>
    25. <a href="#" onclick="up.speedUp()">increase speed</a> ::
    26. <a href="#" onclick="up.speedDown()">decrease speed</a>
    27. </p>
    28. </body>
    29. </html>
    Alles anzeigen


    == JavaScript Datei ==

    Quellcode

    1. /**
    2. * xxx [..] by http://www.easy-coding.de
    3. *
    4. * @param poll integer update interval in microsecons
    5. */
    6. function UpdateCounters(update, poll) {
    7. this.update = update;
    8. this.poll = poll ? poll : 1000;
    9. this.list = [];
    10. this.timer = null;
    11. this.format = /(\d+):(\d+):(\d+)/;
    12. /**
    13. * adds elem
    14. * @param id string as id
    15. */
    16. this.push = function(id) {
    17. this.list.push(id);
    18. };
    19. /**
    20. * gets seconds from string "h:m:s"
    21. * parseInt is forced to use decimal system
    22. */
    23. this.fromFormat = function(str) {
    24. this.format.exec(str);
    25. return (parseInt(RegExp.$1, 10) * 60 * 60)
    26. + (parseInt(RegExp.$2, 10) * 60)
    27. + (parseInt(RegExp.$3, 10));
    28. }
    29. /**
    30. * gets string "h:m:s" from seconds
    31. */
    32. this.toFormat = function(s) {
    33. s = s > 0 ? s : 0;
    34. var h = m = 0;
    35. if(s > 59) {
    36. m = Math.floor(s/60);
    37. s = s - ( m*60 );
    38. }
    39. if(m > 59) {
    40. h = Math.floor(m/60);
    41. m = m - ( h*60 );
    42. }
    43. if(h < 10) {
    44. h = "0"+h;
    45. }
    46. if(s < 10) {
    47. s = "0"+s;
    48. }
    49. if(m < 10) {
    50. m = "0"+m;
    51. }
    52. return h +":"+ m +":"+ s;
    53. }
    54. /**
    55. * sends single request
    56. * @param loop boolean
    57. */
    58. this.fire = function() {
    59. var i, dom;
    60. for(i=0; i<this.list.length; i++) {
    61. dom = document.getElementById(this.list[i]);
    62. dom.innerHTML = this.toFormat(this.fromFormat(dom.innerHTML) + this.update);
    63. }
    64. };
    65. /**
    66. * stops auto updater
    67. */
    68. this.stop = function() {
    69. window.clearTimeout(this.timer);
    70. };
    71. this.speedUp = function(factor) {
    72. this.stop();
    73. this.poll /= factor || 2;
    74. this.start();
    75. }
    76. this.speedDown = function(factor) {
    77. this.stop();
    78. this.poll *= factor || 2;
    79. this.start();
    80. }
    81. /**
    82. * starts auto updater
    83. */
    84. this.start = function() {
    85. this.timer = window.setInterval(function(up) {
    86. return function() {
    87. up.fire();
    88. };
    89. }(this), this.poll);
    90. };
    91. }
    Alles anzeigen


    == Demo ==
    demo.easy-coding.de/javascript/update-counters/
    Download: demo.easy-coding.de/javascript/update-counters/download.zip

    3.678 mal gelesen