如何通过更改分钟和秒来显示时间？

Question

我需要以动态的方式在文本类型输入中显示时间，也就是说它会不断变化。为此，他们建议我使用以下功能，但我没有设法正确显示时间。我做错了什么？

的Javascript

function new_clock(){ 

  clock = new Date() 
  hour =   clock.getHours() 
  minutes = clock.getMinutes() 
  seconds = clock.getSeconds() 

  print_clock= hour + " : " + minutes + " : " + seconds 

  document.form_clock.clock_txt.value = print_clock

  setTimeout("new_clock()",1000)

}

HTML

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <section onload="new_clock()"> 
   <form name="form_clock"> 
     <input type="text" name="clock_txt" size="10" id="clock_txt"> 
   </form>  

选择的响应效果很好，但是在实现时钟时，会导致模块操作加载速度慢得多。

Javascript

 var today = moment().format('YYYY-MM-DD');

function new_clock(){ 
clock = new Date() ;
hour =   clock.getHours(); 
minutes = clock.getMinutes() ;
seconds = clock.getSeconds() ;
print_clock= today + " " + hour + ":" + minutes + ":" + seconds;
$("#fecha_registro").val(print_clock);
setInterval(new_clock, 1000);

}

new_clock();

Answer 1

执行此操作https://jsfiddle.net/u1Lkd0ra/

在javascript中

function new_clock(){ 

clock = new Date(); 
hour =   clock.getHours(); 
minutes = clock.getMinutes(); 
seconds = clock.getSeconds(); 

print_clock= hour + " : " + minutes + " : " + seconds; 

document.form_clock.clock_txt.value = print_clock;


setTimeout(new_clock,1000);

}

new_clock();

和HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


 <form name="form_clock"> 
 <input type="text" name="clock_txt" size="10" id="clock_txt"> 
 </form> 

Answer 2

使用setInterval方法而不是setTimeout。代码如下：

setInterval(function() {
  var clock = new Date();
  var hour =   clock.getHours();
  var minutes = clock.getMinutes();
  var seconds = clock.getSeconds();
  var print_clock = hour + " : " + minutes + " : " + seconds;
  console.log(print_clock);
}, 1000);

Answer 3

我还没有真正触及javascript，但setTimeout(new_clock, 1000)会工作吗？

这是基于我在这里阅读的内容： javascript setTimeout() not working

编辑： OOOP！我知道了！ https://jsfiddle.net/7wkw14wd/

所以基本上，功能是正确的...... 超时的事情...一旦计时器启动，将调用new_clock（）... 但是由于超时事件是函数，你需要在递归的连锁反应开始之前启动它！

Answer 4

https://jsfiddle.net/chj51hc3/1/

HTML：

<section id="mySection"> 
  <form name="form_clock"> 
    <input type="text" name="clock_txt" size="10" id="clock_txt"> 
  </form>
</section>

Javascript：

$("#mySection").ready(function new_clock() { 
    clock = new Date() ;
    hour =   clock.getHours(); 
    minutes = clock.getMinutes() ;
    seconds = clock.getSeconds() ;
    print_clock= hour + " : " + minutes + " : " + seconds;
    $("#clock_txt").val(print_clock);
    setInterval(new_clock, 1000);
});

对于setTimeout，您需要指定一个函数而不是它的名称。

使用.ready()代替onload。

请使用semicolons。

编辑：更新了代码结构的小提琴