How to show Time With changing minutes and seconds?

Question

I need to show the time in a text type input in a dynamic way, that is to say that it is constantly changing. For this, they recommended me to use the following function, but I have not managed to make the time show correctly. What am I doing wrong ?

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>

The selected response works well, however when implementing the clock, it causes the module actions to load much slower.

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();

score 3 · Answer 1 · answered Nov 10 '17 at 12:04

do this https://jsfiddle.net/u1Lkd0ra/

in 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();

and 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>

Maybe explain to the OP and future viewers how it works? – iPhoenix Nov 10 '17 at 12:08 — iPhoenix, Nov 10 '17 at 12:08

score 1 · Answer 2 · answered Nov 10 '17 at 12:10

Use setInterval method instead of setTimeout. Code that looks like this:

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);

Gry- · Accepted Answer · 2017-11-10T12:05:38.553

0

I haven't really touched javascript, but would setTimeout(new_clock, 1000) work?

This is based on what I read here: javascript setTimeout() not working

EDIT: OOOP! I GOT IT! https://jsfiddle.net/7wkw14wd/

So basically, the function is correct... The time-out thingo... once the timer is up, will call new_clock()... But since the time-out thingo is IN the function, you need to start it off before the chain reaction of recursion can begin!

edited Nov 10 '17 at 12:05

answered Nov 10 '17 at 11:58

Gry-

126
8

Nothing is shown inside the input, so I'm not sure, although according to google it should work ... – CristianOx21 Nov 10 '17 at 12:02
I realized that it was slowing down because with the previous answer the whole pag was recourged every second, or at least that's what I think, I modified it as it is in your answer and it's fine, thank you – CristianOx21 Nov 10 '17 at 13:50

score 0 · Answer 4 · 2017-11-10T12:54:22.037

0

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);
});

For setTimeout, you need to specify a function and not its name.

Use .ready() instead of onload.

And please use semicolons.

EDIT : Updated fiddle for your code structure

edited Nov 10 '17 at 12:54

answered Nov 10 '17 at 12:02

@CristianOx21 My pleasure. – Nov 10 '17 at 12:14
I tested it on my form, and it shows well. However, this causes the module's responses to be much slower, for example, if I want to select an option of a select, it takes a few seconds. Do you know why it sounds? I am saving the result in the database, since the seconds make a big difference when consulting the records – CristianOx21 Nov 10 '17 at 12:42
@CristianOx21 I'm not sure what you want to do, can you please provide a piece of your code, or an image of your module ? Sometimes, a little check in the debugger can solve a lot of problems – Nov 10 '17 at 12:48
Works fine for me https://jsfiddle.net/chj51hc3/2/ Are you doing any processing to fetch your select values ? – Nov 10 '17 at 13:20
Yes, I'm loading the select, with the property .change, when doing this I call a php function to do it, but I had not had problems, until I added the clock, which is strange, when loading the module, it's normal, then they pass like 10 seconds and it slows down – CristianOx21 Nov 10 '17 at 13:24
I suggest you to check for the debugger and capture the performances while your module is running. If you can't find anything, then post another question, I can't help you with php this is beyond my skills (and my will). – Nov 10 '17 at 13:29
Thanks also for everything. – CristianOx21 Nov 10 '17 at 13:34

How to show Time With changing minutes and seconds?

4 Answers4