Advertisement
Pedromaia26

Teste_cronometromeu

Dec 10th, 2018
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.62 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Cronómetro digital</title>
  5. <!-- CSS da página -->
  6. <style type="text/css">
  7. body{
  8. background-color: #D3D3D3;
  9. }
  10. .titulo{
  11. color: red;
  12. text-align: center;
  13. }
  14. #contador{
  15. text-align: center;
  16. font-size: 75px;
  17. }
  18. .botao{
  19. padding-left: 50px;
  20. padding-right: 50px;
  21. padding-top: 20px;
  22. padding-bottom: 20px;
  23. border-radius: 15px;
  24. box-shadow: 2px 2px 3px;
  25. font-size: 20px;
  26. }
  27. h2{
  28. text-align: center;
  29. font-size: 40px;
  30. margin-bottom: 30px;
  31. font-family: "Arial";
  32. }
  33. table{
  34. margin: auto;
  35. text-align: center;
  36. border-collapse: collapse;
  37. font-size: 30px;
  38. font-family: "Arial";
  39. }
  40. #tab1{
  41. border-right: 1px solid black;
  42. border-bottom: 1px solid black;
  43. padding: 15px;
  44. }
  45. #tab2{
  46. border-bottom: 1px solid black;
  47. border-left: 1px solid black;
  48. padding: 15px;
  49. }
  50. .t1{
  51. border-right: 1px solid black;
  52. }
  53. </style>
  54. </head>
  55. <body onload="startTime()">
  56. <!-- Elementos da página -->
  57. <h1 class="titulo">Cronómetro digital</h1><br><br><br>
  58. <h1 id="hora">Hora real:</h1>
  59. <br><br>
  60. <table>
  61. <tr>
  62. <td><h1 id="h">00</h1></td>
  63. <td><h1 id="m">:00</h1></td>
  64. <td><h1 id="s">:00</h1></td>
  65. <td><h1 id="c">:00</h1></td>
  66. </tr>
  67. </table>
  68. <input type="button" name="Iniciar" class="botao" value="Iniciar" style="margin-left:600px;" onclick="iniciar();">
  69. <input type="button" name="Registar" class="botao" value="Registar" style="margin-left:100px;" onclick="registar();">
  70. <input type="button" name="Parar" class="botao" value="Parar" style="margin-left:100px;" onclick="parar();"">
  71. <input type="button" name="Reset" class="botao" value="Reset" style="margin-left:876px; margin-top: 50px;" onclick="limpar();">
  72. <h2 style="text-align: center;">Registos</h2><br>
  73. <table>
  74. <tr>
  75. <td id="tab1">Tempo</td>
  76. <td id="tab2">Horas</td>
  77. </tr>
  78. <tr>
  79. <td id="a1" class="t1">&nbsp;</td>
  80. <td id="b1" class="t2">&nbsp;</td>
  81. </tr>
  82. <tr>
  83. <td id="a2" class="t1">&nbsp;</td>
  84. <td id="b2" class="t2">&nbsp;</td>
  85. </tr>
  86. <tr>
  87. <td id="a3" class="t1">&nbsp;</td>
  88. <td id="b3" class="t2">&nbsp;</td>
  89. </tr>
  90. <tr>
  91. <td id="a4" class="t1">&nbsp;</td>
  92. <td id="b4" class="t2">&nbsp;</td>
  93. </tr>
  94. </table>
  95. <!-- Iniciar o JavaScript -->
  96. <script type="text/javascript">
  97. var myTime;
  98. var c=0;
  99. var s=0;
  100. var m=0;
  101. var h=0;
  102. var p=0;
  103. function iniciar(){
  104. myTime=setInterval(relogio,10);
  105. }
  106.  
  107. function relogio(){
  108. c++;
  109. if (c>=1 && c<10){
  110. document.getElementById('c').innerHTML = ":0" + c;
  111. }
  112. if (c>=10 && c<100){
  113. document.getElementById('c').innerHTML = ':' + c;
  114. }
  115. if (c>=100 && c<1000){
  116. s++;
  117. c=-1;
  118. document.getElementById('s').innerHTML = ":0" + s;
  119. }
  120. if (s>=10){
  121. document.getElementById("s").innerHTML = ":" + s;
  122. }
  123. if (s==60){
  124. s=-1;
  125. m++;
  126. document.getElementById("m").innerHTML = ":0" + m;
  127. }
  128. if (m>=10 && m<60){
  129. document.getElementById("m").innerHTML = ":" + m;
  130. }
  131. if (m==60){
  132. m=-1;
  133. h++;
  134. document.getElementById("h").innerHTML = "0" + h;
  135. }
  136. if (h>=10 && h<24){
  137. document.getElementById("h").innerHTML = h;
  138. }
  139. if (h==24){
  140. h=0;
  141. }
  142. }
  143.  
  144. function parar(){
  145. clearInterval(myTime);
  146. }
  147.  
  148. function limpar(){
  149. h=00;
  150. m=00;
  151. s=00;
  152. c=00;
  153. document.getElementById('h').innerHTML='0'+h;
  154. document.getElementById('m').innerHTML=':0'+m;
  155. document.getElementById('s').innerHTML=':0'+s;
  156. document.getElementById('c').innerHTML=':0'+c;
  157. clearInterval(myTime);
  158. }
  159.  
  160. function registar(){
  161. if (p>=4){
  162. p=0;
  163. }
  164. p++;
  165. document.getElementById("a" + p).innerHTML = h + ":" + m + ":" + s + ":" + c;
  166. document.getElementById("b" + p).innerHTML = document.getElementById("hora").innerHTML;
  167. }
  168.  
  169. function startTime() {
  170. var today = new Date();
  171. var h = today.getHours();
  172. var m = today.getMinutes();
  173. var s = today.getSeconds();
  174. m = checkTime(m);
  175. s = checkTime(s);
  176. document.getElementById('hora').innerHTML =
  177. "Hora real :" + h + ":" + m + ":" + s;
  178. var t = setTimeout(startTime, 500);
  179.  
  180. }
  181. function checkTime(i) {
  182. if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
  183. return i;
  184. }
  185.  
  186. </script>
  187. </body>
  188. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement