1

Estou fazendo uma aplicação que simula um marcador de ponto, e precisaria que ele incremente a próxima marcação somente depois de 5 minutos, fiz alguns testes com setTimeout, mas não cheguei no que precisava. A aplicação faz as marcações, mas não tem o temporizador de tempo(5 minutos).

js:

    var qtd = document.getElementById("dataTime");

function getTime(){

  var data = new Date();
  var full_time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();

  var dataCompleta = full_time;

  while (qtd < 4){
   document.getElementById("horaMarcada").insertAdjacentHTML('beforeend', '<span id="dataTime">'+ dataCompleta +' </span>');
   qtd++;
   return false;
  }
}

html:

<button onclick="getTime()">Marcar</button>
5
  • não seria melhor vc guardar a hora no banco de dados e ir verificando a diferença com o setTimeout? assim ficaria mais confiável e mais seguro para sua aplicação. Commented 22/01/2018 às 17:27
  • a principio pretendo guardar as marcações com localStorage
    – josecarlos
    Commented 22/01/2018 às 17:29
  • Vc quer 3 marcações ou 4?
    – Sam
    Commented 22/01/2018 às 17:37
  • 4 marcações, a primeira no ato e as outras 3 somente depois de 5 minutos, se a pessoa clicar antes de 5 minutos vou apresentar uma mensagem dizendo que somente depois de 5 minutos
    – josecarlos
    Commented 22/01/2018 às 17:41
  • obs: e as outras 3, cada uma somente depois de 5 minutos
    – josecarlos
    Commented 22/01/2018 às 17:42

1 Resposta 1

2

É preciso alterar o <span id="dataTime"> para <span class="dataTime"> porque estão sendo criados elementos com o mesmo id, o que já é errado.

Com class você consegue contar a quantidade de elementos em tempo real, dispensando a auto-incrementação com qtd++.

Ao clicar no botão, o atributo onclick muda para um alert, e após 5 minutos, volta ao normal.

Você pode colocar tudo dentro da função na ordem abaixo:

function getTime(){

   document.querySelector("button").setAttribute("onclick","alert('Aguarde 5 minutos!')");
   
   var data = new Date();
   var full_time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();
   var dataCompleta = full_time;
   
   document.getElementById("horaMarcada").insertAdjacentHTML('beforeend', '<span class="dataTime">'+ dataCompleta +' </span>');
   var qtd = document.getElementsByClassName("dataTime").length;

   if(qtd < 4){
      setTimeout(function(){
         document.querySelector("button").setAttribute("onclick","getTime()");
      }, 300000);
   }else{
      document.querySelector("button").disabled = true;
      console.log("fim");
   }
}
<button onclick="getTime()">Marcar</button>
<div id="horaMarcada"></div>

8
  • Dvd, fiz um teste numa arquivo apartado, mas não esta rolando o temporizador
    – josecarlos
    Commented 22/01/2018 às 18:32
  • ta fazendo o loop, mas não faz a pausa de 5 minutos para a próxima marcação, mudei para 300000
    – josecarlos
    Commented 22/01/2018 às 18:44
  • dvd, estou usando igual, criei um JSFiddle jsfiddle.net/josecarlosdw/0ndv7hpp
    – josecarlos
    Commented 22/01/2018 às 19:03
  • dvd, veja meu resultado imgur.com/ZObAdNs
    – josecarlos
    Commented 22/01/2018 às 19:35
  • @josecarlos Agora acho que foi. Abs!
    – Sam
    Commented 22/01/2018 às 21:29

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 .