Question

我对脚本编写起来相当新，所以请耐心和温柔地对待我。我有以下代码来获取时间并允许我在按下另一个按钮时将其传递给数据库（MySQL）。

＆＃13;

<form action="includes/data_input.inc.php" method="POST">

    <!--  button - Start Timer -->
    <timer>
	<input id="starttime_button" name = "starttime_button" type="button" value="Start Timer"
               onclick="document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})" />
	<input type="time" id="starttime" name="starttime" value="" />
    </timer>

＆＃13;

这适用于Firefox，但不适用于Google Chrome。请问是否有通用代码让我这样做？

我尝试过很多东西，包括这个，但它还没有完成......

＆＃13;

<form action="includes/data_input.inc.php" method="POST">

    <!--  button - Start Timer -->
    <timer>
	<input id="starttime_button" name = "starttime_button" type="button" value="Start Timer"
               onclick="getElementById('starttime').Date('i:s')" />
        <p type="time" id="starttime" name="starttime" value="" ></p>
    </timer>

＆＃13;

在这两种情况下，主表单都会继续，并以</form>

终止

提前致谢。

布赖恩。

Answer 1

不是将脚本放入属性中，而是将其放在单独的JavaScript文件中或脚本标记内更好。为了解决你到目前为止的问题：

＆＃13;

    <form action="includes/data_input.inc.php" method="POST">
        <!--  button - Start Timer -->
    	<timer>
    	    <input id="starttime_button" name = "starttime_button" type="button" value="Start Timer" onclick="setStartTime()" />
    	    <input type="text" id="starttime" name="starttime" value="" />
    	</timer>
    </form>

    <script>
        function setStartTime(){
            document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'});
        }
    </script>

＆＃13;

Answer 2

问题是您尝试使用与其不一致的值填充input type=time。您可以将结果放入常规input type=text，但是如果您只是想显示该值，则最好不要将其放在表单字段中，因为用户可以/将要修改这些值，然后你必须添加更多标记，使字段只读。

将代码分成符合现代标准的有效代码，并将输出的容器从input type=time更改为div后，它就可以了。下面，我将展示如何将结果放在文本框和首选div中。

＆＃13;

// Get DOM references:
var btn = document.getElementById("startTime_button");
var output1 = document.getElementById("output1");
var output2 = document.getElementById("output2");

// Set up click event handler:
btn.addEventListener("click", function(){
  var result = new Date().toLocaleTimeString(navigator.language, { 
                                                        hour: '2-digit', 
                                                        minute:'2-digit', 
                                                        second:'2-digit'
                                                     });
                                                       
  output1.textContent = result;
  output2.value = result;
});

＆＃13;

<!-- timer is not a valid element -->
<div>
  <input id="startTime_button" name = "starttime_button" type="button" value="Start Timer">
  <div id="output1"></div> <!-- If you are just outputting a value, don't use a form element -->
  <input type="text" id="output2">
</div>

＆＃13;

Answer 3

我无法相信这不起作用的原因。我的原始代码还可以......

＆＃13;

<form action="includes/data_input.inc.php" method="POST">

    <!--  button - Start Timer -->
    <timer>
	<input id="starttime_button" name = "starttime_button" type="button" value="Start Timer"
               onclick="document.getElementById('starttime').value = new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})" />
	<input type="time" id="starttime" name="starttime" value="" />
    </timer>

＆＃13;

只是显示时间的盒子的尺寸太小了。更改CSS代码以扩展显示框，这一切都像我原先预期的那样工作。我仍然无法理解为什么，但这是次要的，可以考虑为什么以后会出现这个问题。

感谢此主题的所有贡献者。我非常感谢你花时间和精力。

按钮可以在单击时输入当前时间

3 个答案: