Question

我正在尝试为我的网站进行Javascript倒计时，所以作为一个开始，我想测试最佳解决方案。我现在有一个代码，但是当我打开网站时，没有任何东西在那里，我想我可能在尝试将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 = '...'。

一种可能的解决方案是将代码移动到窗口加载事件处理程序

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);
})

演示：Fiddle

另一种方法是在<span id="countdown"></span>

之后将脚本移到页面底部

Answer 2

此代码正常工作，您需要在HTML元素之后添加代码（在关闭body标签之前添加javascript代码）

或尝试在window.onload中添加您的代码，

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还添加了标记jquery，因此您可以在$.ready()中添加代码，

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

Answer 3

脚本需要跨度倒计时对象

Javascript倒计时不起作用

3 个答案: