javascript - 没有按钮自动调用javascript函数

Question

我开发了一个显示当前时间的 javascript 函数。在那之前我没有任何问题。问题是我不能在我想要的地方调用这个函数......我怎么能用这个调用它？

<script language="JavaScript">

function showTime() {
  var timeNow = new Date();
  var hours   = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();
  var timeString = "" + ((hours > 24) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  document.htmlClock.timeField.value = timeString;
  timerID = setTimeout("showTime()", 1000);
}

</script>

我要调用函数的位置

<li><a href="#"><i class="fa fa-clock-o"></i>Hours here</a></li>

Answer 1

您突然调用函数 showTime，并将 undefined 隐式传递给函数 setTimeout。在您的方法中，您实际上传递了一个 String，它将被评估(错误)。

我建议您使用函数 setInterval 来重复调用一个函数。

同样，使用事件 DOMContentLoaded 确保 HTML DOM 树在任何 DOM 操作之前完全加载。

function showTime() {
  var timeNow = new Date();
  var hours = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();
  var timeString = "" + ((hours > 24) ? hours - 12 : hours);
  timeString += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString += (hours >= 12) ? " P.M." : " A.M.";
  document.getElementById('hourshere').textContent = timeString;
}

document.addEventListener("DOMContentLoaded", function(event) {
  showTime();
  setInterval(showTime, 1000);
});

Location where I want to call the function
<li><a href="#"><i class="fa fa-clock-o"></i>
<span id='hourshere'>Hours here</span>
</a></li>