Mensajes: 1
Puntos: 0
akror esta en línea ahora Reportar Mensaje
Clicar space para accionar un boton
HOLA BUENAS :)
BUENO AL GRANO ESTOY HACIENDO UN CRONOMETRO EN HTML I PARA QUE ME VAYA MAS BIEN QUIERO QUE SE PUEDA CLICAR SPACE PARA QUE EMPIEZE.
ESTE ES MI CODIGO.
Código HTML:
<TD><INPUT TYPE=BUTTON OnClick="empezar();"VALUE="START/STOP"></TD>
SI PUEDE SER TAMBIEN COMO HACER QUE HAYA UN MISMO BOTON PERO QUE AL PRESIONAR SPACE SE ENCIENDA EL CRONOMETRO I AL CLICAR OTRA VEZ QUE SE APAGUE.
EL CODIGO ENTERO ES EL PROXIMO:
[HTML]<html>
<head>
<meta charset="UTF-8">
<title>Cronómetro</title>
<style type="text/css">
* { margin: auto;
padding: 0;
}
h1 {
padding: 0.5em;
text-align: center;
}
#cronometro { padding:0px;
border: 0px silver solid;
width: 1000px;
text-align: center;
}
#reloj { padding: 10px 15px;
width: 675px;
border: 8px solid black;
font: bold 5em digital, europa, Felix Titling;
text-align: center;
margin: 10px
}
#cronometro [type=button] {
font: bold 1.25em digital, europa, Felix Titling;
text-align: center;
margin: 10px
}
</style>
<script type="text/javascript">
window.onload = function() {
//localiza en pantalla el reloj y se ronombra visor para trabajar con ello
visor=document.getElementById("reloj");
//asociar eventos a botones: al pulsar el botón se activa su función.
document.cron.empieza.onclick = empezar;
document.cron.para.onclick = parar;
document.cron.continua.onclick = continuar;
document.cron.reinicia.onclick = reiniciar;
}
//variables de inicio:
var marcha=0; //control del temporizador
var cro=0; //estado inicial del cronómetro.
//cronometro en marcha. Empezar en 0:
function empezar() {
if (marcha==0) { //solo si el cronómetro esta parado
emp=new Date() //fecha actual
elcrono=setInterval(tiempo,10); //función del temporizador.
marcha=1 //indicamos que se ha puesto en marcha.
}
}
function tiempo() { //función del temporizador
actual=new Date() //fecha en el instante
cro=actual-emp //tiempo transcurrido en milisegundos
cr=new Date() //fecha donde guardamos el tiempo transcurrido
cr.setTime(cro) //nos da la fecha en milisegundos
cs=cr.getMilliseconds() //milisegundos del cronómetro
cs=cs/10; //paso a centésimas de segundo.
cs=Math.round(cs) //despreciamos los decimales
sg=cr.getSeconds(); //segundos del cronómetro
mn=cr.getMinutes(); //minutos del cronómetro
ho=cr.getHours()-1; //horas del cronómetro
if (cs<10) {cs="0"+cs;} //se ponen siempre 2 cifras en los números
if (sg<10) {sg="0"+sg;}
if (mn<10) {mn="0"+mn;}
visor.innerHTML=ho+" : "+mn+" : "+sg+" : "+cs; //pasar a pantalla.
}
//parar el cronómetro
function parar() {
if (marcha==1) { //sólo si está en funcionamiento
clearInterval(elcrono); //parar el crono
marcha=0; //indicar que está parado.
}
}
//Continuar una cuenta empezada y parada.
function continuar() {
if (marcha==0) { //sólo si el crono está parado
emp2=new Date(); //fecha actual
emp2=emp2.getTime(); //pasar a tiempo Unix
emp3=emp2-cro; //restar tiempo anterior
emp=new Date(); //nueva fecha inicial para pasar al temporizador
emp.setTime(emp3); //datos para nueva fecha inicial.
elcrono=setInterval(tiempo,10); //activar temporizador
marcha=1; //indicamos que se ha puesto en marcha.
}
}
//Volver al estado inicial
function reiniciar() {
if (marcha==1) { //si el cronómetro está en marcha:
clearInterval(elcrono); //parar el crono
marcha=0; //indicar que está parado
}
cro=0; //tiempo transcurrido a cero
visor.innerHTML = "0 : 00 : 00 : 00"; //se escribe en el visor todo a 0
}
</script>
</head>
<body>
<hr>
<div id="cronometro">
<div id="reloj">0 : 00 : 00 : 00</div> <!--cornómetro-->
<form name="cron" action="#"> <!--botones-->
<TD><INPUT TYPE=BUTTON OnClick="empezar();"VALUE="START/STOP"></TD>
<TD ALIGN=CENTER BGCOLOR="#AACCFF"
</form>
</div>
</body>
</html>
[HTML]
