Jump to content
marcelocunha

Como inserir settimeout

Recommended Posts

Estou fazendo um funil de venda - um site com 3 páginas, onde nas 2 primeiras haverá um vídeo em cada uma e na terceira um formulário. Preciso inserir um botão na primeira página que direcione a pessoa à segunda página somente após 7 minutos (que é o tempo do vídeo, senão a pessoa não vê e já vai clicando para ir para a próxima página), ou seja,  a pessoa entra no site e só  depois de 7 minutos o botão aparece. Preciso também um contador regressivo mostrando o tempo que falta para aparecer o botão.
 

Sou leigo em programação, estou iniciando agora, mas pesquisei e achei um site que você configura o layout do botão e gera o código HTML (http://www.sciweavers.org/i2style). Pesquisei mais um pouco e achei como inserir a linha para direcionar à url quando o botão é clicado, mas não sei inserir o settimeout...

Segue o código que gerei (grifado está a linha que inclui para direcionar à url):

 

<html>

<head>

<style type="text/css">

body {background:#eee;}

.i2Style{

font:normal 25px Arial, Helvetica, sans-serif;

font-style:normal;

color:#ffffff;

background:#2d7a21;

border:0px solid #ffffff;

text-shadow:2px 2px 3px #222222;

box-shadow:3px 3px 12px #000000;

-moz-box-shadow:3px 3px 12px #000000;

-webkit-box-shadow:3px 3px 12px #000000;

border-radius:90px 90px 90px 90px;

-moz-border-radius:90px 90px 90px 90px;

-webkit-border-radius:90px 90px 90px 90px;

width:360px;

padding:16px 60px;

cursor:pointer;

margin:0 auto;

}

.i2Style:active{

cursor:pointer;

position:relative;

top:2px;

}

 

</style>

</head>

<body>

<a href="https://consultormarcelocu.wixsite.com/oportunidade/video-3">

<div class="i2Style">Quero assistir ao próximo vídeo!</div>

</body>

</html>

 

 

Botão.jpg

Share this post


Link to post
Share on other sites
<a class="aparecer" href="#" style="display: none">BOTAO</a>

<script>
    var elemento = document.querySelector('.aparecer');
    window = setTimeout(function () {
        elemento.style.display = 'block';
    }, 7000);
</script>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Thiago2018
      var objectData = new Date();
      window.addEventListener('click', relogio, false);
      var hora = objectData.getHours();
      var minutos = objectData.getMinutes();
      var segundos = objectData.getSeconds();
      function relogio() {
          
          console.log("Função executada com sucesso!");
          hora = objectData.getHours();
          minutos = objectData.getMinutes();
          segundos = objectData.getSeconds();
          if(segundos < 10) {
              segundos = '0' + segundos;
          }
          if(minutos < 10) {
              minutos = '0' + minutos;
          }
          if(hora < 10) {
              hora = '0' + hora;
          }
          document.getElementById("painel").innerHTML = hora + ":" + minutos + ":" + segundos;
          setTimeout(relogio, 1000);

      }
       
      O código acima está repetindo corretamente. Isso é verificado no console através da mensagem "Função executada corretamente". Porém não atualiza o relógio! Como isso é possível se antes tudo foi testado e o relógio escreve na tela de boa. Alguém que enxergue onde está o erro, pode me ajudar?
    • By MrCharset
      Eu tenho vários botões da classe "b3". Um desses tem id="bt1" e display="block". Também tenho vários botões da classe "b4". Um desse tem id="bt2" e display="none"
       
       
      Quando clico em algum dos "b3", o display deles todos fica "none" e o display de todos os "b4" fica "block"  //parei a implementação aki...
       
      Mas eu preciso que pra cada combinação "b3" + "b4" ocorra um função diferente baseado no id dos botões deles. Por exemplo, teria um função específica  e única para a combinação "bt1" + "bt2"
       
      A classe "b3" tem 10 botões e a "b4" tem 6. Eu, teoricamente, preciso fazer 60 funções, e, mesmo assim, nem sei o que por nessa funções!!! Preciso unir dois .clicks para executar cada uma das 60 funções
       
      E, além disso, tem uma forma de não serem necessárias 60 funções (com possíveis 60 ifs)?
       
       
      Desde já obrigado a todos.
    • By MrCharset
      Boa noite a todos. Olhem, por favor, este trecho de código:
       
      $("#E25").click(function()
              {
                  setTimeout(function()
                  {
                      document.getElementById("ter25").id = "t25";
                      document.getElementById("E25").style.display = "none";
                  }, 2000);
                  
                  $(".class").draggable
                  ({
                      containment: "#d1", connectToSortable: "#ter25"    
                  });
                  
                  $("#ter25").droppable
                  ({
                      hoverClass: "ter-ativo",
                      drop: function() 
                      {
                          push($(this).html());
                      }
                  });
              });
       
      Eu tenho um botão de id E25.
       
      Quando clico nele, divs membras da classe class (criatividade) tornam-se arrastáveis.
       
      Essas mesmas divs podem ser "droppadas" em outra div, de id ter25.
       
      Porém, preciso que apenas uma div da classe class seja "droppada" na ter25.
       
      Então, criei uma função que muda o id da ter25 para t25. Essa funçao é executada 2 segundos após o clique no botão E25.
       
      Assim, pensei eu, as divs da classe class não vão mais poder ser "droppadas". Mas me enganei. 
       
      Por quê?!!! O que determina a div droppable é seu id, e eu mudei seu id!
    • By Mayck May
      Bom dia,
      Após inúmeras tentativas não consegui fazer com que o script abaixo mantivesse aberto para o usuário por tempo necessário para escolha da linguá no menu multilíngue após executado e durante o movimento do ponteiro do mouse para seleção da linguá desejada pelo usuário.
      O problema é que o usuário ao mover o ponteiro do mouse sobre o link (Language) ativa a abertura de um menu multilíngue, que antes estava oculto e esse menu multilíngue por sua vez volta a se ocultar antes mesmo do usuário ter selecionado a linguá desejada
      O que eu estou em várias tentativas já realizadas buscando corrigir é que o script oculte o menu multilíngue aberto após um tempo se não houver interação, mas que esse tempo seja resetado (reset) sempre que for submetido pelo movimento do ponteiro do mouse sobre as opções de linguás, dando ao usuário o tempo necessário para seleção da linguá desejada
      Agradeço desde já a todos pelo tempo, atenção e ajuda e também agradeço quaisquer sugestões afim de permitir que o script abaixo mantenha o menu multilíngue disponível ao usuário para que o mesmo possa selecionar a linguá desejada quando houver interação com o link (Language) mas que esse menu multilíngue se mantenha oculto exceto o link (Language) quando não houver interação
      <script language="javascript"> var IE4 = document.all; NS4 = document.layers; NS6 = document.getElementById; function getStyle(id){return NS4 ? document[id] : NS6 ? document.getElementById(id).style : document.all[id].style;} function HideLayer(id){getStyle(id).visibility = NS4 ? "hide" : "hidden"; getStyle(id).display = "none";} function ShowLayer(id){getStyle(id).visibility = NS4 ? "show" : "visible"; getStyle(id).display = "block";} </script> <script> function esconde(){ document.getElementById("menu").style.visibility="hidden"; } </script> <form action="#"><input type="submit" onmouseover="ShowLayer('menu')" onmouseout="setTimeout('esconde()',3000);" value="Language"></form> <div id="menu" onmouseover="ShowLayer('menu')" onmouseout="setTimeout('esconde()',9000);" style="visibility: hidden;" > <div id="google_translate_element"></div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'pt', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> Mais uma vez agradeço a todos pelo tempo, ajuda e atenção
      Mayck
    • By Danilo Tek
      Olá, sou novo com JavaScript e estou tentando desenvolver um slide com setTimeout, estou tentando inserir uma função dentro de uma estrutura de repetição porem sem sucesso.
       
      Gostaria de saber se alguém pode me ajudar?

      PS:. Já tentei usar FOR, WHILE e também o setInterval, porém, todos sem sucesso...
      var x = 0; for (x; x < 3; ){ var y = setTimeout(function slide(){ $(".imagem_1_slide_NOTICIAS").css("display", "none"); $(".imagem_2_slide_NOTICIAS").css("display", "block"); setTimeout(function(){ $(".imagem_2_slide_NOTICIAS").css("display", "none"); $(".imagem_1_slide_NOTICIAS").css("display", "block"); setTimeout(function(){ $(".imagem_1_slide_NOTICIAS").css("display", "none"); $(".imagem_2_slide_NOTICIAS").css("display", "block"); setTimeout(function(){ $(".imagem_2_slide_NOTICIAS").css("display", "none"); $(".imagem_1_slide_NOTICIAS").css("display", "block"); }, 3000); }, 3000); }, 3000); }, 3000); }; // Fecha estrutura FOR
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.