Javascript timeout usage - Complete timeout demo code


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
Date:2008-01-25
Level:Beginner
Product:See complete product
Viewed:39930

Bookmark Javascript timeout usage



AddThis Social Bookmark Button

Step 3 - Complete timeout demo code


Javascript timeout usage

 

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Javascript timeout tutorial</title>
  6.  
  7. <script language="javascript" type="text/javascript">
  8. <!--
  9. var myTimer;
  10.  
  11. function endTime(){
  12. clearTimeout(myTimer);
  13. }
  14.  
  15. function showTime(){
  16. myDate = new Date();
  17.  
  18. // Get time parts
  19. hours = myDate.getHours();
  20. minutes = myDate.getMinutes();
  21. seconds = myDate.getSeconds();
  22.  
  23. // Just to display the time in a nice format
  24. if (hours < 10) hours = "0" + hours;
  25. if (minutes < 10) minutes = "0" + minutes;
  26. if (seconds < 10) seconds = "0" + seconds;
  27.  
  28. actualTime = hours+":"+minutes+":"+seconds;
  29.  
  30. // Change the block content
  31. document.getElementById("actTime").innerHTML = actualTime;
  32. myTimer = setTimeout("showTime()",1000);
  33. }
  34.  
  35. //-->
  36. </script>
  37.  
  38. </head>
  39.  
  40. <body>
  41. <p>The actual time is:<span id="actTime"></span></p>
  42. <button onclick="showTime();">Start clock</button>
  43. <button onclick="endTime();">Stop clock</button>
  44. </body>
  45. </html>

 




Previous 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

F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Windows F1
 
 
MaxTutorial
Monthly mortgage payment calculator
WebFormGenerator
Alpari forex

Total time: 0.3017