Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] multiplicar, dividir horas y minutos con javascript

Estas en el tema de multiplicar, dividir horas y minutos con javascript en el foro de Javascript en Foros del Web. Buenas tardes, estoy hace un tiempo un poco confundido en como se usan las horas y los minutos en javascript.... resulta que estoy haciendo una ...
  #1 (permalink)  
Antiguo 24/03/2015, 10:16
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
multiplicar, dividir horas y minutos con javascript

Buenas tardes, estoy hace un tiempo un poco confundido en como se usan las horas y los minutos en javascript.... resulta que estoy haciendo una pequeña aplicación para un profesor de inglés en la cual tengo que crear la planilla de asistencias... para llevar un control y me he encontrado con que tengo que hacer una función que me calcule la cantidad de horas y la cantidad de minutos de clases según la cantidad de clases dictadas... al usuario le pido hora de ingreso, hora de salida y cantidad de clases....dejo lo que estoy intentando abajo para ver si alguien me puede tirar un cable de que estoy haciendo mal....


Código Javascript:
Ver original
  1. function restarHoras() {
  2.  
  3. var cantclases=document.getElementById('cantclases').value;
  4.   inicio = document.getElementById("inicio").value;
  5.   fin = document.getElementById("fin").value;
  6.   inicioMinutos = parseInt(inicio.substr(3,2));
  7.   inicioHoras = parseInt(inicio.substr(0,2));
  8.   finMinutos = parseInt(fin.substr(3,2));
  9.   finHoras = parseInt(fin.substr(0,2));
  10.  
  11.  
  12.  
  13.  
  14.   transcurridoMinutostotal = (finMinutos - inicioMinutos)*cantclases;
  15.  
  16.   var sumarhoras = transcurridoMinutostotal / 60
  17.  
  18.   transcurridoMinutos = transcurridoMinutostotal % 60
  19.  
  20.  
  21.  
  22.   if(sumarhoras>=1)
  23.   {
  24.       transcurridoHoras = ((finHoras - inicioHoras)*cantclases)+sumarhoras;
  25.      
  26.   }
  27.  
  28.   else
  29.   {
  30.      
  31.   transcurridoHoras = (finHoras - inicioHoras)*cantclases;
  32.  
  33.  
  34.   }
  35.  
  36.  
  37.  
  38.   if (transcurridoMinutos < 0) {
  39.     transcurridoHoras--;
  40.    
  41.     transcurridoMinutos = 60 + transcurridoMinutos;
  42.   }
  43.  
  44.   transcurridoHoras.toFixed();
  45.   horas = transcurridoHoras.toString();
  46.  
  47.   minutos = transcurridoMinutos.toString();
  48.  
  49.   if (horas.length < 2) {
  50.     horas = "0"+horas;
  51.    
  52.   }
  53.  
  54.   if (horas.length < 2) {
  55.     horas = "0"+horas;
  56.    
  57.   }
  58.  
  59.  
  60.    
  61.  
  62.   document.getElementById("resta").value = horas +"hs "+minutos+" min";
  63.  
  64. }
  #2 (permalink)  
Antiguo 24/03/2015, 11:37
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 15 años, 1 mes
Puntos: 36
Respuesta: multiplicar, dividir horas y minutos con javascript

Podrias dar un poco mas detalles sobre el problema original. Tu código esta un poco raro y en lo personal no le entiendo mucho a que quieres hacer.
Es sacar la diferencia entre 2 tiempos y dividirlo entre la cantidad de clases?
  #3 (permalink)  
Antiguo 24/03/2015, 12:46
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: multiplicar, dividir horas y minutos con javascript

a ver si te queda mas claro... ese es el html... pido horario de inicio de clase, horario de finalización y cantidad de clases.... y quiero calcular la cantidad de horas y de minutos totales de clases dictadas....


Código HTML:
Ver original
  1. Horario incio de clase (hh:mm)</td>
  2. <input type="text" id="inicio" value="" maxlength="5" />
  3.  
  4. Horario finalización de clase (hh:mm)
  5. <input type="text" id="fin" value="" maxlength="5" />
  6.  
  7. Cantidad de clases
  8. <input type="text" id="cantclases"  />
  #4 (permalink)  
Antiguo 24/03/2015, 12:54
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 2 meses
Puntos: 145
Respuesta: multiplicar, dividir horas y minutos con javascript

¿Dónde está el botón para mostrar los datos?
__________________
¿Te sirvió la respuesta? Deja un +1
  #5 (permalink)  
Antiguo 24/03/2015, 13:49
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: multiplicar, dividir horas y minutos con javascript

Cita:
Iniciado por NueveReinas Ver Mensaje
¿Dónde está el botón para mostrar los datos?
es un boton que llama a la función comun nomas seria algo asi

Código HTML:
Ver original
  1. <input type='button' onclick='calcularHorasyMinutos();'>
  2.  
  3.  
  4. <input type='text' style='font-size:14px;border:none;' id='resta'></label>"
  #6 (permalink)  
Antiguo 24/03/2015, 13:51
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: multiplicar, dividir horas y minutos con javascript

paso en limpio todo



Código HTML:
Ver original
  1. Horario incio de clase (hh:mm)</td>
  2. <input type="text" id="inicio" value="" maxlength="5" />
  3.  
  4. Horario finalización de clase (hh:mm)
  5. <input type="text" id="fin" value="" maxlength="5" />
  6.  
  7. Cantidad de clases
  8. <input type="text" id="cantclases"  />
  9.  
  10.  
  11. <input type='button' onclick='calcularHorasyMinutos();'>
  12.  
  13.  
  14.  
  15. Total de tiempo de clases dictadas
  16. <input type='text' style='font-size:14px;border:none;' id='calculo'></label>"




Código Javascript:
Ver original
  1. function calcularHorasyMinutos() {
  2.  
  3. var cantclases=document.getElementById('cantclases').value;
  4.   inicio = document.getElementById("inicio").value;
  5.   fin = document.getElementById("fin").value;
  6.   inicioMinutos = parseInt(inicio.substr(3,2));
  7.   inicioHoras = parseInt(inicio.substr(0,2));
  8.   finMinutos = parseInt(fin.substr(3,2));
  9.   finHoras = parseInt(fin.substr(0,2));
  10.  
  11.  
  12.  
  13.  
  14.   transcurridoMinutostotal = (finMinutos - inicioMinutos)*cantclases;
  15.  
  16.   var sumarhoras = transcurridoMinutostotal / 60
  17.  
  18.   transcurridoMinutos = transcurridoMinutostotal % 60
  19.  
  20.  
  21.  
  22.   if(sumarhoras>=1)
  23.   {
  24.       transcurridoHoras = ((finHoras - inicioHoras)*cantclases)+sumarhoras;
  25.      
  26.   }
  27.  
  28.   else
  29.   {
  30.      
  31.   transcurridoHoras = (finHoras - inicioHoras)*cantclases;
  32.  
  33.  
  34.   }
  35.  
  36.  
  37.  
  38.   if (transcurridoMinutos < 0) {
  39.     transcurridoHoras--;
  40.    
  41.     transcurridoMinutos = 60 + transcurridoMinutos;
  42.   }
  43.  
  44.   transcurridoHoras.toFixed();
  45.   horas = transcurridoHoras.toString();
  46.  
  47.   minutos = transcurridoMinutos.toString();
  48.  
  49.   if (horas.length < 2) {
  50.     horas = "0"+horas;
  51.    
  52.   }
  53.  
  54.   if (horas.length < 2) {
  55.     horas = "0"+horas;
  56.    
  57.   }
  58.  
  59.  
  60.    
  61.  
  62.   document.getElementById("calculo").value = horas +"hs "+minutos+" min";
  63.  
  64. }
  #7 (permalink)  
Antiguo 24/03/2015, 13:57
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 2 meses
Puntos: 145
Respuesta: multiplicar, dividir horas y minutos con javascript

Hay un par de cosas sueltas por ahí.
En la primera línea del HTML cierrar un </td> que antes no estaba.
En la línea 14 cierras un </label>" que no se muestra.
__________________
¿Te sirvió la respuesta? Deja un +1
  #8 (permalink)  
Antiguo 24/03/2015, 14:10
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: multiplicar, dividir horas y minutos con javascript

Para el cálculo de horas, solo resta la hora final menos la hora inicial y multiplica el resultado por la cantidad de días trabajados. Para los minutos, multiplica la hora final por 60 (1 hora = 60 minutos) y súmale los minutos de dicha hora, luego, haz lo mismo con la hora inicial, resta ambas cantidad (final - inicial) y multiplica el resultado por la cantidad de días trabajados.

Como no puede haber más de 59 minutos en la visualización de la hora, utiliza un bucle mediante el cual irás restando 60 a la cantidad total de minutos hasta que esta sea menor o igual a 59 y por cada resta, suma una hora al total de horas.

Un ejemplo:

Código Javascript:
Ver original
  1. var horaInicio = "08:30",
  2.     horaFin = "12:50",
  3.     cantidadDias = 4,
  4.     tiempoIni = horaInicio.split(":"),
  5.     tiempoFin = horaFin.split(":"),
  6.     horasIni = parseInt(tiempoIni[0]),
  7.     minutosIni = parseInt(tiempoIni[1]),
  8.     horasFin = parseInt(tiempoFin[0]),
  9.     minutosFin = parseInt(tiempoFin[1]),
  10.     horas = (horasFin - horasIni) * cantidadDias,
  11.     minutos = (
  12.         (horasFin * 60 + minutosFin) - (horasIni * 60 + minutosIni)
  13.     ) * cantidadDias;
  14.  
  15. while (minutos > 59){
  16.     minutos -= 60;
  17.     horas++;   
  18. }
  19.  
  20. console.log("El total de tiempo de trabajo es de " + horas + ":" + minutos); //33:20

La aplicación de la función parseInt, se debe a que cualquier valor obtenido de una caja de texto, es una cadena, por lo cual, primero debo de darle un formato numérico para poder operar con esas cifras.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 24/03/2015 a las 14:23 Razón: Impresión de la respuesta
  #9 (permalink)  
Antiguo 24/03/2015, 14:21
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: multiplicar, dividir horas y minutos con javascript

Cita:
Iniciado por NueveReinas Ver Mensaje
Hay un par de cosas sueltas por ahí.
En la primera línea del HTML cierrar un </td> que antes no estaba.
En la línea 14 cierras un </label>" que no se muestra.
eso no cambia.. el resultado...
  #10 (permalink)  
Antiguo 24/03/2015, 14:26
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: multiplicar, dividir horas y minutos con javascript

Cita:
Iniciado por Alexis88 Ver Mensaje
Para el cálculo de horas, solo resta la hora final menos la hora inicial y multiplica el resultado por la cantidad de días trabajados. Para los minutos, multiplica la hora final por 60 (1 hora = 60 minutos) y súmale los minutos de dicha hora, luego, haz lo mismo con la hora inicial, resta ambas cantidad (final - inicial) y multiplica el resultado por la cantidad de días trabajados.

Como no puede haber más de 59 minutos en la visualización de la hora, utiliza un bucle mediante el cual irás restando 60 a la cantidad total de minutos hasta que esta sea menor o igual a 59 y por cada resta, suma una hora al total de horas.

Un ejemplo:

Código Javascript:
Ver original
  1. var horaInicio = "08:30",
  2.     horaFin = "12:50",
  3.     cantidadDias = 4,
  4.     tiempoIni = horaInicio.split(":"),
  5.     tiempoFin = horaFin.split(":"),
  6.     horasIni = parseInt(tiempoIni[0]),
  7.     minutosIni = parseInt(tiempoIni[1]),
  8.     horasFin = parseInt(tiempoFin[0]),
  9.     minutosFin = parseInt(tiempoFin[1]),
  10.     horas = (horasFin - horasIni) * cantidadDias,
  11.     minutos = (
  12.         (horasFin * 60 + minutosFin) - (horasIni * 60 + minutosIni)
  13.     ) * cantidadDias;
  14.  
  15. while (minutos > 59){
  16.     minutos -= 60;
  17.     horas++;   
  18. }
  19.  
  20. console.log("El total de tiempo de trabajo es de " + horas + ":" + minutos); //33:20

La aplicación de la función parseInt, se debe a que cualquier valor obtenido de una caja de texto, es una cadena, por lo cual, primero debo de darle un formato numérico para poder operar con esas cifras.

Saludos


muchas gracias por tu respuesta... voy a intentarlo y luego te digo como me fue....
  #11 (permalink)  
Antiguo 24/03/2015, 17:20
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 15 años, 1 mes
Puntos: 36
Respuesta: multiplicar, dividir horas y minutos con javascript

Ando perdido, veo que lo que se quiere es sacar diferencia de 2 horas multiplicarlas por X numero.
Pero entonces si alguien entra 8:30 y sale a 12:50 por 4 dias (creo que son clases o algo asi), trabajo 4:20 diarias por 4... de donde salieron las 33:20?

Entendi mal?. Ya se que no soy el OP, pero ya me entro la duda si estoy entendiendo mal
  #12 (permalink)  
Antiguo 24/03/2015, 18:34
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: multiplicar, dividir horas y minutos con javascript

Gracias por la observación, Dafonz. Es un error en mi algoritmo.

El error está en el cálculo de los minutos, pues estoy contando las horas, pero previamente ya las había considerado, de manera que al resultado final tendría que restarle las horas acumuladas antes de dicha operación, o también se podría hacer esto:

Código Javascript:
Ver original
  1. minutos = (minutosFin >= minutosIni ? minutosFin - minutosIni : minutosIni - minutosFin) * cantidadDias;

De este modo, se restan los minutos de manera directa y el resultado seguirá siendo el mismo, que en este caso es 17:20.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 24/03/2015 a las 20:14 Razón: Corrección
  #13 (permalink)  
Antiguo 25/03/2015, 10:13
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
De acuerdo Respuesta: multiplicar, dividir horas y minutos con javascript

muchas gracias a todos por la respuesta... al final todo lo que me dijeron me fue de mucha ayuda y logre solucionar este problemita que me tenia bastante complicado, dejo el resultado de como me quedo el final... estoy feliz muchas gracias :apl auso:



Código Javascript:
Ver original
  1. function calcularHorasyMinutos() {
  2.  
  3.  
  4.   var horaInicio = document.getElementById('inicio').value,
  5.     horaFin = document.getElementById('fin').value,
  6.     cantidadDias = document.getElementById('cantclases').value,
  7.     tiempoIni = horaInicio.split(":"),
  8.     tiempoFin = horaFin.split(":"),
  9.     horasIni = parseInt(tiempoIni[0]),
  10.     minutosIni = parseInt(tiempoIni[1]),
  11.     horasFin = parseInt(tiempoFin[0]),
  12.     minutosFin = parseInt(tiempoFin[1]),
  13.     horas = (horasFin - horasIni) * cantidadDias,
  14.   minutos = (minutosFin >= minutosIni ? minutosFin - minutosIni : minutosIni - minutosFin) * cantidadDias;
  15.  
  16.  
  17. while (minutos > 59){
  18.     minutos -= 60;
  19.     horas++;    
  20. }
  21.  
  22.  
  23.   document.getElementById("resta").value = horas +"hs "+minutos+" min";
  24.  
  25. }
  #14 (permalink)  
Antiguo 25/03/2015, 11:34
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 2 meses
Puntos: 145
Respuesta: multiplicar, dividir horas y minutos con javascript

¿Podrías tambier poner el HTML? Para quienes estén interesados en un futuro.
__________________
¿Te sirvió la respuesta? Deja un +1

Etiquetas: dividir, horas, minutos, multiplicar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:13.