Question

我想使用HH MM SS之类的表单元素显示时钟，但是它不起作用。我该怎么办？

<html>   
<body>
  <p>A script on this page starts this clock:</p>
  <p id="demo"></p>

  <script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
      var d = new Date();
      var t = d.getHours();
      var y=d.getMinutes();
      var z=d.getSeconds();
      document.getElementById("demo").innerHTML = t+":"+y+":"+z;
    } 
  </script>

  <script>
    function fun1() {
      var d = new Date();
      var t = d.getHours();
      var y=d.getMinutes();
      var z=d.getSeconds();  
      window.document.my.hh.value=t+;
      window.document.my.mm.value=+y+;
      window.document.my.ss.value=+z;
    }
  </script>

  <form name="my">
    HH
    <input type="text" name="hh">
    MM
    <input type="text" name="mm">
    SS
    <input type="text" name="ss">


  </form>
</body>
</html>

我希望输出像此页面上的脚本将从这个时钟开始：

13:10:24

HH 13 MM 10 SS 24

但实际输出是此页面上的脚本将从这个时钟开始：

13:10:24

HH  MM  SS

Answer 1

您应该在此处更改代码

window.document.my.hh.value=t;
window.document.my.mm.value=y;
window.document.my.ss.value=z;

这是我修复的演示：https://codepen.io/phuongnm153/pen/PrQvGq

已更新：

问题有所改变。

然后我将fun1();添加到myTimer() function

我更新了演示链接

Answer 2

为每个输入标签输入ID，查询每个输入标签，最后填写所需的数据。例如：

<input type="text" name="hh" id="myH">
<script> 
document.getElementById('myH').value('99999')
</script>

Answer 3

您可以通过执行以下操作轻松地实现目标：（顺便说一句，存储对元素的引用是一种好习惯，因为从DOM中获取元素可能会非常昂贵）

let clockHolder = document.getElementsByName("my")[0];
var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    clockHolder.children[0].value = toDoubleDigits(d.getHours());
    clockHolder.children[1].value = toDoubleDigits(d.getMinutes());
    clockHolder.children[2].value = toDoubleDigits(d.getSeconds());
}

function toDoubleDigits(int) {
    if (int > 9) return int;
    return "0" + int;
}

toDoubleDigits函数可确保您始终拥有03:07:20而不是3：7：20。

Answer 4

这是你想要的吗？

<html>   
<body>

  <p>A script on this page starts this clock:</p>
  <p id="demo"></p>

  <form name="my">
      HH
      <input type="text" name="hh">
      MM
      <input type="text" name="mm">
      SS
      <input type="text" name="ss">

      <input type="button" value="calc" onclick="fun1()">
  </form>
  <script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
       var d = new Date();
       var t = d.getHours();
       var y=d.getMinutes();
       var z=d.getSeconds();
       document.getElementById("demo").innerHTML = t+":"+y+":"+z;
    }


    function fun1()
      {
        var d = new Date();
        var t = d.getHours();
        var y=d.getMinutes();
        var z=d.getSeconds();  
        window.document.my.hh.value=+t;
        window.document.my.mm.value=+y;
        window.document.my.ss.value=+z;
    }
    fun1()
  </script>
</body>
 </html>

使用表单元素显示时钟

4 个答案: