www.webdeveloper.com
Results 1 to 6 of 6

Thread: simple javascript countdown

Hybrid View

  1. #1
    Join Date
    Feb 2009
    Posts
    22

    Cool simple javascript countdown

    i want a simple javascript countdown that counts down from 5 or 10 seconds to 0 seconds and does NOTHING ELSE. lol. im redirecting the page with a meta refreshing and i want users to know e=when they'll be redirected

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe use this count down timer as a guide.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Timer</title>
    <script type="text/javascript">
    <!--
    var timeLeft = 0;
        var begin
        
        function startTimer()  {
        //check for null input hours, minutes, seconds
       if(document.getElementById("txtHours").value == ""){
          document.getElementById("txtHours").value = "0";
       }
       
       if(document.getElementById("txtMinutes").value == ""){
          document.getElementById("txtMinutes").value = "0";
       }
       
       if(document.getElementById("txtSeconds").value == ""){
          document.getElementById("txtSeconds").value = "0";
       }
       
       //get input hours, minutes, seconds
       var hours   = parseInt(document.getElementById("txtHours").value);
       var minutes = parseInt(document.getElementById("txtMinutes").value);
       var seconds = parseInt(document.getElementById("txtSeconds").value);
       
       //calculate time left in seconds
       timeLeft = (hours * 3600) + (minutes * 60) + seconds;
       
          //start count down timer
          begin=setInterval("countDown()",1000);
        }
        
        function countDown()  {
        var hoursLeft   = 0;
       var minutesLeft = 0;
       var secondsLeft = 0;
       var remainder   = 0;
       
         timeLeft = timeLeft-1;
            
            if(timeLeft >= 0){
           //break down time left into hours, minutes, seconds
          hoursLeft = Math.floor(timeLeft/3600);
          remainder = timeLeft%3600;
          
          minutesLeft = Math.floor(remainder/60);
          remainder   = remainder%60;
          
          secondsLeft = remainder;
                     document.getElementById('cellHours').innerHTML = hoursLeft;
         document.getElementById('cellMinutes').innerHTML = minutesLeft;
         document.getElementById('cellSeconds').innerHTML = secondsLeft;    
            } else {
             clearInterval(begin);
            }       
        }
    //-->
    </script>
    </head>
    <body>
    <form>
    <!-- Table to input total time -->
    <table>
    <caption style="font-weight: bold">Total Time</caption>
    <th>Hours</th>
    <th>Minutes</th>
    <th>Seconds</th>
    <tr>
         <td><input type="text" id="txtHours" value="0" size="5" /></td>
        <td><input type="text" id="txtMinutes" value="0" size="5" /></td>
        <td><input type="text" id="txtSeconds" value="0" size="5" /></td>
    </tr>   
    </table>
    <!-- Table to output time left -->
    <table name="tblTimer" id="tblTimer" width="500px" style="margin: 70 0 0 0" border="1">
    <caption style="font-weight: bold">Time Left</caption>
    <th>Hours Left</th>
    <th>Minutes Left</th>
    <th>Seconds Left</th>
    <tr>
         <td id="cellHours" align="center">0</td>        
            <td id="cellMinutes" align="center">0</td>
            <td id="cellSeconds" align="center">0</td>   
        </tr>
    </table>
    <!-- Display control buttons -->
    <table style="margin: 50 0 0 0">
        <tr>
         <td>
             <input type="button" value="Start Timer"
                 onclick="startTimer();" /> 
            </td>
            <td>
             <input type="button" value="Stop Timer"
                 onclick="clearInterval(begin);" /> 
            </td>
        </tr>
    </table>
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2009
    Posts
    22
    lol it's scripts like the one you showed that drove me here. i don't want terribly advanced scripts or anything i want something short and sweet that will display 10,9,8,7,6,5,4,3,2,1,0 - and do nothing else.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    That was short and sweet

    Just delete the html and javascript you don't need and tweak the rest to suit and set a start timer.

    If you know what you are doing, and I can't tell from your original post how much you know about html and javascript, it should take you no more than 5 minutes.

    Surely you're not asking to be spoon fed the code, are you
    Last edited by tirna; 08-17-2010 at 09:35 PM.

  5. #5
    Join Date
    Feb 2009
    Posts
    22
    im asking to be spoon fed code that has only the things necessary for counting down seconds, and has nothing about minutes, hours, days, or javascript redirects

    i know html and css but know nothing of js past implementing it into html, although i can read english and follow simple directions

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    ok - But I don't do spoon feeding, well not for free anyway

    Hopefully someone else will come along and give you the code.

    In the mean time, if you are interested in learning some javascript, maybe have a look at the w3schools setInterval() tutorial to do what you want.
    Last edited by tirna; 08-17-2010 at 09:52 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles