3

Estou fazendo algo para cálculo de soma de horas e minutos, e não vejo solução.

Preciso receber um horário colado formatado assim 09:00, mas com hora aleatória em um input e clicando em submit alterar o html com a hora do input com adição de 70 minutos. Não consegui passar dessa parte e ainda nem tentei somar os minutos.

Alguém poderia me ajudar nessa missão?

<html>
<head>
<title></title>
<span> hora inicio </span>
    <script type="text/javascript">
      function hora1(){
    var horas = getElementById("hrs")
    var hr1 = horas.split(":");    // a hora sera colada com ":" no input, entao preciso dar um split, separar minutos de hora e somar 70 minutos. 
    var hr2 = hr1[0]+":"+hr1[1]; // ainda preciso somar os minutos e mostrar na exibição final com os 70 minutos a mais dessa hora do input
 m.innerHTML = hr2;
} 
    </script>
</head>
<body>
<div id="m">
  09:50
</div>
<input type="text" id="hrs">
  <button onclick="hora1()">TESTAR</button>
</body>
</html>

consegui resultado mas sem a possibilidade de digitar a hora, o que não é o que eu precisava

<!--          EM JAVASCRIPT EM UM ARQUIVO PHP COM RESULTADO OK MAS RECEBENDO A HORA DO SISTEMA -->
<html>
<body>
<h2>Somar 70 minutos</h2>
<script type="text/javascript"> 
var mc = 1; 
var mc5 = 20;
var d1 = new Date(); 
var d2 = new Date();
d1.setHours(+d2.getHours()+(mc) ); 
d1.setMinutes(new Date().getMinutes()+(mc5) ); 
document.write("#resultado: " + " " + d1.getHours()+":"+d1.getMinutes());
</script>
</body>
</div>
</html> 
2
  • O que seria horá aleatória ??
    – GeekSilva
    Commented 20/11/2017 às 12:05
  • EXEMPLOS: 07:53 ou 20:35
    – alex souza
    Commented 20/11/2017 às 12:10

3 Respostas 3

5

Você pode usar o objeto Date do JavaScript. Primeiro você deve converter o horário recebido para um timestamp. Isso pode ser feito da seguinte forma:

function toTimestamp(horario){
  var aux = horario.split(':'), dt = new Date();
  dt.setHours(aux[0]);
  dt.setMinutes(aux[1]);
  dt.setSeconds(0);
  return dt.getTime();
}

A função acima, recebe um horário e retorna um timestamp. Um timestamp é a data/hora convertida em milissegundos (isso em JavaScript). Sendo assim podemos definir 70 minutos com um timestamp também, basta converter para milissegundos.

var minutosAdd = 70*60*1000; // 70 minutos em milissegundos

Agora que se tem o timestamp da hora passada e o timestamp de 70 minutos, basta somá-los. Podemos ter a função mais70minutos() que recebe uma string com o horário e devolve uma outra string com o horário passado somado com os 70 minutos.

function mais70minutos(hora){
  var timeHoraFinal = toTimestamp(hora) + minutosAdd;
  var dt = new Date(timeHoraFinal);
  var horaRetorno = (dt.getHours() < 10) ? '0'+dt.getHours() : dt.getHours();
  horaRetorno += (dt.getMinutes() < 10) ? '0'+dt.getMinutes(): dt.getMinutes();
  return horaRetorno;
 }

Usando essas funções da forma que achar melhor é possível que seu problema seja revolvido. Espero ter ajudado. Dê uma conferida em https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date

2

Use o Moment.js para facilitar seu trabalho.

Veja um exemplo:

 var hora = documento.getElementById('hrs');

 var resultado = moment(hora, 'hh:mm').add(70, 'minutes').format('hh:mm')

Se as horas do input forem 11:30, o resultado será 12:40.

Explicando o código

O segundo parâmetro da função moment recebe o formato de entrada da data. A função add adiciona uma quantidade de tempo, e o segundo parâmetro informa o tipo (no caso poderia ser hours, month, years e afins), mas precisamos usar minutes. E for fim, o format permite colocar a saída no formato necessário.

Documentação do MomentJS

0

onde errei? nao deu certo, retorna invalid date:

<html>
<head>
    <script src="moment.js"></script>
</head>
<body>
<h2>Somar 70 minutos</h2>
<script type="text/javascript">
function fff(){
 var hora = document.getElementById('hrs');
 var resultado = moment(hora, 'hh:mm').add(70, 'minutes').format('hh:mm');
    document.getElementById("hrs2").innerHTML = resultado;
}
</script>
<p id="hrs2"></p>
<input type="text" id="hrs">
  <button onclick="fff()">TESTAR</button>
</body>
</html> 
2
  • var hora = document.getElementById('hrs').value;
    – alex souza
    Commented 10/12/2017 às 18:48
  • var hora = document.getElementById('hrs').value;
    – alex souza
    Commented 10/12/2017 às 18:49

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 .