Форум АНТИЧАТ - Вопрос по HTML. Создать таймер отсчета.

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - Вопрос по HTML. Создать таймер отсчета. (https://forum.antichat.xyz/showthread.php?t=206948)

Вопрос по HTML. Создать таймер отсчета.

Таймер, красного цвета, отсчет времени, скажем - 14:00
и время начинает отсчитываться - 13:59, 13:58 и тд

Как такое сделать?

на хтмл это нельзя сделать. О_о

Цитата:

чечня в огне.. здесь не Авган...
И матерясь, мешая грязь,
Дождем свинца сметая мразь!

Да Да, тебя не поняли что ты имел в виду джава скрипт.

гугл рулит
http://tods-blog.com.ua/web-development/countdown-clock/

На ХТМЛ такого конечно не сделать, лучше всего использовать AJAX для подобной цели.
Передо мной стояла когда-то давно такая задача, аякса толком не знал, но нашел другой выход.

Этот код, ставим в хтмл.

Код:

<!--таймер-->

<style>div#timer{color:#FF0000;}</style>

<script language="javascript">        

var limit = 360; // в секундах

function processTimer(){

  if (limit > 0) {

    setTimeout("processTimer()",1000);

    limit--;

  } else {

    location.reload(true);

  }

  var limit_div = parseInt(limit/60); // минуты

  var limit_mod = limit - limit_div*60; // секунды

  // строка с оставшимся временем

  limit_str = "&nbsp;&nbsp;";

  if (limit_div < 10) limit_str = limit_str + "0";

  limit_str = limit_str + limit_div + ":";

  if (limit_mod < 10) limit_str = limit_str + "0";

  limit_str = limit_str + limit_mod + "&nbsp;&nbsp;";      

  // вывод времени

  el_timer = document.getElementById("timer");

  if (el_timer) el_timer.innerHTML = limit_str;

}

processTimer();

</script>

<div id="timer"></div>

Тег <div id="timer"></div>, ставим туда где нужен счетчик, в стилях шлифуем.

Плюс скрипта: простота и мизирный обьем, ничего лишнего;
Минус скрипта: var limit = 360; // время в секундах тут прописано статично, в результате при обновлении страницы счетчик сбрасывается, и отсчет начинается заново. Но с помощью пхп это решаемо.

Код:

<div id="timer"></div>

<style>

#timer { color:#FF0000; }

</style>

<script>



(function (node, padd)

{

    var limit  = 360;

    var format = 'Hours:Minutes:Seconds';



    var timer = setInterval(function ()

    {

        if (limit-- > 0)

        {

            var date = new Date(limit * 1000);



            node.innerHTML = format.replace(/\w+/g, function (m)

            {

                var s = date['getUTC' + m]().toString(10);



                return padd[s.length] + s;

            });

        }

        else

        {

            clearInterval(timer);

        }

    }, 1000);

}(document.getElementById('timer'), ['00', '0', '', '', '']));



</script>

Цитата:

На ХТМЛ такого конечно не сделать, лучше всего использовать AJAX для подобной цели.
Передо мной стояла когда-то давно такая задача, аякса толком не знал, но нашел другой выход.

Кстати аяксом все называют то, чего сами не понимают или понимают не полностью - самое точное определение похоже =)

Хз, как его кто понимает, я его поверхностно изучал пока, практиковать серьезно не приходилось, так, по мелочам.
Но сам принцип подобной организации работы яваскрипта нравится, и в плане распределенных запросов(асинхронизации), и производительности.

Вот жду хтмл5, там вродь как тож обещают нечто подобное.

п.с. отдельное спс за упрощения скрипта=)