Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Таймер обратного отсчета до события (https://javascript.ru/forum/dom-window/55499-tajjmer-obratnogo-otscheta-do-sobytiya.html)

boypush 30.04.2015 16:17
Таймер обратного отсчета до события
 
:help: Приветствую , помогите пожалуйста составить скрипт самого обычного таймера обратного отсчета например До события осталось: 1 дней 2 часов 30 минут 50 секунд , и еще если возможно сделать чтобы таймер работал без разницы в часовых поясах . Спасибо:help:

Decode 30.04.2015 18:01
100500 готовых плагинов есть.

boypush 30.04.2015 19:18
Цитата:
Сообщение от Decode (Сообщение 368876)
100500 готовых плагинов есть.
подскажите где пожалуйста

Makarov 30.04.2015 20:00
Например вот

boypush 30.04.2015 20:48
Цитата:
Сообщение от Makarov (Сообщение 368896)
хаххаха:haha: авто ввод порадовал)))))))) да вводил я много раз в гугл))) мне выдает постоянно всякие красивые с оформлением и к тому же они показывают разное время в разных часовых поясах , а мне нужен ОБЫЧНЫЙ без интерфейса , ну или если есть знатоки то как подключить таймер к серверному времени чтобы у пользователей независимо в каком часовом поясе они находятся был одинаковый отсчет . вот)

Makarov 30.04.2015 20:56
Всегда можно погуглить получше, вот тут более продвинутый генератор:
http://megatimer.ru/
Работоспособность правда проверять лень)

Про "подключить таймер к серверному времени" - это насколько я понимаю просто один раз спросить у сервера сколько по его мнению осталось в миллисекундах до этой даты, вернуть эти миллисекунды на клиент, там их перевести в дни-часы-минуты-секунды и показать их. Сложности в чем?

рони 30.04.2015 21:52
Таймер до даты в нужной таймзоне
 
:cray: порядковый номер будет 200 :lol:
нормальный вариант для такого случая описан в посте выше.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .number{
    background-color: #c3cddc;
    color: #4f5865;
    font-weight: bold;
    padding: 1px 2px;
  }
  </style>
</head>

<body>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
    return (9 < a ? "" : "0") + a
}
function formatTime(a) {
    a = Math.floor(a / 1E3);
    var b = Math.floor(a / 60),
        c = Math.floor(b / 60),
        d = c / 24 | 0,
        c = c % 24;
    a %= 60;
    b %= 60;
    return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + two(c) + "</span> " + hours(c) + " <span class='number'>" + two(b) + "</span> " + minutes(b) + " <span class='number'>" + two(a) + "</span> " + seconds(a)
};

// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")

function plural(str1,str2,str5){
  return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
  }

var days =  plural('день', 'дня', 'дней'),
    hours = plural('час', 'часа', 'часов'),
    minutes = plural('минута', 'минуты', 'минут'),
    seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
       var a = new Date,
           b = new Date(2015, 4, 1, 0, 0, 0),
           d = "1 мая в Калининграде",
       m = -120 - a.getTimezoneOffset(); // -120 нужная таймзона в минутах
       b.setMinutes(m,0,0);
       a = b.getTime() - a.getTime();
      if(a > 0)   {document.getElementById("show").innerHTML = "До " + d + " осталось: " + formatTime(a);
       window.setTimeout(Time, 1E3)}
      else {
        document.getElementById("show").innerHTML = "!!!"
      }
   };
Time()
</script>
</body>
</html>

boypush 01.05.2015 00:03
Цитата:
Сообщение от Makarov (Сообщение 368900)
Всегда можно погуглить получше, вот тут более продвинутый генератор:
http://megatimer.ru/
Работоспособность правда проверять лень)

Про "подключить таймер к серверному времени" - это насколько я понимаю просто один раз спросить у сервера сколько по его мнению осталось в миллисекундах до этой даты, вернуть эти миллисекунды на клиент, там их перевести в дни-часы-минуты-секунды и показать их. Сложности в чем?
мегатаймер отличный таймер, использовал раньше только вот он проблему в часовых поясах не решает)))
сложности в написании кода)))

boypush 01.05.2015 00:08
Цитата:
Сообщение от рони (Сообщение 368916)
:cray: порядковый номер будет 200 :lol:
нормальный вариант для такого случая описан в посте выше.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .number{
    background-color: #c3cddc;
    color: #4f5865;
    font-weight: bold;
    padding: 1px 2px;
  }
  </style>
</head>

<body>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
    return (9 < a ? "" : "0") + a
}
function formatTime(a) {
    a = Math.floor(a / 1E3);
    var b = Math.floor(a / 60),
        c = Math.floor(b / 60),
        d = c / 24 | 0,
        c = c % 24;
    a %= 60;
    b %= 60;
    return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + two(c) + "</span> " + hours(c) + " <span class='number'>" + two(b) + "</span> " + minutes(b) + " <span class='number'>" + two(a) + "</span> " + seconds(a)
};

// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")

function plural(str1,str2,str5){
  return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
  }

var days =  plural('день', 'дня', 'дней'),
    hours = plural('час', 'часа', 'часов'),
    minutes = plural('минута', 'минуты', 'минут'),
    seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
       var a = new Date,
           b = new Date(2015, 4, 1, 0, 0, 0),
           d = "1 мая в Калининграде",
       m = -120 - a.getTimezoneOffset(); // -120 нужная таймзона в минутах
       b.setMinutes(m,0,0);
       a = b.getTime() - a.getTime();
      if(a > 0)   {document.getElementById("show").innerHTML = "До " + d + " осталось: " + formatTime(a);
       window.setTimeout(Time, 1E3)}
      else {
        document.getElementById("show").innerHTML = "!!!"
      }
   };
Time()
</script>
</body>
</html>
спасибо,буду пробовать))))))

Makarov 01.05.2015 01:04
Да, еще надо не забыть учесть поправку на время ожидания ответа от сервера...
В общем если от сервера получать то главный вопрос встает, что это за сервер?
1. Свой
2. Не свой но какой-то конкретный и есть протокол общения с ним
3. Апофиг, любой который вернет время

boypush 01.05.2015 04:41
Цитата:
Сообщение от Makarov (Сообщение 368946)
Да, еще надо не забыть учесть поправку на время ожидания ответа от сервера...
В общем если от сервера получать то главный вопрос встает, что это за сервер?
1. Свой
2. Не свой но какой-то конкретный и есть протокол общения с ним
3. Апофиг, любой который вернет время
какой вариант проще будет выбрать?)) сервер мой но как бы и не мой :D:haha:

laimas 01.05.2015 08:33
рони,
дискриминация получается, если счет начинать с текущего времени клиента. :)

рони 01.05.2015 10:52
laimas,
в каком то городе по местному времени должно произойти событие, скрипт учитывает разницу в часовых поясах, но для любых часовых поясов, событие наступит одновременно.

laimas 01.05.2015 11:07
Все правильно, но время старта таймера должен задавать сервер по своему времени. )

рони 01.05.2015 11:36
Цитата:
Сообщение от laimas
время старта таймера должен задавать сервер
Цитата:
Сообщение от рони
порядковый номер будет 200
:)
http://javascript.ru/forum/dom-windo...n-tajjmer.html
Цитата:
Сообщение от Woldor
под московское время подогнать можна
Цитата:
Сообщение от рони
можно если брать время с сервера

laimas 01.05.2015 16:18
рони, хорошо, теперь я знаю какая у меня очередь, счетчик уже включен :)

boypush 04.05.2015 22:34
Цитата:
Сообщение от рони (Сообщение 368916)
:cray: порядковый номер будет 200 :lol:
нормальный вариант для такого случая описан в посте выше.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .number{
    background-color: #c3cddc;
    color: #4f5865;
    font-weight: bold;
    padding: 1px 2px;
  }
  </style>
</head>

<body>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
    return (9 < a ? "" : "0") + a
}
function formatTime(a) {
    a = Math.floor(a / 1E3);
    var b = Math.floor(a / 60),
        c = Math.floor(b / 60),
        d = c / 24 | 0,
        c = c % 24;
    a %= 60;
    b %= 60;
    return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + two(c) + "</span> " + hours(c) + " <span class='number'>" + two(b) + "</span> " + minutes(b) + " <span class='number'>" + two(a) + "</span> " + seconds(a)
};

// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")

function plural(str1,str2,str5){
  return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
  }

var days =  plural('день', 'дня', 'дней'),
    hours = plural('час', 'часа', 'часов'),
    minutes = plural('минута', 'минуты', 'минут'),
    seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
       var a = new Date,
           b = new Date(2015, 4, 1, 0, 0, 0),
           d = "1 мая в Калининграде",
       m = -120 - a.getTimezoneOffset(); // -120 нужная таймзона в минутах
       b.setMinutes(m,0,0);
       a = b.getTime() - a.getTime();
      if(a > 0)   {document.getElementById("show").innerHTML = "До " + d + " осталось: " + formatTime(a);
       window.setTimeout(Time, 1E3)}
      else {
        document.getElementById("show").innerHTML = "!!!"
      }
   };
Time()
</script>
</body>
</html>
Подскажи как в этом скрипте дату задать?? непойму что то?))

рони 04.05.2015 23:35
boypush,
строка 47
b = new Date(2015, 4, 1, 0, 0, 0),
год , месяц , день --- 1 мая 2015 года
http://javascript.ru/Date


Часовой пояс GMT +3, время: 11:46.