Creating a timer with JavaScript

  
name=
"form_main"
>

 
id=
"hour"
>
00
 
Reading: Creating a timer with JavaScript 

:

id=

“minute”

>

00

:

id=

“second”

>

00

:

id=

“millisecond”

>

000

/>

type=

“button”

name=

“start”

>

start

type=

“button”

name=

“pause”

>

pause

type=

“button”

name=

“reset”

>

reset

Enter fullscreen mood exit fullscreen mode
In the HTML social organization, some span was created to display the fourth dimension information, after that we have 3 buttons to control the functionality of the timer .
now let ’ s start the JavaScript part.

 `` use stern `` ;

 let  hour  =  0 ;
 let  infinitesimal  =  0 ;
 let  moment  =  0 ;
 let  millisecond  =  0 ;

 let  cron ;

 text file. form_main. start. onclick  =  ( )  = >  begin ( ) ;
 document. form_main. hesitate. onclick  =  ( )  = >  pause ( ) ;
 document. form_main. reset. onclick  =  ( )  = >  reset ( ) ;

Enter fullscreen modality exit fullscreen mode
In this JavaScript code, we define our control variables and associate the functions with their buttons .
nowadays let ’ s create the functions.

 affair  originate ( )  {
   pause ( ) ;
   cron  =  setInterval ( ( )  = >  {  timer ( ) ;  },  10 ) ;
 }

 routine  pause ( )  {
   clearInterval ( cron ) ;
 }

 function  reset ( )  {
   hour  =  0 ;
   infinitesimal  =  0 ;
   second gear  =  0 ;
   millisecond  =  0 ;
   document. getElementById ( ' hour ' ). innerText  =  ' 00 ' ;
   document. 
Read more: How to back up your iCloud Keychain 
 getElementById ( ' moment ' ). innerText  =  ' 00 ' ;
   document. getElementById ( ' second ' ). innerText  =  ' 00 ' ;
   document. getElementById ( ' millisecond ' ). innerText  =  ' 000 ' ;
 }

Enter fullscreen modality exit fullscreen manner
here we have the start, pause and reset functions, in the start function, we start the setInterval every 10 milliseconds ( because every 1 millisecond locks depending on the browser ) .
In the pause function we clear the setInterval, in the start function it is necessary to clear before starting then that we don ’ t have several working in the backdrop, so before starting the procedures, the pause function is called .
In the reset function, we reset our accessory variables and so that the text on the blind returns to 0(zero) on the screen, we set it manually using the innerText.

 function  timer ( )  {
   if  ( ( millisecond  +=  10 )  ==  1000 )  {
     millisecond  =  0 ;
     second ++ ;
   }
   if  ( second  ==  60 )  {
     second gear  =  0 ;
     minute ++ ;
   }
   if  ( moment  ==  60 )  {
     minute  =  0 ;
     hour ++ ;
   }
   document. getElementById ( ' hour ' ). innerText  =  returnData ( hour ) ;
   document. getElementById ( ' moment ' ). innerText  =  returnData ( minute ) ;
   document. getElementById ( ' second ' ). innerText  =  returnData ( second gear ) ;
   text file. getElementById ( ' millisecond ' ). innerText  =  returnData ( millisecond ) ;
 }

 function  returnData ( remark )  {
   return  input  >  10  ?  input  :  `0 $ { input } `
 }

Enter fullscreen mode exit fullscreen mode
here we have the final contribution, the timer function which is called in the start function, in this routine we check the time passed :

• If the millisecond added to 10 is equal to 1000, then a second has passed and then we reset the millisecond and increase it by 1 second.
• If the second is equal to 60, then a minute has passed and then we reset the second to 1 minute.
• If the minute is 60, then an hour has passed and then we reset the minute and increase it by one hour.

last we print on the screen using innerText .
The returnData function is used only to make the text more dynamic on the shield, making the follow logic, if the digit is less than 10 then concatenates with a 0(zero) in front .
cook deoxyadenosine monophosphate bare as that .

Demo

See the complete project working below .

Youtube

If you prefer to watch, I see the development on youtube ( video recording in PT-BR ).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be felicitous to answer !
😊😊 See you ! 😊😊