0

tengo un input en html, y quiero que con javascript, la cantidad que el usuario ingrese (en segundos), se conviertan a horas/minutos/segundos, no se si me expliqué bien, algo como lo que está en el sitio: Convertidor de segundos a horas, minutos y segundos

Quisiera que el resultado fuera algo como: Resultado: x horas, x minutos y x SS Cómo lo podría hacer, pero con JavaScript, tengo este código:

    <html>
	<head>
	<title>Conversor</title>
	</head>
	<body>
	<h1>Conversor de segundos a horas,minutos y segundos</h1>
	<label for="sec">Ingrese los segundos:</label>
	<input type="text" id="sec" name="sec">
	<button onclick="convertir()">Convertir</button>

	<span id="resultado"></span>

	<script>
	function convertir() {
	segundos = document.getElementById('sec').value;
	horas = Math.trunc(segundos/3600);
	minutos = Math.trunc(segundos/60);
	output = document.getElementById('resultado');
	output.innerHTML = "<br>" + horas + " horas, " + minutos + " minutos y " + segundos + " segundos";

	}
	</script>
	</body>
	</html>

6
  • 1
    Nosotros no generamos codigo, tu no haz intentado nada mas alla que simplemente colocar un boton y añadirle una funcion al boton, debes proveer mas informacion de aquello que haz intentado, si no, que chiste que alguien mas realice el proceso?, la idea de ser mejor programador es intentarlo primero, y luego si no pudiste lograrlo con aquello que intentaste y como lo intentaste entonces dejar el error que te ocurre al ejecutar el codigo (si lo hay), en tu caso solo hay evidencia de estructura, mas no de funcionalidad que hayas intentado.
    – Layer
    Commented el 10 jun. 2020 a las 0:21
  • Respecto a tu comentario, si probé con otros métodos, por ejemplo dividir los segundos entre 3600 para conseguir las horas y entre 60 para los minutos, pero esto solo devuelve valores estáticos que pertenecen a la misma cantidad de segundos, no lo incluí porque, vamos, es absurdo, solo hace 3 conversiones, primero convertiría a horas, luego a minutos, y los segundos los deja como están, pero no se como convertir, a esos 3 en un solo proceso, no se si me entiendes
    – Jotta ArtZ
    Commented el 10 jun. 2020 a las 0:25
  • Debes ponerlo de todas formas asi demuestras que algo haz intentado, la idea del sitio es ayudarte a mejorar, por eso el mismo manual del sitio establece que debe haber un ejemplo minimo y verificable, en tu caso el ejemplo si es minimo, pero no es verificable, es decir, la ejecucion del codigo muestra algun resultado de lo que intentaste?, no lo hace.
    – Layer
    Commented el 10 jun. 2020 a las 0:27
  • Ya añadí la función completa y un <span> para los resultados :), ¿Ahora está bien?
    – Jotta ArtZ
    Commented el 10 jun. 2020 a las 0:42
  • Probablemente esto te sirva: es.stackoverflow.com/questions/343976/…
    – Triby
    Commented el 10 jun. 2020 a las 0:45

2 respuestas 2

1

const output = document.getElementById('resultado');

function convertir(segundosP) {

  const segundos = (Math.round(segundosP % 0x3C)).toString();
  const horas    = (Math.floor(segundosP / 0xE10)).toString();
  const minutos  = (Math.floor(segundosP / 0x3C ) % 0x3C).toString();
            
  output.innerHTML = `<br>${horas} horas, ${minutos} minutos y ${segundos} segundos.`;
  
}
<html>
	<head>
	  <title>Conversor</title>
	</head>
  
	<body>
	  <h1>Conversor de segundos a horas,minutos y segundos</h1>
	  <label for="sec">Ingrese los segundos:</label>
	  <input type="text" id="sec" name="sec">
	  <button onclick="convertir(sec.value)">Convertir</button>

	  <span id="resultado"></span>
	</body>
</html>

Esa es mi propuesta de solucion al codigo, si bien he cambiado muchas cosas los cambios mas grandes son:

  • la funcion convertir ahora hace uso de un parametro segundosP
  • ahora no es necesario obtener el elemento que contiene la informacion de los segundos, la informacion se extrae directamente en el parametro de la funcion.
  • He usado notacion hexadecimal para los numeros, (esto debido a que mi proyecto originalmente estaba usando esta notacion).
  • Se usa algo llamado template strings.

La notación hexadecimal para describir números también es valida, para describir un numero en notación hexadecimal debemos anteponer a cualquier numero el valor 0x el cual describe que el numero es un hexadecimal.

los valores en hexadecimal van desde el 0 hasta la F, donde los valores son:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Lo cual en notación decimal significa:

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Notese que los valores van desde el 0 hasta el 15 (contando desde el 0 a la F tendriamos entonces el numero 16), por este motivo se llama notacion hexadecimal o base16.

lo que hacemos es dividir numeros en base16 sobre los segundos que necesitas.

Donde los valores hexadecimales equivalen a:

0x3C  = 60
0xE10 = 3600
0x18  = 24

en notacion decimal (la notacion que usamos a diario).

Asi que nos aseguramos con Math.round y Math.floor de tener siempre numeros enteros y hacemos distintas operaciones.

se encuentra tambien utilizandose el operador modulo (%) el cual basicamente es la operacion resultado del residuo que hay entre dividir un numero entre otro.

en el caso de los segundos:

const segundos = (Math.round(segundosP % 0x3C)).toString();

Se usa para dividir entre 60 los segundos y quedarnos con el residuo, de esta manera el numero siempre va estar comprendido entre 0 y 59.

para el caso de las horas y los minutos hacemos algo parecido.

por ultimo las template strings te permiten crear una cadena que puede renderizar valores dentro.

en este caso la usamos para mostrar la informacion obtenida.

9
  • Ya edito la respuesta y le pongo mas contexto, se que le falta.
    – Layer
    Commented el 10 jun. 2020 a las 0:58
  • Gracias :') Pero lo que pasa es que las horas que devuelve están mal :(, aparte de eso todo esta bien, por cierto, muy completa tu respuesta :)
    – Jotta ArtZ
    Commented el 10 jun. 2020 a las 1:04
  • Seguro que lo probaste bien?, digita 3600 debe darte la hora convertida de manera correcta.
    – Layer
    Commented el 10 jun. 2020 a las 1:09
  • incluso probe a convertir 3400 segundos y sirve, es que recuerda que eso va a acorde a los segundos, no a minutos etc.
    – Layer
    Commented el 10 jun. 2020 a las 1:10
  • 1
    Listo, corregido, gracias por el dato
    – Layer
    Commented el 10 jun. 2020 a las 1:19
1
<html>
    <head>
    <title>Conversor</title>
    </head>
    <body>
    <h1>Conversor de segundos a horas,minutos y segundos</h1>
    <label for="sec">Ingrese los segundos:</label>
    <input type="text" id="sec" name="sec">
    <button onclick="convertir()">Convertir</button>

    <span id="resultado"></span>

    <script>
    function convertir() {
     var valor = document.getElementById('sec').value;
     var horas = Math.floor(valor / 3600);
     horas = (horas < 10)? '0' + horas : horas;
     var minutos = Math.floor((valor / 60) % 60);
     minutos = (minutos < 10)? '0' + minutos : minutos;
     var segundos = valor % 60;
     segundos = (segundos < 10)? '0' + segundos : segundos;
    output = document.getElementById('resultado');
    output.innerHTML = "<br>" + horas + " horas, " + minutos + " minutos y " + segundos + " segundos";

    }
    </script>
    </body>
    </html>
1
  • Justo lo que necesitaba :) Muchísimas Gracias...
    – Jotta ArtZ
    Commented el 10 jun. 2020 a las 1:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.