viernes, 5 de febrero de 2016

Cronómetro



 Este es el código de la página cronometro.html
<!DOCTYPE html>
<html>
<head>
<title>Cronómetro</title>
<meta charset="UTF-8" />
<meta name="author" content="Romlonix" />
<script src="cronometro.js"></script>
<link rel="StyleSheet" href="cronometro.css" TYPE="text/css">
</head>
<body>
<div id="contenedor">
<div class="reloj" id="Horas">00</div>
<div class="reloj" id="Minutos">:00</div>
<div class="reloj" id="Segundos">:00</div>
<div class="reloj" id="Centesimas">:00</div>
<input type="button" class="boton" id="inicio" value="Start &#9658;" onclick="inicio();">
<input type="button" class="boton" id="parar" value="Stop &#8718;" onclick="parar();" disabled>
<input type="button" class="boton" id="continuar" value="Reanudar &#8634;" onclick="inicio();" disabled>
<input type="button" class="boton" id="reinicio" value="Reset &#8635;" onclick="reinicio();" disabled>
</div>
</body>
</html>

Este es el código de la hoja de estilos cronometro.css
*{
margin: 0;
padding: 0;
}
#contenedor{
margin: 10px auto;
width: 540px;
height: 115px;
}
.reloj{
float: left;
font-size: 80px;
font-family: Courier,sans-serif;
color: #363431;
}
.boton{
outline: none;
border: 1px solid #363431;
color: white;
width: 128px;
height: 30px;
text-shadow: 0px -1px 1px black;
font-size: 20px;
border-radius: 5px;
font-family: Helvetica;
cursor: pointer;
background-image: linear-gradient(#3aad02,#2c6f05);
}
.boton:active{
background-image: linear-gradient(#2c6f05,#3aad02);
}
.boton:hover{
box-shadow: 0px 0px 14px #3aad02;
}

Este es el código del archivo javascript, cronometro.js
var centesimas = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;
function inicio () {
control = setInterval(cronometro,10);
document.getElementById("inicio").disabled = true;
document.getElementById("parar").disabled = false;
document.getElementById("continuar").disabled = true;
document.getElementById("reinicio").disabled = false;
}
function parar () {
clearInterval(control);
document.getElementById("parar").disabled = true;
document.getElementById("continuar").disabled = false;
}
function reinicio () {
clearInterval(control);
centesimas = 0;
segundos = 0;
minutos = 0;
horas = 0;
Centesimas.innerHTML = ":00";
Segundos.innerHTML = ":00";
Minutos.innerHTML = ":00";
Horas.innerHTML = "00";
document.getElementById("inicio").disabled = false;
document.getElementById("parar").disabled = true;
document.getElementById("continuar").disabled = true;
document.getElementById("reinicio").disabled = true;
}
function cronometro () {
if (centesimas < 99) {
centesimas++;
if (centesimas < 10) { centesimas = "0"+centesimas }
Centesimas.innerHTML = ":"+centesimas;
}
if (centesimas == 99) {
centesimas = -1;
}
if (centesimas == 0) {
segundos ++;
if (segundos < 10) { segundos = "0"+segundos }
Segundos.innerHTML = ":"+segundos;
}
if (segundos == 59) {
segundos = -1;
}
if ( (centesimas == 0)&&(segundos == 0) ) {
minutos++;
if (minutos < 10) { minutos = "0"+minutos }
Minutos.innerHTML = ":"+minutos;
}
if (minutos == 59) {
minutos = -1;
}
if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
horas ++;
if (horas < 10) { horas = "0"+horas }
Horas.innerHTML = horas;
}
}
Ver en ventana emergente
Obtenido en: http://codepen.io/Romlonix/pen/Fwsza
Publicado por en
Etiquetas: ,

2 comentarios:

  1. Cutre3 de noviembre de 2016, 4:43

    hola... buen trabajo!!! yo he procurado de editar ese codigo para que la cuenta sea para atras y que solo tenga la intruccion de reinicar nada mas. Es decir boton= iniciar - reiniciar... y si no es mucho lo que pido que se le pueda agregar algun mensaje cuando la cuenta atras lllega a 0... desde ya gracias!!!

    ResponderEliminar
    Respuestas
    1. Anónimo26 de diciembre de 2017, 23:59

      function cronometro () {
      if((segundos == 60)&&(minutos == -1)){
      reinicio();
      }
      if(centesimas == 0){
      centesimas = 100;
      }
      if(centesimas > 0){
      centesimas--;
      if(centesimas < 10){
      centesimas = "0"+centesimas;
      }
      Centesimas.innerHTML = ":"+centesimas;
      }

      if(centesimas == 99){
      segundos--;
      if(segundos < 10){
      segundos = "0"+segundos;
      }
      Segundos.innerHTML = ":"+segundos;
      }

      if(segundos == 0){
      segundos = 60;
      }
      if((segundos == 60) && (centesimas == 99)){
      minutos--;
      Minutos.innerHTML = minutos;
      }
      }

      Eliminar

Suscribirse a: Enviar comentarios (Atom)