Question

我有一个非常广泛的HTML表单，用于在复杂的制造过程中收集数据。数据收集要求用户在80个单独的字段中标记日期和时间 - 我使用按钮作为每个数据字段的标签。

我有一个JavaScript函数，可以为单个字段提供所需的结果 - 但我不想复制函数的代码并更改每个必需条目的名称。

我是Javascript的新手，只是HTML的初学者 - 但我知道这可以做到......我无法弄清楚如何。我知道它与传递我的HTML字段的ID标签（进入循环？）有关，可以用作代码中的变量......但我不清楚如何。

这是我正在考虑用于我的时间戳（1场的设置）的代码：

<script type="text/javascript">
function getClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var second = now.getSeconds();
   if (hour   < 10) { hour   = "0" + hour;   }
   if (minute < 10) { minute = "0" + minute; }
   if (second < 10) { second = "0" + second; }
   var timeString= hour +
                    ':' +
                    minute +
                    ':' +
                    second
document.getElementById("txtTime").value = timeString;
}
</script>

如果有人能给我一个如何处理这个问题的线索，我一定很感激。

Answer 1

首先，如果修改JS函数以返回值，则可以多次调用它并重用代码。所以替代：

document.getElementById("txtTime").value = timeString;

的

return timeString;

然后，当你有jQuery可用时，你可以遍历需要日期的字段。如果你给他们一个“dateField”类（例如），即<input class="dateField" type="text" name="whatever" />，你可以这样做：

$(".dateField").val(getClockTime());

编辑：其他答案正确地指出调用getClockTime（）是不必要的密集（它也可能会让你有不同的时间）。因此，正如所建议的那样，一个更加傻瓜，性能更好的版本：

theTime=getClockTime();
$(".dateField").val(theTime);

Answer 2

如果您正在使用jQuery（我建议您为此类任务执行此操作，特别是因为您将问题标记为“jquery”），您可以使用以下命令：

function getClockTime()
{
    var now    = new Date();
    var hour   = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    if (hour   < 10) { hour   = "0" + hour;   }
    if (minute < 10) { minute = "0" + minute; }
    if (second < 10) { second = "0" + second; }
    var timeString= hour +
                    ':' +
                    minute +
                    ':' +
                    second
    return timeString;
}

$(document).ready(function() {
    var time = getClockTime();
    $("input.needsTime").val(time);
});

然后，对于需要插入时间的每个input，只需使用：

<input type="text" name="whatever" class="needsTime" />

请参阅this demo。

您的原始getClockTime函数用于获取当前时间。然后，当文档加载完成后，此函数将设置为变量time，因此不必多次调用它（保存一堆计算和性能）。最后，jQuery循环遍历具有类input的所有needsTime元素，并相应地设置它们的值。

Answer 3

我发现这很有效 - 相当不错：

<!-- Posts current time (HH:MM:SS) into a field with same id + "Time" as the button.
Each button must have an id value and onclick="inserttime(this.id)" -->
<script type="text/javascript">
function inserttime(butID) {
var timeFLD = (butID+"Time")
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
  if (minutes < 10) {minutes = "0" + minutes}
  if (seconds < 10) {seconds = "0" + seconds}
  pTime= hours + ":" + minutes + ":" + seconds + " "
document.getElementById(timeFLD).value = pTime
}
</script>

如何使用Javascript函数在HTML表单中使用时间填充多个字段？

3 个答案: