Home arrow JavaScript arrow Page 5 - Using Timers in JavaScript

Turning Up the Volume - JavaScript

JavaScript's Window object comes with four methods that you can use to create timed or looping events in your Web pages. In this article, I'll introduce you to them, and also show you a few examples of how they can be used in different situations.

TABLE OF CONTENTS:
  1. Using Timers in JavaScript
  2. Window Washer
  3. New Year Blues
  4. A Decent Interval
  5. Turning Up the Volume
  6. Sliding Around
  7. A Long Wait
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 113
January 28, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Using a setInterval() function is identical to using a setTimeout() function in a loop. To illustrate this, consider the following example by rewriting the countdown clock example from a few pages back.


<html>
<head>
<script language="JavaScript">
var i
=10;
function 
countDown() 
{
 
if(0)
 
{
  document
.forms[0].elements[0].value=i;
  i 
i-1;
 
}
 
else 
 
{
  alert
("Happy New Year!");
 
}
}
window.setInterval("countDown()"1000);
</script>

</head>
<body>
<form>
<input type="text" name="counter" size="3">
</form>
</body>
</html>

In this case, I've used the setInterval() method instead of the setTimeout() method to call the countDown() function over and over again. Note the difference between the version above and the one a few pages back - above, the call to setInterval() is outside the loop, whereas earlier, the call to setTimeout() was inside the loop.

Here's one more example, this one making a <div> appear when the mouse moves over a link and automatically hiding it again after 3 seconds:


<html>
<head>
<script language="JavaScript">
function on
() 
{
 
if(document.all
 
{
  
// make <div> visible
  document.all['volume'].style.visibility='visible';
  // after 3 seconds, make it invisible
  window.setInterval("document.all['volume'].style.visibility='hidden'",3000);
 } 
 
 if(document.layers) 
 {
  // make <div> visible
  document.volume.visibility='show';
  // after 3 seconds, make it invisible
  window.setInterval("document.volume.visibility='hide'",3000);
 } 
 
if(!document.all && document.getElementById
 
{
  
// make <div> visible
  document.getElementById("volume").style.visibility="visible";
  // after 3 seconds, make it invisible
window.setInterval("document.getElementById('volume').style.visibility='hidd
en'"
,3000);
 

}
</script>

</head>
<body>
<a href="#" onMouseOver="javascript:on();">Show Volume Control</a>
<div id="volume" style="color:white; font-face:Arial; background:black;
position:absolute; left:550; top:200; height:150; visibility:hidden;">
Volume<br> control<br> slider<br> here
</div>
</body>
</html>



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: