daily pastebin goal
4%
SHARE
TWEET

Untitled

a guest Oct 22nd, 2018 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <title>Cronometro</title>
  5.     <link rel="icon" type="image/png" href="https://lh3.googleusercontent.com/Q-TyP-0iMexxAQDt7N81PLjLCrkoBkZVuSxP_1laOHxmctHhwJKsOXC9DYeBGXs8NIM=s180" sizes="64x64">
  6.     <meta charset="utf-8">
  7.     <style>
  8.     .cronometro{
  9.         width:100%;
  10.         font-size:350%;
  11.         text-align:center;
  12.         margin-top:50px;
  13.     }
  14.     .container{
  15.         border:1px solid black;
  16.         border-radius:50%;
  17.         display:inline-block;
  18.         width:360px;
  19.         height:360px;
  20.         vertical-align:middle;
  21.     }
  22.     .container span{
  23.         top:40%;
  24.         position:relative;
  25.     }
  26.     .iniciar{
  27.         color:#7c9ed3;
  28.         cursor:pointer;
  29.     }
  30.     .iniciar:hover{
  31.         color:#516687;
  32.     }
  33.     table{
  34.         margin:auto;
  35.         text-align:center;
  36.     }
  37.     table tr td input{
  38.         margin:2em;
  39.         padding:1em 3em;
  40.         background-color:rgba(134, 147, 168,0.5);
  41.     }
  42.     table tr td input:focus{
  43.         outline-width:0px;
  44.     }
  45.     </style>
  46.     <script>
  47.     function values(){
  48.         var horas=document.getElementById("horas");
  49.         var minutos=document.getElementById("minutos");
  50.         var segundos=document.getElementById("segundos");
  51.         var milisegundos=document.getElementById("milisegundos");
  52.         var btnprincipal=document.getElementById("btnprincipal");
  53.     }
  54.     function reset(){
  55.         horas.innerHTML="00";
  56.         minutos.innerHTML="00";
  57.         segundos.innerHTML="00";
  58.         milisegundos.innerHTML="00";
  59.     }
  60.     function numero(num){
  61.         //Cuando ya has iniciado el cronometro y lo has pausado
  62.         if(milisegundos.innerHTML=="00"){
  63.             //Cuando las horas estan en 00
  64.             if(horas.innerHTML=="00"){
  65.                 //Cuando los minutos estan en 00
  66.                 if(minutos.innerHTML=="00"){
  67.                     //Cuando los segundos estan en 00
  68.                     if(segundos.innerHTML=="00"){
  69.                         segundos.innerHTML="0"+num;
  70.                     }
  71.                     //Cuando los segundos tienen las decimas en 0
  72.                     else{
  73.                         //Cuando es la 1º vez que pasa por aqui
  74.                         if(segundos.innerHTML.substr(0,1)=="0"){
  75.                             segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  76.                         }
  77.                         //Cuando es la 2º vez que pasa por aqui
  78.                         else{
  79.                             minutos.innerHTML="0"+segundos.innerHTML.substr(0,1);
  80.                             segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  81.                         }
  82.                     }
  83.                 }
  84.                 //Cuando las decimas de los minutos estan en 0
  85.                 else{
  86.                     if(minutos.innerHTML.substr(0,1)=="0"){
  87.                         minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  88.                         segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  89.                     }
  90.                     else{
  91.                         horas.innerHTML="0"+minutos.innerHTML.substr(0,1);
  92.                         minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  93.                         segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  94.                     }
  95.                 }
  96.             }
  97.             else{
  98.                 if(horas.innerHTML.substr(0,1)=="0"){
  99.                     if(horas.innerHTML.substr(1)>2){
  100.                         if(minutos.innerHTML.substr(0,1)>4){
  101.                             horas.innerHTML="2"+"4";
  102.                             minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  103.                             segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  104.                         }
  105.                         else{
  106.                             horas.innerHTML="2"+minutos.innerHTML.substr(0,1);
  107.                             minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  108.                             segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  109.                         }
  110.                     }
  111.                     else{
  112.                         if(horas.innerHTML.substr(1)==1){
  113.                             horas.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
  114.                             minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  115.                             segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  116.                         }
  117.                         else{
  118.                             if(minutos.innerHTML.substr(0,1)>4){
  119.                                 horas.innerHTML=horas.innerHTML.substr(1)+"4";
  120.                                 minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  121.                                 segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  122.                             }
  123.                             else{
  124.                                 horas.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
  125.                                 minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  126.                                 segundos.innerHTML=segundos.innerHTML.substr(1)+num;
  127.                             }
  128.                         }
  129.                     }
  130.                 }
  131.             }
  132.         }
  133.         else{
  134.             pausar();
  135.             reset();
  136.             numero(num);
  137.         }
  138.     }
  139.     function del(){
  140.         segundos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
  141.         minutos.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
  142.         horas.innerHTML="0"+horas.innerHTML.substr(0,1);
  143.     }
  144.     function iniciar(){
  145.         btnprincipal.setAttribute("onclick","pausar();");
  146.         btnprincipal.innerHTML="Pausar";
  147.     }
  148.     function pausar(){
  149.         btnprincipal.setAttribute("onclick","iniciar();");
  150.         btnprincipal.innerHTML="Iniciar";
  151.     }
  152.     </script>
  153. </head>
  154. <body onload="values();reset();">
  155. <div class="cronometro">
  156.     <div class="container">
  157.         <span id="horas"></span>
  158.         <span>:</span>
  159.         <span id="minutos"></span>
  160.         <span>:</span>
  161.         <span id="segundos"></span>
  162.         <span>:</span>
  163.         <span id="milisegundos"></span>
  164.         <br />
  165.         <span id="btnprincipal" class="iniciar" onclick="iniciar();">Iniciar</span>
  166.     </div>
  167. </div>
  168. <table>
  169.     <tr>
  170.         <td><input type="button" onclick="numero(7);" value="7" /></td>
  171.         <td><input type="button" onclick="numero(8);" value="8" /></td>
  172.         <td><input type="button" onclick="numero(9);" value="9" /></td>
  173.     </tr>
  174.     <tr>
  175.         <td><input type="button" onclick="numero(4);" value="4" /></td>
  176.         <td><input type="button" onclick="numero(5);" value="5" /></td>
  177.         <td><input type="button" onclick="numero(6);" value="6" /></td>
  178.     </tr>
  179.     <tr>
  180.         <td><input type="button" onclick="numero(1);" value="1"></td>
  181.         <td><input type="button" onclick="numero(2);" value="2"></td>
  182.         <td><input type="button" onclick="numero(3);" value="3"></td>
  183.     </tr>
  184.     <tr>
  185.         <td><input type="button" onclick="reset();" value="RESET"></td>
  186.         <td><input type="button" onclick="numero(0);" value="0"></td>
  187.         <td><input type="button" onclick="del()" value="DEL"></td>
  188.     </tr>
  189. </table>
  190. </body>
  191. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top