SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Timer...

  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Timer...

    Im still a javascript n00b, but i think this might be easy to accomplish. What i need is a timer of some sort which counts down from a specified time (lets say 5 seconds). After it counts down, i need it to do something (lets say for now it jus alerts something). After the countdown and the action, i want the counter to restart, thus making it countdown continuously and it being a cycle. I need two of these running in the same script (they would most likely have different times), and if possible, it'd be better to have a bar that displays the countdown. I'm stumped on where to begin so ANY help would be appreciated. Thank you in advance.

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    next to a pc connected to the poweroutlet
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     <html>
     <head>
     
     <script type="text/javascript">
     
     var maxtimer = 5;
     
       function countdown() {
     	if (maxtimer==0) {
     	  alert('Just Testing');
     	  //reset the timer
     	  maxtimer=5;
     	} else {
     	  document.forms[0].timer.value=maxtimer;
     	  maxtimer=maxtimer-1;
     	}
     	setTimeout("countdown()",1000);
       }
     
       window.onload=function() {
     	countdown();
       }
     
     </script>
     
     <title>Count Down</title>
     </head>
     <body>
     <form>
     <input type="text" name="timer">
     </form>
     </body>
     </html>
    This is just a single count down you can change it to how you wish to add another.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm seems to be working well.. Now, is there a way to correspond this with a progress bar of some sort which goes down with the time?

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    next to a pc connected to the poweroutlet
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     <html>
     <head>
      
     <script type="text/javascript">
      
     var maxtimer = 5;
     var clearTimer=null;
      
      function countdown() {
        if (maxtimer==0) {
     	  alert('Just Testing');
     	  //reset the timer
     	  maxtimer=5;
        } else {
     
     	 var width = (maxtimer*20);
     	  document.forms[0].timer.value=maxtimer;
     	  document.getElementById('progress').style.width=width;
     	 maxtimer=maxtimer-1;
     
        }
        clearTimer=setTimeout("countdown()",1000);
      }
      
      window.onload=function() {
        countdown();
        alert(document.getElementById('progress').style.width);
      }
     
      window.onunload=function() {
       clearTimeout(clearTimer);
     }
     
     </script>
      
     <title>Count Down</title>
     <style type="text/css">
     
     #progress {
     	width: 100px;
     	height: 10px;
     	background: green;
     	margin-bottom: 10px;
     }
     
     </style>
     </head>
     <body>
     <div id="progress"></div>
     <form>
     <input type="text" name="timer">
     </form>
     </body>
     </html>
    Try that out..

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •