document.write正在杀死页面 [英] document.write is killing page

问题描述

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

I created a timer and did not notice the document.write was killing the page because everything was working great. However, when the timer goes to 0, it only displays what is in the document.write function rather than everything else in my page.

这是杀死页面的原因，而仅显示()中的文本.

This is what is killing the page and only the text in ()'s is what is showing..

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

我该如何做才能使计时器停止并显示此文本，或者可以在不杀死其余代码的情况下在我的页面上显示此文本?

How can I make this so that the timer would stop and this text displays or this text can display on my page without killing the rest of the code?

这是我的完整代码，以演示我的操作方式.

Here is my full code to demonstrate how I am doing this.

<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>

推荐答案

，正如每个人所建议的那样. document.write将清除DOM中的所有内容. 最好的编写方法是在HTML中添加DIV并在javascript代码中设置该div.

as everybody suggested. document.write will clear everything from the DOM. the best way to write this would be to have a DIV in your HTML and set that div in your javascript code.

这是您的 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 代码，如下所示.

and update your Javascript code to look like this.

<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>

希望这会有所帮助.

这篇关于document.write正在杀死页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！