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，它将被评估（BAD）。

我建议您使用函数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>

Answer 2

在您要显示时间的地方放置一个<span>，其ID为id。然后通过ID查询该<span>并设置其textContent。如果要定期更新时间，请使用setInterval函数：

function getTime() {
  const timeNow = new Date();
  const hours   = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  let timeString = '' + ((hours > 24) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  return timeString;
}

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

setInterval(() => {
  hoursSpan.textContent = getTime();
}, 1000);

<li>
  <a href="#">
    <i class="fa fa-clock-o"></i><span id="hours"></span>
  </a>
</li>

Answer 3

<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); //No longer needed
}

</script>

因此它将是：

var t=setInterval(showTime,1000);

要停止它，可以运行：

clearInterval(t);

Answer 4

<li><a href="#"><i class="fa fa-clock-o"></i><script>showTime()</script></a></li>

Answer 5

将onclick="showTime()添加到单击时所需的html元素中，调用函数showTime()。

如果要显示单击链接后的时间，

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

或者如果您想显示单击图标后的时间，

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

Answer 6

在javascript方面，也许您可以执行以下操作：

document.getElementById("clock").onclick = {
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);
};

HTML

<li><a href="#"><i id="clock"></i>Hours here</a></li>

Answer 7

被接受的答案和其他都很棒。我唯一的建议是修改日期的原始代码。当我看着它时，我发现某些零件可能被遗漏了。

以下是接受的答案中的JS：

function getTime() {
  const timeNow = new Date();
  const hours   = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  let timeString = '' + ((hours > 24) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  return timeString;
}

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

setInterval(() => {
  hoursSpan.textContent = getTime();
}, 1000);

这是我的建议：

function getTime() {
  const timeNow = new Date();
  const hours   = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  // use hours > 12 to generate 12-hour time because hours will never be greater than 24
  let timeString = '' + ((hours > **12**) ? hours - 12 : hours);
  timeString  += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString  += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString  += (hours >= 12) ? " P.M." : " A.M.";
  return timeString;
}

const hoursSpan = document.getElementById('hours');
// can omit this line, since it is handled by the setInterval function
// hoursSpan.textContent = getTime();

setInterval(() => {
  hoursSpan.textContent = getTime();
}, 1000);

标记未更改：

<li>
  <a href="#">
    <i class="fa fa-clock-o"></i><span id="hours"></span>
  </a>
</li>

无需按钮即可自动调用JavaScript函数

7 个答案: