post #3004

Código JavaScript para Redirecionamento de Pagina com Contagem Regressiva

Publicado em: 01/08/2023 / Atualizado em: 01/08/2023

Categorias: BlogElementorJavaScript (JS)JSWordpress

Com o código abaixo será possível redirecionar o usuário assim que a contagem finalizar, para isso, edite a variável urlRedirect com a URL que desejar e countInit com o tempo que desejar.

<center>
  <h3 style="color: #000;font-size: 60px;" id="countRedrct"></h3>
  <p id="redirectMessage"></p>
</center>

<script>
	var urlRedirect = "https://PAGINA_DO_DIRECIONAMENTO.com.br/";
    var countInit = 6;
    setInterval(function () {
      countInit = countInit - 1;
      document.getElementById("countRedrct").innerHTML = countInit;
      if (countInit <= 0) {
        window.location.href = urlRedirect;
        document.getElementById("countRedrct").innerHTML = 0;
      }
    }, 1000);

    var redirectParagraph = document.getElementById("redirectMessage");
    var link = document.createElement("a");
    link.href = urlRedirect;
    link.textContent = "clique aqui";
    redirectParagraph.innerHTML = "Para acessar manualmente ";
    redirectParagraph.appendChild(link);
</script>

Abaixo código editado para funcionar no editor do Elementor, para que não direcione quando estiver construindo a pagina:

<center>
  <h3 style="color: #000;font-size: 60px;" id="countRedrct"></h3>
  <p id="redirectMessage"></p>
</center>

<script>
  function isFrontend() {
    return !window.location.href.includes('elementor-preview');
  }

  if (isFrontend()) {
    var urlRedirect = "https://PAGINA_DO_DIRECIONAMENTO.com.br/";
    var countInit = 6;
    setInterval(function () {
      countInit = countInit - 1;
      document.getElementById("countRedrct").innerHTML = countInit;
      if (countInit <= 0) {
        window.location.href = urlRedirect;
        document.getElementById("countRedrct").innerHTML = 0;
      }
    }, 1000);
    
    var redirectParagraph = document.getElementById("redirectMessage");
    var link = document.createElement("a");
    link.href = urlRedirect;
    link.textContent = "clique aqui";
    redirectParagraph.innerHTML = "Para acessar manualmente ";
    redirectParagraph.appendChild(link);
  }
</script>

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/3004

ID de Referência: 3004

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato