Блог

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

Вот JavaScript:

 var message, days;
if (new Date().getMonth() === 6) {
    days = 34 - new Date().getDate();
    message = "Coming in "   days   " days";
} else if (new Date().getMonth() === 7) {
    if (new Date().getDate() > 2) {
        message = "Almost there!";
    } else if (new Date().getDate() === 2) {
        message = "Coming in 1 day";
    } else {
        days = 3 - new Date().getDate();
        message = "Coming in "   days   " days";
    }
} else {
    message = "Coming soon";
}
document.getElementById("coming_soon").innerHTML = message;
  

И вот HTML:

 <span id="coming_soon"></span>
  

Проблема в том, что если я встрою JavaScript, он запускается идеально и отображается обратный отсчет. Однако, если я включу его в качестве отдельного .js файла, обратный отсчет не будет показан.

Как я могу включить это как отдельный файл и при этом запустить его и показать обратный отсчет?

Я полный новичок в JavaScript и где-то между средним уровнем и новичком в HTML.

Заранее спасибо.

Есть ли какие-либо сообщения в консоли ошибок браузера? Убедитесь, что скрипт включен после <span> элемента, который вы пытаетесь изменить, или используйте defer атрибут для <script> элемента. В противном случае getElementById() он не будет найден.

Это должно сделать это:

Без jQuery, а также для старых IE

 var eventPrefix = "";
if (typeof window.addEventListener === "undefined" amp;amp; window.attachEvent) {
    eventPrefix = "on";
    window.addEventListener = window.attachEvent;
}

if (typeof window.addEventListener !== "undefined") {
    window.addEventListener(eventPrefix   'load',  function() {
        var message, days;
        if (new Date().getMonth() === 6) {
            days = 34 - new Date().getDate();
            message = "Coming in "   days   " days";
        } else if (new Date().getMonth() === 7) {
            if (new Date().getDate() > 2) {
                message = "Almost there!";
            } else if (new Date().getDate() === 2) {
                message = "Coming in 1 day";
            } else {
                days = 3 - new Date().getDate();
                message = "Coming in "   days   " days";
            }
        } else {
            message = "Coming soon";
        }
        document.getElementById("coming_soon").innerHTML = message;
    });
}
  

Предварительный просмотр:http://jsfiddle.net/4JPCP/1/show /

Оптимизированный код:http://jsfiddle.net/4JPCP/3 /

Редактировать:
IIFE в этом случае избыточны, поскольку код OP не является самодостаточным в функции. Однако я мог бы оставить ответ здесь, если кто-то хочет глубже погрузиться в аргумент.

Возможно, вы также захотите изучить то, что обычно называется Немедленно вызываемой функцией Expression (IIFE).

Смотрите веб-сайт Bel Alman для получения дополнительной информации:
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

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

 (function(){ 
  /* your code */ 
})();
  

Посмотрите на этот рабочий модуль с вашим кодом:http://plnkr.co/edit/cPObPCqVhavvWLtQbldd?p=preview