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:71969

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



GAD Tower


F1 Site Family
AJAX F1
CSS F1
Database F1
HTML F1
Java F1
JavaScript F1
PHP F1

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

Total time: 0.1434