Javascript timeout usage - Displaying the current time

Home - Tutorials - Date and time

In this tutorial I will show you how to use timeouts in your JavaScript code. With this information you will be able to create a usefull timer.

Tutorial info:

Name:Javascript timeout usage
Total steps:3
Category:Date and time
Product:See complete product

Bookmark Javascript timeout usage

AddThis Social Bookmark Button

Step 2 - Displaying the current time

Javascript timeout usage


If you want to display the current time, then the previous example is need to be extended a bit. But before it let's create a JavaScript function which displays the actual time in the format HH:mm:ss, eg.: 22:45:03. To do this we can use the following function:

  1. function showTime(){
  2. myDate = new Date();
  4. // Get time parts
  5. hours = myDate.getHours();
  6. minutes = myDate.getMinutes();
  7. seconds = myDate.getSeconds();
  9. // Just to display the time in a nice format
  10. if (hours < 10) hours = "0" + hours;
  11. if (minutes < 10) minutes = "0" + minutes;
  12. if (seconds < 10) seconds = "0" + seconds;
  14. actualTime = hours+":"+minutes+":"+seconds;
  15. }

Before setting up a timeout event we need to define a location where to put the current time value. To do this just make a named block in your html code just like this:

  1. <p>The actual time is:<span id="actTime"></span></p>

Here we have the span block with an id actTime. With this information we can edit the content of the span tag from your JavaScript code as follows:

  1. document.getElementById("actTime").innerHTML = actualTime;

Ok, now it's time to make the interesting thing. We also have 2 buttons here. The first starts the clock and the second will stop it. It means that we need an other function to stop the timer. Let's call it to endTime(). So our html code looks like this at the moment:

  1. <p>The actual time is:<span id="actTime"></span></p>
  2. <button onclick="showTime();">Start clock</button>
  3. <button onclick="endTime();">Stop clock</button>
  4. </body>

However we need to extend the JavaScript part. First of all we need to add the timeout function at the end of our showTime() function in the following form:

  1. myTimer = setTimeout("showTime()",1000);

Please not that we stored the return value in a global variable declared outside of the function. Using this variable we can stop the timer in the endTime() function as here:

  1. function endTime(){
  2. clearTimeout(myTimer);
  3. }

That's all. Now you have the current time displayed on your page. 

Previous Step of Javascript timeout usageNext Step of Javascript timeout usage

Tags: javascript timeout, timeout script, javascript, timeout

Javascript timeout usage - Table of contents
Step 1 - Using timeouts in JavaScript
Step 2 - Displaying the current time
Step 3 - Complete timeout demo code

GAD Tower

Family tutorials
PHP Array
PHP Redirect
PHP Session
AJAX File Upload
AJAX Rating System
MySQL Create User
Mysqldump Example
MySQL Concat

Total time: 3.0345