Estoy haciendo un trabajo para mi estudio virtual y me han pedido que utilize un cronometro en html, además que utilize las teclas para remplazar las funciones de los botones como son iniciar, toma de parciales, reiniciar y parar. Hasta el momento esta parte esta al día.
Pero el primer problema que tengo es que solo puedo utilizar las teclas F1, F2...hasta la F12. y me pide que debo hacerlo sea con el teclado alfabetico o númerico y aqui es donde tengo el problema.
El segundo problema que se me presenta es que debo hacer la toma de 10 ó 20 parciales, es decir que debo asignar una tecla a cada campo de texto. Es decir inicio el cronometro y si oprimo la tecla K debe tomar el parcial 1, si oprimo la tecla P tomo el parcial y así sucesivamente. Obviamente que si solucione el primer problema el tercero estará casi que resuleto.
Mi tercer problema es que debo de además hacer lo anterior, hacerlo de una forma abreviada. Debo tomar 10 o 20 parciales pero que quede en un listado o DataGrid como se haria en Visual Basic y aqui si no tengo ni la minima idea.
os dejo el código y muchas gracias por su colaboración de antemano.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
//Fin de la funcion de presionar tecla
//Funcion de toma de parcial parar e inicia cronometro
function capturarf2(e){
var code = (e.keyCode ? e.keyCode : e.which);
//Inicializar cronometro con F2
if(code == 113) {
IniciarCrono()
}
//Tomar parcial en el cronometro cn F4
if(code == 115) {
document.crono.parcial.value = document.crono.display.value
document.crono.Parcial1.value = document.crono.display.value
}
//Parar el cronometro con F8
if(code == 119) {
clearTimeout(CronoID)
}
//Reiniciar cronometro con F9
if(code == 120) {
document.crono.display.value = '00:00:0'
document.crono.parcial.value = '00:00:0'
}
}
document.onkeydown=capturarf2;
//Fin de la funcion de presionar tecla
var CronoID = null
var CronoEjecutandose = false
var decimas, segundos, minutos
function DetenerCrono (){
if(CronoEjecutandose)
clearTimeout(CronoID)
CronoEjecutandose = false
}
function InicializarCrono () {
//inicializa contadores globales
decimas = 0
segundos = 0
minutos = 0
//pone a cero los marcadores
document.crono.display.value = '00:00:0'
document.crono.parcial.value = '00:00:0'
}
function MostrarCrono () {
//incrementa el crono
decimas++
if ( decimas > 9 ) {
decimas = 0
segundos++
if ( segundos > 59 ) {
segundos = 0
minutos++
if ( minutos > 99 ) {
alert('Fin de la cuenta')
DetenerCrono()
return true
}
}
}
//configura la salida
var ValorCrono = ""
ValorCrono = (minutos < 10) ? "0" + minutos : minutos
ValorCrono += (segundos < 10) ? ":0" + segundos : ":" + segundos
ValorCrono += ":" + decimas
document.crono.display.value = ValorCrono
CronoID = setTimeout("MostrarCrono()", 100)
CronoEjecutandose = true
return true
}
function IniciarCrono () {
DetenerCrono()
InicializarCrono()
MostrarCrono()
}
function ObtenerParcial() {
//obtiene cuenta parcial
document.crono.parcial.value = document.crono.display.value
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRONOMETRO</title>
<style type="text/css">
<!--
.Estilo1 {
color: #FF0000;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p align="center"><strong>CRONOMETRO</strong>
<!-- Para visualizar el cronómetro -->
</p>
<div class="recuadro3">
<form action="" name="crono">
<p align="center">
<label>
<input name="display" type="text" id="display" value="00:00:0" />
</label>
</p>
<p align="center">
<input name="parcial" type="text" value="00:00:0" size="8" />
</p>
<p align="center">
<input name="Parcial1" type="text" id="Parcial1" value="00:00:0" size="8" />
</p>
<p align="center">
<label></label>
</p>
<p align="center"> </p>
<p align="center">
<input type="button" name="Iniciar" value=" Iniciar F2" onclick="IniciarCrono()" />
<input type="button" name="Parcial" value="Parcial F4" onclick="ObtenerParcial()" />
<input type="button" name="Parar" value=" Parar F8" onClick="DetenerCrono()">
<input type="button" name="Cero" value=" Cero F9" onClick="DetenerCrono(); InicializarCrono()">
</p>
<p align="center"> </p>
</form>
</div>
<p> </p>
</body>
</html>
