Очистить интервал + сообщение и заменить ссылкой - PullRequest
Новая
       6

Очистить интервал + сообщение и заменить ссылкой

0 голосов
/ 27 января 2019

Как убрать интервал + сообщение и заменить их ссылкой.

Ниже код открывает ссылку через 10 секунд в новом окне. Когда я вернусь на эту страницу, появится сообщение Вы будете перенаправлены через 0 секунд

Я хочу, чтобы через 10 секунд (после открытия ссылки в новой вкладке) счетчик и сообщение заменились новым сообщением и ссылкой. Т.е. Если вы не перенаправлены на ссылку Нажмите здесь , чтобы перейти по ссылке. 

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 />

Ответы [ 3 ]

0 голосов
/ 27 января 2019

Просто добавьте код в функцию интервала, которая скрывает первое сообщение и показывает другое. 

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 голосов
/ 27 января 2019

Эта функция заменяет текущий текст требуемым текстом, если перенаправление не удалось. 

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 голосов
/ 27 января 2019

Вы можете создать отдельный div с текстом, когда пользователь не перенаправлен, если для свойства display установлено значение none (display: none).Когда таймер истекает, вы можете скрыть исходный текст и показать альтернативную версию.

Ниже приведен рабочий jsfiddle.Я изменил счетчик на 4 секунды, чтобы не ждать слишком много, вы можете настроить его так, как вы хотите. 

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>

Ура!

...