document.write 正在杀死页面答案

【问题标题】：document.write is killing pagedocument.write 正在杀死页面
【发布时间】：2015-12-07 00:49:13
【问题描述】：

我创建了一个计时器，但没有注意到 document.write 正在杀死页面，因为一切正常。但是，当计时器变为 0 时，它只显示 document.write 函数中的内容，而不是我页面中的其他所有内容。

这是杀死页面的原因，只有 () 中的文本是显示的内容..

document.write("The NFL Season is here!!");

我怎样才能做到这一点，以便计时器停止并显示此文本或此文本可以显示在我的页面上，而不会杀死其余代码？

这是我的完整代码，用于演示我是如何做到这一点的。

<script type="text/javascript">
        function cdtd () {
            var nflSeason = new Date ("September 10, 2015 08:30:00");
            var now = new Date();
            var timeDiff = nflSeason.getTime() - now.getTime();
            if (timeDiff < 0) {
                clearTimeout(timer);
                document.write("The NFL Season is here!!");
                //Run any code needed for countdown completion here.
            }

            var seconds = Math.floor(timeDiff / 1000);
            var minutes = Math.floor(seconds / 60);
            var hours = Math.floor(minutes / 60);
            var days = Math.floor(hours / 24);
            hours %= 24;
            minutes %= 60;
            seconds %= 60;

            document.getElementById("daysBox").innerHTML = days;
            document.getElementById("hoursBox").innerHTML = hours;
            document.getElementById("minsBox").innerHTML = minutes;
            document.getElementById("secsBox").innerHTML = seconds;

            var timer = setTimeout('cdtd()',1000);
        }
</script>

HTML

<div class="countdown_out">
<div id="countdown_title">NFL Season Opener Countdown</div>
<div class="countdown_position">
    <div class="countdownBox">
        <div class="countdown_time_category">Days</div>
        <div id="daysBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Hours</div>
        <div id="hoursBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Minutes</div>
        <div id="minsBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Seconds</div>
        <div id="secsBox" class="countdown_time"></div>
    </div>
</div>

【问题讨论】：

Related - What damage is done by document.write()?
这正是你不应该使用document.write()的原因。页面完全加载后，它会销毁所有内容并覆盖 DOM。如果要写入 DOM，请使用 .innerHTML（或类似名称）。
@Becky：与你已经相同的方式是：document.getElementById("daysBox").innerHTML = days;
只需在您的页面中创建一个 div <div id="page_message"></div> 并在 javascript 中将 document.write() 替换为 document.getElementById("page_message").innerHTML = 'The NFL Season is here!!';
太棒了。让我将其发布为答案

标签： javascript jquery html timer

【解决方案1】：

正如大家所建议的那样。 document.write 将清除 DOM 中的所有内容。编写此代码的最佳方法是在您的 HTML 中添加一个 DIV 并在您的 javascript 代码中设置该 div。

你的 HTML 应该是这样的

<div id="page_message" style="display: none;"></div>
<div class="countdown_out">
<div id="countdown_title">NFL Season Opener Countdown</div>
<div class="countdown_position">
    <div class="countdownBox">
        <div class="countdown_time_category">Days</div>
        <div id="daysBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Hours</div>
        <div id="hoursBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Minutes</div>
        <div id="minsBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Seconds</div>
        <div id="secsBox" class="countdown_time"></div>
    </div>
</div>

并更新您的 Javascript 代码，使其看起来像这样。

<script type="text/javascript">
    function cdtd() {
        var nflSeason = new Date("September 10, 2015 08:30:00");
        var now = new Date();
        var timeDiff = nflSeason.getTime() - now.getTime();
        if (timeDiff < 0) {
            clearTimeout(timer);
            document.getElementById("page_message").innerHTML = 'The NFL Season is here!!';
            document.getElementById("page_message").style.display = 'inline';

            //Run any code needed for countdown completion here.
        }

        var seconds = Math.floor(timeDiff / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);
        hours %= 24;
        minutes %= 60;
        seconds %= 60;

        document.getElementById("daysBox").innerHTML = days;
        document.getElementById("hoursBox").innerHTML = hours;
        document.getElementById("minsBox").innerHTML = minutes;
        document.getElementById("secsBox").innerHTML = seconds;

        var timer = setTimeout('cdtd()', 1000);
    }
</script>

希望这会有所帮助。

【讨论】：

【解决方案2】：

在页面完全加载之前，您应该只在同步代码中使用document.write。不要在defer 或async 标记的计时器、事件处理程序和脚本中使用它。您必须使用其他方式更改 DOM。

【讨论】：