JavaScript倒數計時不起作用

Question

我正在嘗試為我的網站進行Java倒計時，因此，一開始，我想測試最好的解決方案。 我現在有一個代碼，但是當我打開網站時，那里什么都沒有，我想嘗試將Javascript轉換為html時可能做錯了什么？

我的代碼：

<!DOCTYPE html>


<html>

<head>

    <title>Home Test Countdown</title>

    <script LANGUAGE="Javascript">

    var target_date = new Date("Aug 15, 2019").getTime();

    var days, hours, minutes, seconds;

    var countdown = document.getElementById("countdown");

    setInterval(function () {

    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  

    }, 1000);

</script>

</head>

<body>

<span id="countdown"></span>

</body>

</html>

Answer 1

由於您的腳本位於開頭，因此當var countdown = document.getElementById("countdown"); 執行該元素后，dom中將不存在該元素，因此countdown將為null，這將導致錯誤Uncaught TypeError: Cannot set property 'innerHTML' of null在countdown.innerHTML = '...'行中將Uncaught TypeError: Cannot set property 'innerHTML' of null 。

一種可能的解決方案是將您的代碼移至窗口加載事件處理程序

window.addEventListener('load', function () {
    var target_date = new Date("Aug 15, 2019").getTime();

    var days, hours, minutes, seconds;

    var countdown = document.getElementById("countdown");

    setInterval(function () {
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
    }, 1000);
})

演示：小提琴

另一個方法是將<span id="countdown"></span>之后的腳本移到頁面底部

Answer 2

此代碼有效，您需要在HTML元素之后添加代碼（在關閉body標簽之前添加javascript代碼）

或嘗試在window.onload添加您的代碼，例如，

window.onload = function(){
   // your timer code goes here
};

 var target_date = new Date("Aug 15, 2019").getTime(); var days, hours, minutes, seconds; var countdown = document.getElementById("countdown"); setInterval(function() { var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = parseInt(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60); seconds = parseInt(seconds_left % 60); countdown.innerHTML = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s"; }, 1000);

 <span id="countdown"></span>

另外，您還添加了標簽jquery以便可以將代碼添加到$ .ready（）中，

$(function(){
   // your code here
});

Answer 3

該腳本必須在跨度倒數對象之后

JavaScript倒數計時不起作用

問題描述

3 個解決方案

解決方案1
1 已采納 2015-03-09 11:14:44

解決方案2
0 2015-03-09 11:16:52

解決方案3
0 2015-03-09 11:17:12

JavaScript倒數計時不起作用

問題描述

3 個解決方案

解決方案1 1 已采納 2015-03-09 11:14:44

解決方案2 0 2015-03-09 11:16:52

解決方案3 0 2015-03-09 11:17:12

解決方案1
1 已采納 2015-03-09 11:14:44

解決方案2
0 2015-03-09 11:16:52

解決方案3
0 2015-03-09 11:17:12