1

Olá, tenho 3 input que recebem horas e minutos de um timepicker :

<input type="text" id="seg1" onBlur="calcular">
<input type="text" id="seg2" onBlur="calcular">
<input type="text" id="seg">

O primeiro recebe (08:30), o segundo recebe (10:30) e o terceiro retorna (02:00).

Utilizo a função abaixo para números inteiros em tempo real:

function calcular(){
    var segent = parseInt(document.getElementById('segent').value, 10);
    var segsai = parseInt(document.getElementById('segsai').value, 10);
    document.getElementById('resultseg').value = segent - segsai;
} 

Porem não estou conseguindo fazer um código pequeno (nem grande) que funcione para retornar o valor (02:00) em horas e minutos em tempo real.

3 Respostas 3

4

Tens de fazer mais que parseInt pois hh:mm têm de ser transformados em minutos, ou seja a parte das horas tem de ser multiplicada por 60 minutos, etc.

Sugestão:

function hmToMins(str) {
  const [hh, mm] = str.split(':').map(nr => Number(nr) || 0);
  return hh * 60 + mm;
}

function calcular() {
  const segent = hmToMins(document.getElementById('segent').value);
  const segsai = hmToMins(document.getElementById('segsai').value);
  const diff = segsai - segent;
  if (isNaN(diff)) return;
  const hhmm = [
      Math.floor(diff / 60), 
      Math.round(diff % 60)
  ].map(nr => `00${nr}`.slice(-2)).join(':');
  
  document.getElementById('resultseg').value = hhmm;
}

calcular(); // só para o exemplo mostrar mais rápido
<input type="text" id="segent" oninput="calcular()" value="08:30">
<input type="text" id="segsai" oninput="calcular()" value="10:30">
<input type="text" id="resultseg">

4
  • como evitar o aN:aN no momento do preenchimento dos campos? Commented 29/10/2017 às 20:41
  • @ThiagoKoller editei para contemplar esse caso.
    – Sergio
    Commented 29/10/2017 às 20:47
  • ficou exatamente como eu queria, eu achei que conseguiria resolver o resto sozinho.. o negocio é que eu tenho 4 input, preciso que ele calcule os dois primeiros caso o 3 e o 4 não forem preenchidos, caso forem calcule todos (seg2 - seg1) + (seg4 - seg3).. voce pode responder por aqui ou preciso abrir outra pergunta? Commented 29/10/2017 às 21:10
  • @ThiagoKoller como fica o HTML e JavaScript nesse caso? Coloca aqui um jsFiddle por exemplo ou junta na pergunta
    – Sergio
    Commented 29/10/2017 às 21:44
0

Uma alternativa à resposta do @Sergio usando um pouco de jQuery:

function calcular(){
	var c1 = $("#seg1").val().split(':').map(Number);
	var c2 = $("#seg2").val().split(':').map(Number);
	var dif = (c2[0]*60+c2[1])-(c1[0]*60+c1[1]);
	var MM = dif%60;MM.toString().length==1?MM="0"+MM:0;
	if(isNaN(dif)) return;
	var resultado = Math.floor((dif)/60) +":"+ MM;
	$("#seg").val(resultado);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="seg1" oninput="calcular()" value="08:30" />
<input type="text" id="seg2" oninput="calcular()" value="10:30" />
<input type="text" id="seg" />

0

Função para realizar o calculo

var calc_times = {
    sign: ''
    , value: []
    , convert: function(  data ){
        var c = String( data ).split(':').map(Number);
        var r = 0;
        if( c[0] == undefined ){
            c[0] = 0;
        }
        r += ( Math.abs(c[0]) * 60 * 60 ) ;
        if( c[1] == undefined ){
            c[1] = 0;
        }
        r += ( Math.abs(c[1]) * 60 ) ;
        if( c[2] == undefined ){
            c[2] = 0;
        }
        r += Math.abs(c[2]) ;
        if( String( data ).indexOf("-") == 0 ){
            r = r * ( -1 ) ;
        }
        calc_times.value.push( r );
    }
    , calc: function(){
        var sec = 0 ;
        calc_times.value.forEach(function(i,o){
            sec += i ;
        })
        if( sec < 0 ){
            calc_times.sign = "-" ;
        }
        return calc_times.sign + [
            Math.abs(sec) / 60 / 60, // horas
            (Math.abs(sec) / 60) % 60, // minutos
            Math.abs(sec) % 60 // segundos
        ].map(Math.floor).map(
            s => (s < 10) ? '0' + s : s
        ).join(':');
    }
};

informa os valores que quer calcular

calc_times.convert('-00:09:01');
calc_times.convert('00:00:03');
calc_times.convert('-00:00:01');

Chamada para resposta

calc_times.calc();

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .