Question

我在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中间介于初级和初学者之间。

提前致谢。

Answer 1

浏览器的错误控制台中是否有任何消息？确保脚本包含您尝试修改的<span>元素，或使用<script>元素上的defer attribute。否则，getElementById()将无法找到它。

Answer 2

这应该这样做：

没有jQuery，也适用于旧的IE＆＃39>

var eventPrefix = "";
if (typeof window.addEventListener === "undefined" && 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/

Answer 3

修改
在这种情况下，IIFE是多余的，因为OP的代码不是自包含在函数中。但是，如果有人想深入了解这个论点，我可以在这里留下答案。

您可能还想探索通常称为立即调用的函数表达式（IIFE）的内容。

有关更多信息，请访问Bel Alman网站：
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

基本上，通过使用这种语法包装代码，您可以告诉浏览器立即执行您的功能，这样就可以了：

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

使用您的代码查看此工作Plunker：http://plnkr.co/edit/cPObPCqVhavvWLtQbldd?p=preview

Javascript文件无法执行

3 个答案: