otgamera
@otgamera
Что то знаю, что то нет!

Как сделать таймер обратного отсчета с остановкой при неактивной вкладке?

Доброго времени суток)
Прошу помощи, имею сайт на WP.
Cокращаю ссылки через плагин Pretty Links(про версия)
в том плагине есть переход по ссылке при помощи JavaScript(так называемая прокладка)
Я создал контент на этой вкладке, и синхронизировал обычный таймер с временем перехода, который я поставил в самом плагине.( и поставил таймер савтоматическим закрытием по времени, в надежде что человек будет сидеть на вкладке что бы она не закрылась) Было все прекрасно, и меня все устраивало до тех пор пока я не зашел на сайт "хауди хо" на этом сайте реализован таймер; обратный отсчет идет когда пользователь на вкладке, и останавливается когда пользователь уходит с вкладки - по возвращению продолжается отсчет.
Я порылся в коде прокладки и обнаружил такую вещь
Код прокладки(частично)
<div><script type='text/javascript'>
/* <![CDATA[ */
var plpJsRedirectL10n = {"url":"Ссылка на скрипт прямого скачивания с яндекс диск","delay":"15000"};
/* ]]> */
</script>
<script type='text/javascript' src='https://otgamera.ru/wp-content/plugins/pretty-link/pro/js/javascript-redirect.js?ver=3.0.9'></script>
</head>
<body>

Перейдя по ссылке скрипта на который ссылается данный код можно понять что там стоит обычный таймер с подстановкой по времени
Таймер
setTimeout(function () {
    window.location = plpJsRedirectL10n.url;
}, plpJsRedirectL10n.delay);

Суть вопроса заключается в том что - можно ли как то модифицировать данный таймер что бы при переходе на другую вкладку таймер останавливался? в тоже время хотелось бы все еще подставлять время в плагине
+ можно ли как то реализовать вывод данного таймера на самой странице, естественно с остановкой времени

P.s. прокладка для дополнительного заработка)))
Весь код прокладки
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="robots" content="noindex" />
  <title>#OT gamera</title>
<div class="bg"></div>
<div class="content">

<script type="text/javascript" nonce="f7e8463c322c46628f11797dab2" src="//local.adguard.org?ts=1567327875013&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"></script><link href="https://fonts.googleapis.com/css?family=Neucha|Oswald|Play&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <meta name="referrer" content="no-referrer" />
<body>
<p style="text-align: center;"><img class="alignnone size-medium wp-image-2382" src="https://otgamera.ru/wp-content/uploads/2019/06/logo-otgamera-350x70-300x60.png" alt="" width="300" height="60" /></p>

<div class="layer2">
<h1 style="text-align: center;color:#008000">Идёт поиск файла на сервере</h1>
<div class = "centerbit">Примерно осталось: <span id="timer_inp">15</span> сек.
<script type="text/javascript">
function timer(){
var obj=document.getElementById('timer_inp');
obj.innerHTML--;
    if (obj.innerHTML==0){
        
        setTimeout(function(){},1000);
    } else {
        setTimeout(timer,1000);
    }
}
setTimeout(timer,1000);
</script>
</div>
<p style="text-align: center;">Почему так происходит описано <a href="https://otgamera.ru/chto-za-fignya/" target="_blank" rel="noopener">здесь</a></p>
</biv>
<div class = "centerbit">
        <button class="custom-btn btn-4" onclick="window.open('', '_self', ''); window.close();" ><span>Закрыть вкладку скачивания</span></button>
</biv>
<biv class = "naz">
<script type="text/javascript">
window.onload = function () {
    var i = 35
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Страница закроется примерно через: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
                            setTimeout(function() { 
    window.close();
},3000 );
        }
    }, 1000)

}

</script>

<div id="timer"></div>
<div id="example" style=" display: none; ">
Еще больше модов на сайте, создавай контент с нами!
</div>
<div>
<p>
<!-- Yandex.RTB R-A-414468-4 -->
<div id="yandex_rtb_R-A-414468-4"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-414468-4",
                renderTo: "yandex_rtb_R-A-414468-4",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>
</div>
<style>
    
   .h1 {
    font: 16pt Oswald;  
   } 
      .layer2 {
    font-family: 'Play', sans-serif;
   } 
   .naz{
   font-family: 'Neucha', cursive;
   color:#FF0000;
   }
@media screen and (max-width: 600px) {
    body {
        font-size:1.5em;
    }
    …
    h2 {
        font-size:2.5em;
    }
}
    .buttons-coll {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}

.custom-btn {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
    .btn-4 {
  width: 330px  ;
  height: 40px auto;
  line-height: 46px;
  padding: 0;
  border: none;
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before,
.btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 50%;
  width: 2px;
}
.btn-4:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover:before {
  height: 100%;
}
.btn-4:hover:after {
  width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: 2px;
  height: 50%;
}
.btn-4 span:after {
  width: 20%;
  height: 2px;
}
.btn-4 span:hover:before {
  height: 100%;
}
.btn-4 span:hover:after {
  width: 100%;
}
  .centerbit { 
    text-align: center; 
  }
.content {
  position: relative;
  z-index: 2;
  color: #000;
}

.bg {
  position: absolute;
  z-index: 1;
  left: -10px;
  top: -10px;
  right: -10px;
  bottom: -10px;
  filter: blur(5px);
  background: url(https://otgamera.ru/wp-content/uploads/pattern_neto-1-min.gif) no-repeat center;
  background-size: cover;
}

</style>

</body>
<div><script type='text/javascript'>
/* <![CDATA[ */
var plpJsRedirectL10n = {"url":"ссылка на скрипт прямого скачивания с яндекс диска","delay":"15000"};
/* ]]> */
</script>
<script type='text/javascript' src='https://otgamera.ru/wp-content/plugins/pretty-link/pro/js/javascript-redirect.js?ver=3.0.9'></script>
</head>
<body>

</body>
</html>

Если сказать точнее то я понял что "delay":"15000"}; вставляется время через плагин
А вот тут
setTimeout(function () {
    window.location = plpJsRedirectL10n.url;
}, plpJsRedirectL10n.delay);
происходит отсчет, как реализовать с остановкой времени?
И как к примеру превратить во такой таймер
spoiler
<div class = "centerbit">Примерно осталось: <span id="timer_inp">15</span> сек.
<script type="text/javascript">
function timer(){
var obj=document.getElementById('timer_inp');
obj.innerHTML--;
    if (obj.innerHTML==0){
        
        setTimeout(function(){},1000);
    } else {
        setTimeout(timer,1000);
    }
}
setTimeout(timer,1000);
</script>
в таймер с остановкой времени при неактивной вкладке)
Готовые куски кода приветствуются - я чайник)
  • Вопрос задан
  • 235 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Вроде того может? https://jsfiddle.net/uqb2f9on/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Symphony
@Symphony
Просто используйте созданное для этого свойство: document.hidden или document.visibilityState
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    console.log("is visible");
  } else {
    console.log("isn't visible");
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы