1

Tenho o seguinte problema: Gostaria de fazer um clique em uma div no qual após por exemplo 7 minutos exibisse uma outra div.

Penso que na teoria a solução seria: Quando fosse feito o clique, deveria pegar a hora atual e adicionar a condição de incremento de 7 minutos, que ao chegar nessa condição a div fosse exibida. Claro, se existir outras possibilidades melhores, por favor me digam.

Mas, na prática não consegui fazer usando javascript. Isso é realmente possível? Alguém poderia exemplificar?

Essa é a div que vai receber o clique, ela contém um vídeo incorporado

<div class="row mt-5 mb-5">
                <div class="col-sm-8 col-12 wow animated fadeInDown" data-wow-duration="4s" data-wow-delay="0.6s"  style="margin: 0 auto; width: 50%;">
                    <iframe id="video-msr" src="#" width="100%" height="558" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </div>
            </div>

Essa é a div que deve ser exibida após ser feito o clique

<div class="row btn-linha-compra btnFixo">
            <div class="col-sm-6 col-12 text-center" style="margin: 0 auto; width: 50%;">
                <button class="btn-compra" data-wow-delay="0.6s">
                    <div class="wow pulse" data-wow-iteration="infinite">
                        <a id="link-compra" href="#" target="_blank">ACESSAR AGORA</a>
                    </div>
                </button>
            </div>
        </div>

2 Respostas 2

3

Você pode utilizar a função setTimeout. Esta fará que uma determinada função seja executada depois de x milissegundos.

Veja o exemplo:

document.querySelector('#clique-aqui').addEventListener('click', function () {
    
    setTimeout(function () {
        document.querySelector('#exibe-com-intervalo-de-tempo').style.display = '';
    }, 2 * 1000)

})
<div id="clique-aqui">clique aqui e aguarde 2 segundos</div>
<div id="exibe-com-intervalo-de-tempo" style="display: none">Será exibido com atraso</div>

Para o caso de querer usar para 7 minutos, você poderia perfeitamente colocar 7 * 60 * 1000.

Assim:

setTimeout(function (){ 
  // código aqui
}, 7 * 60 * 1000);

Nota: Nada impede de passar 420000 (que é 7 * 60 * 1000) diretamente também, mas no caso usei expressão matemática para simplificar a compreensão, já que a função recebe os valores em millisegundos.

1
  • Perfeito, funcionou perfeitamente, só estou tendo dificuldade para pegar o clique no iframe
    – WPfan
    Commented 10/11/2020 às 19:46
0

O objeto window permite a execução de código após um determinado período de tempo. Por exemplo:

setTimeout(função, tempoEmMilisegundos) 

Onde a função passada no parâmetro (função) será executada após o tempo informado no segundo parâmetro (tempoEmMilisegundos).

<!DOCTYPE html>
<html>
<body>


<div class="row mt-5 mb-5" onclick="setTimeout(myFunction, 3000);" style="border-style: solid;" >
                <div class="col-sm-8 col-12 wow animated fadeInDown" data-wow-duration="4s" data-wow-delay="0.6s"  style="margin: 0 auto; width: 50%;">
                    <iframe id="video-msr" src="#" width="100%" height="558" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </div>
</div>

<div class="row btn-linha-compra btnFixo" id="divCompra" style="visibility:hidden;">
            <div class="col-sm-6 col-12 text-center" style="margin: 0 auto; width: 50%;">
                <button class="btn-compra" data-wow-delay="0.6s">
                    <div class="wow pulse" data-wow-iteration="infinite">
                        <a id="link-compra" href="#" target="_blank">ACESSAR AGORA</a>
                    </div>
                </button>
            </div>
</div>


<script>
function myFunction() {
  document.getElementById("divCompra").style.visibility = "visible";
}
</script>
</body>
</html>´
3
  • @Rafael Tavares sua resposta também me ajudou, muito obrigado.. o problema que não estou conseguindo fazer isso funcionar quando clico no iframe
    – WPfan
    Commented 10/11/2020 às 20:43
  • @WPfan foi o Leandro quem respondeu, eu apenas editei a resposta hehe Commented 10/11/2020 às 20:52
  • Verdade, correria aqui acabei confundindo rsrsrsrs. @Leandro obrigado velho!
    – WPfan
    Commented 10/11/2020 às 20:53

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 .