Icontem

Countdown Timer: Show countdown for a time defined in form inputs

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Info   View files View files (2)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings  
2012-12-15 (2 years ago) RSS 2.0 feedNot enough user ratingsTotal: 181 All time: 235 This week: 22Up
Version License JavaScript version Categories  
countdown-timer 1.0BSD License3.0Time and Date
Description Author  

This object can show countdown for a time defined in form inputs.

When a start button is clicked it starts a time countdown for a time defined in two form inputs that specify the number of minutes and seconds.

The remaining time is displayed in other page elements.

The start button remains disabled while the countdown does not reach the end.

Picture of MarPlo
Name: MarPlo <contact>
Classes: 12 packages by
Country: Romania Romania
Age: ???
All time rank: 101 in Romania Romania
Week rank: 22 Down1 in Romania Romania Equal
Innovation award
Innovation award
Nominee: 5x

Winner: 1x

Details provided by the author  
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Countdown Timer</title>
<style type="text/css">
#ctimer {
 width:250px;
 background:#edeffe;
 margin:8px auto;
 padding:5px;
 text-align:center;
 line-height:160%;
}
#showmns, #showscs {
 font-weight:800;
 color:#080009;
}
</style>
</head>
<body>

<form id="ctimer">
Countdown Timer: &nbsp; <span id="showmns">00</span>:<span id="showscs">00</span><br/>
Minutes: <input type="text" id="mns" name="mns" value="0" size="3" maxlength="3" /> &nbsp; &nbsp; Seconds: <input type="text" id="scs" name="scs" value="0" size="2" maxlength="2" /><br/>
<input type="button" id="btnct" value="START" onclick="obCT.setCTimer()"/>
</form>
<script type="text/javascript" src="countdown.js"></script>

<br/><br/><br/>
A JavaScript Countdown Timer that uses for the starting time data added in form fields.<br/>
The button that starts the Countdown Timer is disabled after the user adds data for minutes /seconds in form fields, and clicks the button.<br/>
When the Countdown Timer reaches to 0, the Start button is enabled, and it is executed the <b>cTimer0()</b> function, defined in "countdown.js" (line 10). In this function you can add a code to be executed when countdown timer reach to 0.<br/><br/>
&bull; Copy the <b>countdown.js</b> file on your server, in the same directory in which you have the page where you want to add this Countdown Timer.<br/>
In that HTML document add this code:
<pre style="margin:15px; color:blue; font-weight:800;">
&lt;form id=&quot;ctimer&quot;&gt;
Countdown Timer: &amp;nbsp; &lt;span id=&quot;showmns&quot;&gt;00&lt;/span&gt;:&lt;span id=&quot;showscs&quot;&gt;00&lt;/span&gt;&lt;br/&gt;
Minutes: &lt;input type=&quot;text&quot; id=&quot;mns&quot; name=&quot;mns&quot; value=&quot;0&quot; size=&quot;3&quot; maxlength=&quot;3&quot; /&gt;
 &amp;nbsp; &amp;nbsp; Seconds: &lt;input type=&quot;text&quot; id=&quot;scs&quot; name=&quot;scs&quot; value=&quot;0&quot; size=&quot;2&quot; maxlength=&quot;2&quot; /&gt;&lt;br/&gt;
&lt;input type=&quot;button&quot; id=&quot;btnct&quot; value=&quot;START&quot; onclick=&quot;obCT.setCTimer()&quot;/&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;countdown.js&quot;&gt;&lt;/script&gt;
</pre><br/><br/><br/><br/>
<center>Free JavaScript & jQuery Course, tutorials, and code snippets: <a href="http://coursesweb.net/javascript/" title="Free JavaScript & jQuery Course">http://coursesweb.net/javascript/</a></center><br/>
</body>
</html>
  Files folder image Files  
File Role Description
Plain text file countdown.js Class JavaScript code
Accessible without login Plain text file readme.html Example Example and instructions

 Version Control Unique User Downloads Download Rankings  
 0%Total:181All time:235
 This week:0This week:22Up