Comment puis-je nettoyer interval + message et remplacer ceux par un lien.

Le code ci-dessous ouvre un lien après 10 secondes dans une nouvelle fenêtre. Lorsque je reviens à cette page, un message indiquant Vous redirigerez dans 0 secondes

Ce que je veux, c'est qu'après 10 secondes (après avoir ouvert le lien dans un nouvel onglet), le compteur et le message seront remplacés par un nouveau message et un nouveau lien. c.-à-d. Si vous n'êtes pas redirigé vers le lien Cliquez ici pour accéder au lien.

var count = 10;
var counter;

function start(){
  counter = setInterval(timer, 1000);
}
 
function timer() {   
  var output = document.getElementById("displaySeconds");
  output.innerHTML = count;   
  count--;    
  if (count < 0) { 
    clearInterval(counter);    
    window.open("https://www.google.com");
    return;
  }
} 

window.addEventListener("load", start, false);
<br>You will redirect in <span id="displaySeconds">10</span> seconds.<br />
0
user3137451 27 janv. 2019 à 00:41

3 réponses

Meilleure réponse

Vous pouvez créer un div distinct avec le texte lorsque l'utilisateur n'est pas redirigé avec la propriété display définie sur aucune (display: none). Lorsque le délai expire, vous pouvez masquer le texte d'origine et afficher la version alternative.

Il y a un jsfiddle fonctionnel ci-dessous. J'ai modifié le compteur à 4 secondes pour ne pas trop attendre, vous pouvez l'ajuster comme vous le souhaitez.

var count = 4;
var counter;

function start() {
  counter = setInterval(timer, 1000);
}

function timer() {
  var output = document.getElementById("displaySeconds");
  output.innerHTML = count;
  count--;
  if (count < 0) {
    clearInterval(counter);
    window.open("https://www.google.com");
    
    let originalText = document.getElementById("original");
    let noRedirectText = document.getElementById("noredirect");
    
    originalText.style.display = "none";
    noRedirectText.style.display = "block";
  }
}
window.addEventListener("load", start, false);
<div>
  <div id="original">
    You will be redirected in <span id="displaySeconds">4</span> seconds.
  </div>

  <div style="display: none" id="noredirect">
    If you are not redirected click <a href="https://www.google.com">here</a> to go to the link.
  </div>
</div>

À votre santé!

1
Adrian Pop 26 janv. 2019 à 21:50

Cette fonction remplace le texte actuel par le texte requis si la redirection n'a pas pu avoir lieu.

var count = 10;
var counter = setInterval(timer, 1000);
var output = document.getElementById("displaySeconds");
var container = document.getElementById("container");
 
 function timer() {
     count--;
     if (count === 0) {
         stopTimer();
     }
     output.innerHTML = count;
 };

function stopTimer() {
  clearInterval(counter);
  window.open("https://www.google.com");
  container.innerHTML = ' If you are not redirected to the link <a href="https://www.google.com">Click Here</a> to go to the link.';
}
<div id="container">
 You will redirect in <span id="displaySeconds">10</span> seconds.
</div>
0
Scott Marcus 26 janv. 2019 à 22:02

Ajoutez simplement du code à la fonction d'intervalle qui masque le premier message et montre l'autre.

var count = 5;
var output = document.getElementById("displaySeconds");
var counter = null;

function timer() {   
  output.textContent = count;   
  count--;    
  if (count < 0) { 
    clearInterval(counter);    
    window.open("https://www.google.com");

    // Hide the first message and show the second:
    document.querySelector(".redirect1").classList.add("hidden");
    document.querySelector(".redirect2").classList.remove("hidden");    
  }
} 

addEventListener("load", function(){
  couner = setInterval(timer, 1000);
});
.hidden { display:none; }
<div class="redirect1">You will redirect in <span id="displaySeconds">5</span> seconds.</div>

<!-- The following is initially hidden because of the CSS class -->
<div class="redirect2 hidden">If you aren't redirected, click <a href="#">here</a></div>
0
Scott Marcus 26 janv. 2019 à 22:01