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

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

编辑： 哎呀！我知道了！ 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。

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