Скрипт обратного отсчета нескольких дат - PullRequest
Новая
       9

Скрипт обратного отсчета нескольких дат

0 голосов
/ 14 ноября 2010

Я знаю, что в JavaScript есть сотни сценариев таймера обратного отсчета, но я пока не нашел ни одного, который бы делал то, что мне нужно, поэтому я надеюсь, что эксперты здесь могут помочь.

По сути, я ищу скрипт, который будет отсчитывать время от одного праздника до следующего, как в этом примере. 

<code>
Thanksgiving is in: 12 Days 11 hours 25 minutes and 9 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 8 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 7 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 6 seconds
Thanksgiving is in: 12 Days 11 hours 25 minutes and 5 seconds
...
...
...

Пока таймер не достигнет 0, а затем я хочу, чтобы тот же таймер показывал это. 

<code>
Christmas is in: 29 Days 23 hours 59 minutes and 59 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 58 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 57 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 56 seconds
Christmas is in: 29 Days 23 hours 59 minutes and 55 seconds
...
...
...

И когда он достигнет 0, он начнет обратный отсчет до Нового года или любого другого значения следующей даты, которое было установлено в сценарии, и зацикливание будет выполнено бесконечно. Кто-нибудь знает какие-нибудь скрипты, которые могут это сделать?

Спасибо, Адам

Ответы [ 4 ]

2 голосов
/ 14 ноября 2010 
var callbacks = [
    {
        interval: 1000,
        callback: function() {
            // do Timer1 stuff
        }
    },
    {
        interval: 2000,
        callback: function() {
            // do Timer2 stuff
        }
    },
    {
        interval: 3000,
        callback: function() {
            // do Timer3 stuff
        }
    }
];

function startTimer () {
    var callback = callbacks[0];
    window.setTimeout(onTimerComplete, callback.interval);
}

function onTimerComplete () {
    var callback = callbacks.shift();
    callbacks.push(callback); // the first shall be the last
    callback.callback(); // call the callback function
    startTimer(); // set the timer for the first callback
}

startTimer();
2 голосов
/ 14 ноября 2010

Я собирался предложить, как изменить один из многих уже существующих сценариев обратного отсчета, но почти все они были ужасно написаны текущими стандартами кодирования JavaScript ( например, , используя строку в качестве аргументаsetTimeout).

Так что я нашел время написать свою собственную ( попробовать ) .Каждый может свободно использовать или модифицировать его, если кредит предоставлен.Просто вставьте <p id="countdown"></p> туда, куда вы хотите поместить текст обратного отсчета, а также добавьте следующий код JavaScript, изменив список дат по мере необходимости (в примере используется пять).улучшение.

Редактировать: Я улучшил скрипт, чтобы лучше отделять его настройки от большей части его кода, а также обновлять обратный отсчет, как только страница загружается.Кроме того, целевая дата теперь выбирается только при загрузке страницы, а это означает, что обратный отсчет остановится на нуле (но при перезагрузке страницы она переключится на следующую целевую дату).

1 голос
/ 14 ноября 2010

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

<pre> [Month, Day, Hour, Minute, "Tuesdays Meeting"]

Вы можете использовать 24-часовой формат для часов, поэтому 17 будет 5 вечера, а 5, конечно, будет означать 5 утра.Это откроет сценарий для гораздо большего числа людей и сделает его идеальным для моих нужд.

Спасибо, Адам

0 голосов
/ 14 ноября 2010

Это отправная точка, я не уверен в нужных вам особенностях, но этот запускает таймер, когда он сделан (через 5 секунд) запускает второй (который длится 4 секунды). 

<div id="countDiv"></div>

<script>
function countDown1 (count) {
  if (count > 0) {
   var d = document.getElementById("countDiv");
   d.innerHTML = "counter 1: " + count;
   setTimeout ("countDown1(" + (count-1) + ")", 1000);
   }
  else
   countDown2(4);
}
function countDown2 (count) {
  if (count > 0) {
   var d = document.getElementById("countDiv");
   d.innerHTML = "counter 2: " + count;
   setTimeout ("countDown2(" + (count-1) + ")", 1000);
   }

}
countDown1(5);
</script>
...