simple javascript countdown

@tirnaAug 18.2010 — #Maybe use this count down timer as a guide.

[CODE] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
 <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
 <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> 
 
 [/CODE]

@WasifauthorAug 18.2010 — #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.

@tirnaAug 18.2010 — #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 ?

@WasifauthorAug 18.2010 — #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

@tirnaAug 18.2010 — #ok ? - But I don't do spoon feeding, well not for free anyway :p

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.

simple javascript countdown

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

simple javascript countdown

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴