Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Cronómetro digital</title>
- <!-- CSS da página -->
- <style type="text/css">
- body{
- background-color: #D3D3D3;
- }
- .titulo{
- color: red;
- text-align: center;
- }
- #contador{
- text-align: center;
- font-size: 75px;
- }
- .botao{
- padding-left: 50px;
- padding-right: 50px;
- padding-top: 20px;
- padding-bottom: 20px;
- border-radius: 15px;
- box-shadow: 2px 2px 3px;
- font-size: 20px;
- }
- h2{
- text-align: center;
- font-size: 40px;
- margin-bottom: 30px;
- font-family: "Arial";
- }
- table{
- margin: auto;
- text-align: center;
- border-collapse: collapse;
- font-size: 30px;
- font-family: "Arial";
- }
- #tab1{
- border-right: 1px solid black;
- border-bottom: 1px solid black;
- padding: 15px;
- }
- #tab2{
- border-bottom: 1px solid black;
- border-left: 1px solid black;
- padding: 15px;
- }
- .t1{
- border-right: 1px solid black;
- }
- </style>
- </head>
- <body onload="startTime()">
- <!-- Elementos da página -->
- <h1 class="titulo">Cronómetro digital</h1><br><br><br>
- <h1 id="hora">Hora real:</h1>
- <br><br>
- <table>
- <tr>
- <td><h1 id="h">00</h1></td>
- <td><h1 id="m">:00</h1></td>
- <td><h1 id="s">:00</h1></td>
- <td><h1 id="c">:00</h1></td>
- </tr>
- </table>
- <input type="button" name="Iniciar" class="botao" value="Iniciar" style="margin-left:600px;" onclick="iniciar();">
- <input type="button" name="Registar" class="botao" value="Registar" style="margin-left:100px;" onclick="registar();">
- <input type="button" name="Parar" class="botao" value="Parar" style="margin-left:100px;" onclick="parar();"">
- <input type="button" name="Reset" class="botao" value="Reset" style="margin-left:876px; margin-top: 50px;" onclick="limpar();">
- <h2 style="text-align: center;">Registos</h2><br>
- <table>
- <tr>
- <td id="tab1">Tempo</td>
- <td id="tab2">Horas</td>
- </tr>
- <tr>
- <td id="a1" class="t1"> </td>
- <td id="b1" class="t2"> </td>
- </tr>
- <tr>
- <td id="a2" class="t1"> </td>
- <td id="b2" class="t2"> </td>
- </tr>
- <tr>
- <td id="a3" class="t1"> </td>
- <td id="b3" class="t2"> </td>
- </tr>
- <tr>
- <td id="a4" class="t1"> </td>
- <td id="b4" class="t2"> </td>
- </tr>
- </table>
- <!-- Iniciar o JavaScript -->
- <script type="text/javascript">
- var myTime;
- var c=0;
- var s=0;
- var m=0;
- var h=0;
- var p=0;
- function iniciar(){
- myTime=setInterval(relogio,10);
- }
- function relogio(){
- c++;
- if (c>=1 && c<10){
- document.getElementById('c').innerHTML = ":0" + c;
- }
- if (c>=10 && c<100){
- document.getElementById('c').innerHTML = ':' + c;
- }
- if (c>=100 && c<1000){
- s++;
- c=-1;
- document.getElementById('s').innerHTML = ":0" + s;
- }
- if (s>=10){
- document.getElementById("s").innerHTML = ":" + s;
- }
- if (s==60){
- s=-1;
- m++;
- document.getElementById("m").innerHTML = ":0" + m;
- }
- if (m>=10 && m<60){
- document.getElementById("m").innerHTML = ":" + m;
- }
- if (m==60){
- m=-1;
- h++;
- document.getElementById("h").innerHTML = "0" + h;
- }
- if (h>=10 && h<24){
- document.getElementById("h").innerHTML = h;
- }
- if (h==24){
- h=0;
- }
- }
- function parar(){
- clearInterval(myTime);
- }
- function limpar(){
- h=00;
- m=00;
- s=00;
- c=00;
- document.getElementById('h').innerHTML='0'+h;
- document.getElementById('m').innerHTML=':0'+m;
- document.getElementById('s').innerHTML=':0'+s;
- document.getElementById('c').innerHTML=':0'+c;
- clearInterval(myTime);
- }
- function registar(){
- if (p>=4){
- p=0;
- }
- p++;
- document.getElementById("a" + p).innerHTML = h + ":" + m + ":" + s + ":" + c;
- document.getElementById("b" + p).innerHTML = document.getElementById("hora").innerHTML;
- }
- function startTime() {
- var today = new Date();
- var h = today.getHours();
- var m = today.getMinutes();
- var s = today.getSeconds();
- m = checkTime(m);
- s = checkTime(s);
- document.getElementById('hora').innerHTML =
- "Hora real :" + h + ":" + m + ":" + s;
- var t = setTimeout(startTime, 500);
- }
- function checkTime(i) {
- if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
- return i;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement