muss was ändern , weiß aber nich wie ( in Javascript)

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

    • muss was ändern , weiß aber nich wie ( in Javascript)

      Hallo , also ich habe hier einen scriptcode den ich mir auch selber ausgedacht habe um eine Balkenuhr zu erstellen.
      Mit folgendem Code:

      <html>
      <head>
      <title> Strichuhr </title>


      <style type="text/css">

      input.strich {
      color: #FF0080;
      background: #000040;
      border: none;
      font-weight:bold;
      }

      #rand {
      border-collapse: collapse;color: #00FFFF;font-weight:bold;
      }
      #rand td {
      border: 2px solid #80FFFF;
      }

      </style>
      <script type="text/javascript">

      function meineUhr() {
      var ZeitHeute = new Date();

      var Striche = ("|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||");
      var StundenJetzt = ZeitHeute.getHours();
      var MinutenJetzt = ZeitHeute.getMinutes();
      var SekundenJetzt = ZeitHeute.getSeconds();

      var JahrJetzt = ZeitHeute.getFullYear();
      var MonatJetzt = ZeitHeute.getMonth()+1;
      var TagJetzt = ZeitHeute.getDate();

      document.getElementById("Stundenanzahl").value = Striche.substring(0, StundenJetzt);
      document.getElementById("Minutenanzahl").value = Striche.substring(0, MinutenJetzt);
      document.getElementById("Sekundenanzahl").value = Striche.substring(0, SekundenJetzt);

      document.getElementById("Jahresanzahl").value = JahrJetzt
      document.getElementById("Monatsanzahl").value = Striche.substring(0, MonatJetzt);
      document.getElementById("Tagesanzahl").value = Striche.substring(0, TagJetzt);

      if (StundenJetzt < 10)
      StundenJetzt = "0" + StundenJetzt;
      if (MinutenJetzt < 10)
      MinutenJetzt = "0" + MinutenJetzt;
      if (SekundenJetzt < 10)
      SekundenJetzt = "0" + SekundenJetzt;

      if (JahrJetzt < 10)
      JahrJetzt = "0" + JahrJetzt;
      if (MonatJetzt < 10)
      MonatJetzt = "0" + MonatJetzt;
      if (TagJetzt < 10)
      TagJetzt = "0" + TagJetzt;

      document.getElementById("Stunden").value = StundenJetzt;
      document.getElementById("Minuten").value = MinutenJetzt;
      document.getElementById("Sekunden").value = SekundenJetzt;


      document.getElementById("Jahre").value = JahrJetzt;
      document.getElementById("Monate").value = MonatJetzt;
      document.getElementById("Tage").value = TagJetzt;

      document.getElementById("Zeit").value = StundenJetzt + ":" + MinutenJetzt + ":" + SekundenJetzt + " Uhr";
      document.getElementById("Datum").value = TagJetzt + "." + MonatJetzt + "." + TagJetzt;

      setTimeout ("meineUhr()", 1000);

      }


      setTimeout("meineUhr()", 2000);


      </script>
      </head>
      <body onload="meineUhr()">

      <br>
      <h1> Datum </h1

      <br><br>
      <form id="Strichuhr">
      <table id="rand" cellspacing="0" cellpadding="4" border="0" bgcolor="#000040" >

      <tr>
      <td>Jahr:</td>
      <td><input readonly style="color:#800000" type="text" id="Jahre" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Jahresanzahl" size="40" style="color:#800000"></td>
      </tr>

      <tr>
      <td>Monat:</td>
      <td><input readonly style="color:#FFFF00" type="text" id="Monate" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Monatsanzahl" size="40" style="color:#FFFF00"></td>
      </tr>

      <tr>
      <td>Tag:</td>
      <td><input readonly style="color:80FF00" type="text" id="Tage" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Tagesanzahl" size="40" style="color:80FF00"></td>
      </tr>
      </table>

      </form>

      <br>
      <br>
      <br>

      <h1> Uhrzeit </h1>

      <br><br>
      <form id="Strichuhr">
      <table id="rand" cellspacing="0" cellpadding="4" border="0" bgcolor="#000040" >

      <tr>
      <td>Stunden:</td>
      <td><input readonly style="color:#800000" type="text" id="Stunden" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Stundenanzahl" size="40" style="color:#800000"></td>
      </tr>
      <tr>
      <td>Minuten:</td>
      <td><input readonly style="color:#FFFF00" type="text" id="Minuten" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Minutenanzahl" size="40" style="color:#FFFF00"></td>
      </tr>
      <tr>
      <td>Sekunden:</td>
      <td><input readonly style="color:80FF00" type="text" id="Sekunden" size="2" class="strich" ></td>
      <td><input readonly class="strich" type="text" id="Sekundenanzahl" size="40" style="color:80FF00"></td>
      </tr>
      <tr>
      <td>Zeit:</td>
      <td colspan="2"><input readonly type="text" id="Zeit" size="40" style="color:#FF8000"class="strich"></td>
      </tr>

      </table>
      </form>


      </body>
      <html>

      auf internet explorer funktioniert das Ganze auch.Meine Frage ist nun, ob es eine Möglichkeit gibt , dass ganze ohne die funktion. getElementbyid zu bewerkstelligen.Wäre nett wenn mir jemand helfen könnte.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dersandkönigrockt ()

    • Normalerweise kann man eine Variable dafür definieren und dann den Aufruf von getElementById nur einmal pro Element machen. Ist aber in deinem Fall nicht nötig. Habe das Ganze etwas umgeschrieben, sodass es besser funktionieren sollte. Du kannst die Funktion getElementById auch umgehen indem du mit der Funktion document.getElemntsByTagName alle oder gewisse Elemente rausholst und anhand der class interpretierst, ist in dem Fall aber ebenfalls unnötig.


      HTML-Quellcode

      1. <html>
      2. <head>
      3. <title> Strichuhr 2.0</title>
      6. <style type="text/css">
      8. input.strich {
      9. color: #FF0080;
      10. background: #000040;
      11. border: none;
      12. font-weight:bold;
      13. }
      15. #rand {
      16. border-collapse: collapse;color: #00FFFF;font-weight:bold;
      17. }
      18. #rand td {
      19. border: 2px solid #80FFFF;
      20. }
      22. </style>
      23. <script type="text/javascript">
      24. var Striche = ("|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||");
      25. var ZeitHeute = null;
      28. function getHours(){return ZeitHeute.getHours();}
      29. function getMinutes(){return ZeitHeute.getMinutes();}
      30. function getSeconds(){return ZeitHeute.getSeconds();}
      31. function getStriche(amount){return Striche.substring(0,amount);}
      33. function meineUhr() {
      34. ZeitHeute = new Date();
      35. var StundenJetzt = getHours();
      36. var MinutenJetzt = getMinutes();
      37. var SekundenJetzt = getSeconds();
      39. var JahrJetzt = ZeitHeute.getFullYear();
      40. var MonatJetzt = ZeitHeute.getMonth()+1;
      41. var TagJetzt = ZeitHeute.getDate();
      43. document.getElementById("Stundenanzahl").value = getStriche(StundenJetzt);
      44. document.getElementById("Minutenanzahl").value = getStriche(MinutenJetzt);
      45. document.getElementById("Sekundenanzahl").value = getStriche(SekundenJetzt);
      47. document.getElementById("Jahresanzahl").value = JahrJetzt
      48. document.getElementById("Monatsanzahl").value = getStriche(MonatJetzt);
      49. document.getElementById("Tagesanzahl").value = getStriche(TagJetzt);
      51. if (StundenJetzt < 10){ StundenJetzt = "0" + StundenJetzt;}
      52. if (MinutenJetzt < 10){ MinutenJetzt = "0" + MinutenJetzt;}
      53. if (SekundenJetzt < 10){ SekundenJetzt = "0" + SekundenJetzt;}
      55. if (JahrJetzt < 10){ JahrJetzt = "0" + JahrJetzt;}
      56. if (MonatJetzt < 10){ MonatJetzt = "0" + MonatJetzt;}
      57. if (TagJetzt < 10){ TagJetzt = "0" + TagJetzt;}
      59. document.getElementById("Stunden").value = StundenJetzt;
      60. document.getElementById("Minuten").value = MinutenJetzt;
      61. document.getElementById("Sekunden").value = SekundenJetzt;
      64. document.getElementById("Jahre").value = JahrJetzt;
      65. document.getElementById("Monate").value = MonatJetzt;
      66. document.getElementById("Tage").value = TagJetzt;
      68. document.getElementById("Zeit").value = StundenJetzt + ":" + MinutenJetzt + ":" + SekundenJetzt + " Uhr";
      69. document.getElementById("Datum").value = TagJetzt + "." + MonatJetzt + "." + TagJetzt;
      72. }
      74. function initialize(){
      75. setInterval(function(){meineUhr();},1000);
      76. }
      79. </script>
      80. </head>
      81. <body onLoad="initialize();">
      83. <br>
      84. <h1> Datum </h1>
      85. <br><br>
      86. <form id="Strichuhr">
      87. <table id="rand" cellspacing="0" cellpadding="4" border="0" bgcolor="#000040" >
      89. <tr>
      90. <td>Jahr:</td>
      91. <td><input readonly style="color:#800000" type="text" id="Jahre" size="2" class="strich" ></td>
      92. <td><input readonly class="strich" type="text" id="Jahresanzahl" size="40" style="color:#800000"></td>
      93. </tr>
      95. <tr>
      96. <td>Monat:</td>
      97. <td><input readonly style="color:#FFFF00" type="text" id="Monate" size="2" class="strich" ></td>
      98. <td><input readonly class="strich" type="text" id="Monatsanzahl" size="40" style="color:#FFFF00"></td>
      99. </tr>
      101. <tr>
      102. <td>Tag:</td>
      103. <td><input readonly style="color:80FF00" type="text" id="Tage" size="2" class="strich" ></td>
      104. <td><input readonly class="strich" type="text" id="Tagesanzahl" size="40" style="color:80FF00"></td>
      105. </tr>
      106. </table>
      108. </form>
      110. <br>
      111. <br>
      112. <br>
      114. <h1> Uhrzeit </h1>
      116. <br><br>
      117. <form id="Strichuhr">
      118. <table id="rand" cellspacing="0" cellpadding="4" border="0" bgcolor="#000040" >
      120. <tr>
      121. <td>Stunden:</td>
      122. <td><input readonly style="color:#800000" type="text" id="Stunden" size="2" class="strich" ></td>
      123. <td><input readonly class="strich" type="text" id="Stundenanzahl" size="40" style="color:#800000"></td>
      124. </tr>
      125. <tr>
      126. <td>Minuten:</td>
      127. <td><input readonly style="color:#FFFF00" type="text" id="Minuten" size="2" class="strich" ></td>
      128. <td><input readonly class="strich" type="text" id="Minutenanzahl" size="40" style="color:#FFFF00"></td>
      129. </tr>
      130. <tr>
      131. <td>Sekunden:</td>
      132. <td><input readonly style="color:80FF00" type="text" id="Sekunden" size="2" class="strich" ></td>
      133. <td><input readonly class="strich" type="text" id="Sekundenanzahl" size="40" style="color:80FF00"></td>
      134. </tr>
      135. <tr>
      136. <td>Zeit:</td>
      137. <td colspan="2"><input readonly type="text" id="Zeit" size="40" style="color:#FF8000"class="strich"></td>
      138. </tr>
      140. </table>
      141. </form>
      144. </body>
      145. <html>
      Alles anzeigen