Отсчет времени до события (JavaScript) - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Отсчет времени до события (JavaScript) (http://forum.oszone.net/showthread.php?t=110025)

Отсчет времени до события (JavaScript)

Можно ли сделать отсчет отсчет времени до события (скажем, до 31.12.08 23:59 :) ) на JS?
И чтобы секунды обновлялись без перезагрузки страницы.

Поподробнее, пожалуйста, что хочется получить.
Счётчик вроде "До армагеддона осталось 5 часов 17 минут и 56 секунд" или же чтобы через каждые десять секунд, предположим, открывался новый абзац текста?

Цитата:

Цитата Coutty

Счётчик вроде "До армагеддона осталось 5 часов 17 минут и 56 секунд" »

Именно это.

Помогите мне!

Наверняка можно найти уже готовое, но мы не ищем лёгких путей:)

HTML код:

<html>

<head>

<title>Демонстрация</title>

<script>

// эти три переменные можно генерировать php-скриптом на основе каких-то данных

// или же прописать ручками, но тогда они при каждом запросе будут одни и те же

var hour = 5;

var min = 17;

var sec = 56;



var timer; // ссылка на таймер, который потом можно будет остановить



// это необязательно, просто мне нравится начинать все свои скрипты с main() :)

// вызов её прописывается в <body onload="main()">

function main() {

  timer = window.setInterval("showTime()", 1000); // каждые 1000 мс вызываем функцию showTime()

}



function showTime() {

  sec--; // каждый вызов функции приводит к уменьшению на 1 секунду

  if (sec < 0) // если секунды ушли в минус,

    {

    sec = 59; // возвращаем их в 59

    min--;      // и уменьшаем минуту

    if (min < 0)  // если минуты ушли в минус

      {

       min = 59;  // возвращаем их в 59

       hour--;   // и уменьшаем час на единицу

       if (hour < 0) // а уж если и час в минус ушёл

          {

          window.clearInterval(timer); // значит хватит считать, снимаем таймер, чтоб функция больше не вызывалась

          document.getElementById("showTime").innerHTML = "<span style='color:red'>Армагеддон наступил!</span>"; // и выводим красными буквами приветствие:)

          }

      }

    }

  // окончание вычисления такое:

  document.getElementById("showTime").innerHTML = "До армагеддона осталось " + hour + " часов " + min + " минут " + sec + " секунд";

}

</script>

<body onload="main()">

<div id="showTime">Сюда будет вписываться текст</div>

</body>

</html>

В общем-то, мне влом проверять (создать файл, записать, открыть...), но должно работать как надо.

Coutty, мне надо. чтобы были и дни

Только оно немного не по-русски будет писать иногда:) Например: "1 часов 2 минут 52 секунд".
Можно и так сделать:

HTML код:

document.getElementById("showTime").innerHTML = "До армагеддона осталось времени: " + hour + ":" + min + ":" + sec + ":";

Тогда будет выводиться: "До армагеддона осталось времени: 5:17:56".

Проверил. Работает.

А что, до матча Россия-Испания засечь хочешь?)) Такая срочность...

Ну так и дни добавим:)

HTML код:

<html>

<head>

<title>Демонстрация</title>

<script>

// эти три переменные можно генерировать php-скриптом на основе каких-то данных

// или же прописать ручками, но тогда они при каждом запросе будут одни и те же

var days = 8;

var hour = 5;

var min = 17;

var sec = 56;



var timer; // ссылка на таймер, который потом можно будет остановить



// это необязательно, просто мне нравится начинать все свои скрипты с main() :)

// вызов её прописывается в <body onload="main()">

function main() {

  timer = window.setInterval("showTime()", 1000); // каждые 1000 мс вызываем функцию showTime()

}



function showTime() {

  sec--; // каждый вызов функции приводит к уменьшению на 1 секунду

  if (sec < 0) // если секунды ушли в минус,

    {

    sec = 59; // возвращаем их в 59

    min--;      // и уменьшаем минуту

    if (min < 0)  // если минуты ушли в минус

      {

       min = 59;  // возвращаем их в 59

       hour--;   // и уменьшаем час на единицу

       if (hour < 0) // а уж если и час в минус ушёл

          {

          hour = 23;

          days--;

          if (days < 0)

            {

            window.clearInterval(timer); // значит хватит считать, снимаем таймер, чтоб функция больше не вызывалась

            document.getElementById("showTime").innerHTML = "<span style='color:red'>Армагеддон наступил!</span>"; // и выводим красными буквами приветствие:)

            }

          }

      }

    }

  // окончание вычисления такое:

  document.getElementById("showTime").innerHTML = "До армагеддона осталось времени: " + days + " дней " + hour + " часов " + min + " минут " + sec + " секунд";

}

</script>

<body onload="main()">

<div id="showTime">Сюда будет вписываться текст</div>

</body>

</html>

Если надо, чтобы ещё и наименования к цифрам по-русски склонялись, то код немного усложниться. Но если такой необходимости нет, то я зря не буду уж:)

Так, вопрос обновился в шапке. Сейчас поменяем ещё раз:)

Цитата:

Цитата Coutty

// эти три переменные можно генерировать php-скриптом на основе каких-то данных // или же прописать ручками, но тогда они при каждом запросе будут одни и те же »

Вот в этом проблема! Событие до которого нужно считать, имеет конкретную дату и конкретное время (см. пример с новым годом в шапке). PHP нет возможности сделать!

Цитата:

Цитата Coutty

А что, до матча Россия-Испания засечь хочешь?)) Такая срочность... »

До финала :)

Так можно ли реализовать с помощью JavaScript аналог скрипта Coutty, только чтобы считалось время до даты. Если JavaScript не может открывать системные часы, то надо, чтобы под таймером была строка
ВВЕДИТЕ ВРЕМЯ И ДАТУ:
[].[].[] []:[] [вкл. таймер]
и спрашивалось это у пользователей.

HTML код:

<html>

<head>

<title>Демонстрация посложнее</title>

<script>

var final = {'year':2008, 'month':12, 'day':31, 'hour':23, 'min':59, 'sec':59}; // это дата и время, до которых надо считать

var months = [31,28,31,30,31,30,31,31,30,31,30,31]; // количество дней в месяцах. В феврале поставил 28. Пусть будет:)



var d = new Date();

var year = final.year - d.getFullYear(); // вычисляем, сколько надо лет отсчитывать

var month = final.month - d.getMonth() - 1;

if (year && final.month < d.getMonth()) month += 12; // если количество оставшихся лет больше нуля, увеличиваем месяцы на 12. Ну по логике так надо сделать

var days = final.day - d.getDate() - 1;

if (month && final.day < d.getDate()) 

  {

  days += months[month-1]; // если месяцев больше 0, то количество дней увеличивается на количество дней в предыдущем месяце

  month--;

  }

var hour = final.hour - d.getHours();

var min = final.min - d.getMinutes();

var sec = final.sec - d.getSeconds();



var timer; // ссылка на таймер, который потом можно будет остановить



// это необязательно, просто мне нравится начинать все свои скрипты с main() :)

// вызов её прописывается в <body onload="main()">

function main() {

  timer = window.setInterval("showTime()", 1000); // каждые 1000 мс вызываем функцию showTime()

}



function showTime() {

  sec--; // каждый вызов функции приводит к уменьшению на 1 секунду

  if (sec < 0) // если секунды ушли в минус,

    {

    sec = 59; // возвращаем их в 59

    min--;      // и уменьшаем минуту

    if (min < 0)  // если минуты ушли в минус

      {

       min = 59;  // возвращаем их в 59

       hour--;   // и уменьшаем час на единицу

       if (hour < 0) // а уж если и час в минус ушёл

          {

          hour = 23;

          day--;

          if (day < 0)

            {

            day = months[month-1];

            month--;

            if (month < 0)

              {

              month = 12;

              year--;

              if (year < 0)

                {

                window.clearInterval(timer); // значит хватит считать, снимаем таймер, чтоб функция больше не вызывалась

                document.getElementById("showTime").innerHTML = "<span style='color:red'>Армагеддон наступил!</span>"; // и выводим красными буквами приветствие:)

                }

              }

            }

          }

      }

    }

  // окончание вычисления такое:

  text = "До армагеддона осталось ";

  switch(year) {

    case 0:

      text += "0 лет "; break;

    case 1:

      text += "1 год "; break;

    case 2: case 3: case 4:

      text += year + " года "; break;

    default:

      text += year + " лет "; break;

  } 

  switch(month) {

    case 0: case 5: case 6: case 7: case 8: case 9: case 10: case 11: case 12:

      text += month + " месяцев "; break;

    case 1:

      text += month + " месяц "; break;

    case 2: case 3: case 4: 

      text += month + " месяца "; break;

  }

  switch(days) {

    case 1: case 21: case 31:

      text += days + " день "; break;

    case 2: case 3: case 4: case 22: case 23: case 24:

      text += days + " дня "; break;

    default:

      text += days + " дней "; break;

  }

  text += " и вот столько ещё времени: " + hour + ":";

  if (min.toString().length == 1) text += "0";

  text += min + ":";

  if (sec.toString().length == 1) text += "0";

  text += sec;

  document.getElementById("showTime").innerHTML = text;

}

</script>

<body onload="main(); showTime();">

<div id="showTime">Сюда будет вписываться текст</div>

</body>

</html>

Я не гарантирую полную правильность работы - может быть дни или месяцы или ещё чего будет считать неправильно, но... Уже за полночь, а мне спать осталось меньше 8 часов-ня:)
На первый взгляд всё работает. Скрипт-то, в общем, не сложный.

Цитата:

Цитата Coutty

Я не гарантирую полную правильность работы - может быть дни или месяцы или ещё чего будет считать неправильно, но... Уже за полночь, а мне спать осталось меньше 8 часов-ня
На первый взгляд всё работает. Скрипт-то, в общем, не сложный. »

Чтобы считал до 29-ого, надо вписать 30-ое. Вот такой глюк нашел.

Где-то вот в этой части кода логические ошибки:

HTML код:

var year = final.year - d.getFullYear(); // вычисляем, сколько надо лет отсчитывать

var month = final.month - d.getMonth() - 1;

if (year && final.month < d.getMonth()) month += 12; // если количество оставшихся лет больше нуля, увеличиваем месяцы на 12. Ну по логике так надо сделать

var days = final.day - d.getDate() - 1;

if (month && final.day < d.getDate()) 

  {

  days += months[month-1]; // если месяцев больше 0, то количество дней увеличивается на количество дней в предыдущем месяце

  month--;

  }

var hour = final.hour - d.getHours();

var min = final.min - d.getMinutes();

var sec = final.sec - d.getSeconds();

Я в этом просто уверен)

Цитата:

Цитата Котяра

Чтобы считал до 29-ого, надо вписать 30-ое. Вот такой глюк нашел »

Может это не глюк, а смещение цифры в переменной с которой начинается отчёт времени ?