Document.title как в титле впихнуть таймер обратного отсчета?

Question

[tryty]

Здравствуйте, нашел в сети js и немного переделал

<script type="text/javascript">

function changeTitle(start, end){
	 document.title =start;
 if(end < start) {
   setTimeout(changeTitle,1000, start - 1, end)
 }
if(start == 0) {document.title = "Заберите бонус";

  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = '../../texte/1.mp3'; // Указываем путь к звуку "клика"
  audio.autoplay = true; // Автоматически запускаем

setTimeout(

         function() {

             location.reload();

        }, 5000

        );
}
}

changeTitle(<?echo $min;?>, 0);

Суть кода есть таймер мин сек на странице а этот js выводит секунды в title как сделать нормальный таймер в титле, что бы в титле было 10м:60с и отсчет а то у меня ток секунды выводятся а мин сек вообще не пишутся )

Answer 1

[Max Abzalov]

Сформируйте текстом шаблон и пишите его в title. Moment.js может упростить задачу. И не используйте в качестве отсчёта setTimeout, берите время напрямую и объекта Date и вычисляйте разницу со старта. setTimeout отрабатывает не ровно через 1секунду, а через 1сеунуду плюс время, пока очистится стэк. Такая особенность работы v8 и WebAPI.

Comments

[tryty]

на php хоть что то умею а js вообще не знаю) "а через 1сеунуду плюс время" эт через сколько? у меня в бд стоит в какое время появится кнопка

[Max Abzalov]

А не известно, смотря насколько загружен стэк. Поэтому нужно использовать Date.

Я не знаю php совершенно, пробовал - не понравилось, с тех пор его не трогаю. Но в вашем случае все просто, на странице js это сильный инструмент, используйте напрямую манипуляции с DOM, это не страшно совсем, т.е. document.title ="время таймера" вполне сработает. Присваивайте только готовую строку в нужном формате.

[tryty]

Вот посмотрите сделал полностью )))

<script>function timer(elem, min, sec) {

  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  
  elem.innerHTML ="До бонуса: "+ min + "m" + ":" + sec + "s";
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
 if (min < 10) min  = "0" + min;
    if (sec < 10) sec  = "0" + sec;
document.title ="До бонуса: "+ min +"m" + ":" + sec +"s";
if(( sec == 0) && ( min == 0)) {document.title = "Заберите бонус";
 
  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = '../../texte/1.mp3'; // Указываем путь к звуку "клика"
  audio.autoplay = true; // Автоматически запускаем
 
setTimeout(
 
         function() {
 
             location.reload();
 
        }, 5000
 
        );
}
}
 
// ну и собственно пример вызова этого чуда
timer(document.getElementById('timer_inp'), <?echo $hours;?>, <?echo $min;?>);
 
</script>

[tryty]

Max Abzalov, дерьмовый тот кусок был )

[Max Abzalov]

Если это работает, то проблема решена. Но рефакторинг не помешал бы)
Из простого, не используйте конкатенации строк, к примеру, используйте string templates.
Будет намного красивее и понятнее выглядеть.
И что-то вы с setTimeout прям накрутили. Зачем такие биндинги там?) Такой код тяжело читать. Используйте функции стрелки, к примеру, если вызов функции нужно отложить с нужными параметрами. Туда и пихайте и минуты и секунды.
setTimeout( () => changeTitle(minutes, seconds), 1000 );

[tryty]

Max Abzalov, с js сутки мне бы переварить то, что вы мне написали )))))

[tryty]

Max Abzalov, единственная проблема если вешать if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec; выше что б и в диве два нуля писалось код дико штырит и мелодию тож

Answer 2

[tryty]

Осталось только сделать что б когда секунды прошли отнимать минуты

<?$k = ($hours * 60 + $min);?>

<script type="text/javascript">

function changeTitle(start, end){
  document.title ="<?echo $hours?>"+ "m"+ start +"s";
 if(end < start) {
   setTimeout(changeTitle,1000, start - 1, end)
 }
 strt = <?echo $k;?>;
if(strt == 0) {document.title = "Заберите бонус";

  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = '../../texte/1.mp3'; // Указываем путь к звуку "клика"
  audio.autoplay = true; // Автоматически запускаем

setTimeout(

         function() {

             location.reload();

        }, 5000

        );
}
}

changeTitle(<?echo $min;?>, 0);


</script>