JavaScript tutorial-Timer


JavaScript Timer

A Timer allows you to execute a block of JavaScript code one time after a period of time or  many times continuously at regular time intervals.

To create a timer to execute a block of JavaScript code one time after a period of time, you need to use setTimeOut(Code_to_execute, time_milliseconds) method of the window object. You can create many timers as you like. Each timer has a unique ID that is returned by setTimeut() method.

Example:

<html>
<head>

<title>Timer</title>
<script language="JavaScript" type="text/javascript">
var timerID;
function load()
{
timerID = setTimeout("writetext()",3000);
}
function writetext(){
document.getElementById("mydiv").innerHTML=" This text has been delayed 3000 milliseconds.";
}
</script>
</head>
<body onload="load()">
<div id="mydiv"></div>
</body>
</html>
In this example, the text in a div tag will display after the window loads 3000 milliseconds or 3 seconds.

To stop the timer you can use clearTimout(timer_id) method. Therefore, to stop the timer generated in the code above you can write:

clearTimeout(timerID);

To create a timer to execute a block of code continuously at regular time intervals, you can use setInterval(Code_to_execute,milliseconds_interval) method. To stop the timer you need to use clearInterval(timer_id) method.

Example:

<html>
<head>

<title>Timer</title>
<script language="JavaScript" type="text/javascript">
var timerID;
var i=0;
function load()
{
timerID = setInterval("writetext()",3000);
}
function writetext(){
if(i==0){i=1;
document.getElementById("mydiv").innerHTML=" This text is displayed in 3000 milliseconds continuously.";
}
else{i=0;document.getElementById ("mydiv").innerHTML="It displays again.";}


}
</script>
</head>
<body language = JavaScript onload="load()">
<div id="mydiv"></div>
</body>
</html>

Now take a look at another example code, we combine timer and time methods together to display a text-based clock:

 

<html>
<head>
<title>Timer-text-based clock</title>
<script language="JavaScript" type="text/javascript">
var timerID;


function load()
{
document.getElementById("mydiv"). style.backgroundColor="00FFBB";
document.getElementById("mydiv").style.width="50px";
document.getElementById("mydiv").style.color="000000";
timerID = setInterval("showclock()",1000);
}

function showclock(){
var curdate=new Date();
document.getElementById ("mydiv").innerHTML= curdate.getHours()+":"+curdate.getMinutes()+":"+

curdate.getSeconds();

}
</script>
</head>
<body language = JavaScript onload="load()">
<div id="mydiv"></div>
</body>
</html>




Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.