如何让我的 javascript 函数在页面加载时显示

Question

我找到了以下我想编辑和使用的脚本，但是我似乎无法找到如何制作脚本运行并在网页加载时显示。

function ShowTime() {
  var now = new Date();
  var hrs = 18-now.getHours();
  var mins = 60-now.getMinutes();
  var secs = 60-now.getSeconds();
      timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
  $("#countdown").html(timeLeft);
}

;
function StopTime() {
    clearInterval(countdown);

}

ShowTime();
var countdown = setInterval(ShowTime ,1000);

以上是 jsfiddle 的 link。如您所见，它是一个简单的倒数计时器。我试过使用 body onload="" 函数，但我有点摸不着头脑。我不是很擅长代码，所以任何帮助表示赞赏。我试过在脚本标签中编写函数并将 div 放在正文中，但我真的无法让计时器显示在网页上。

在此先感谢您！

Answer 1

不确定为什么 body onload 对您不起作用，但您似乎正在使用 jQuery 您可以尝试将方法调用包装在 $(document).ready():

var countdown;

function ShowTime() {
    var now = new Date();
    var hrs = 18-now.getHours();
    var mins = 60-now.getMinutes();
    var secs = 60-now.getSeconds();

    timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
    $("#countdown").html(timeLeft);
}

function StopTime() {
    clearInterval(countdown);
}

$(document).ready(function(){
    ShowTime();
    countdown = setInterval(ShowTime ,1000);
})

Answer 2

您的 jsfiddle 工作正常，所以问题一定是您无法在单个 html 文件中完成所有工作。

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>

    function ShowTime() {
          var now = new Date();
          var hrs = 18-now.getHours();
          var mins = 60-now.getMinutes();
          var secs = 60-now.getSeconds();
          timeLeft = hrs+' hours '+mins+' minutes '+secs+' seconds';
          $("#countdown").html(timeLeft);
    }

    function StopTime() {
        clearInterval(countdown);
    }
    </script>
</head>
<body onload="var countdown = setInterval(function(){ShowTime()} ,1000);">
    <div id="countdown"></div>
</body>
</html>

如何让我的 javascript 函数在页面加载时显示

How to get my javascript function to display on page load

javascript

function

onload

countdown