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

Recommend this page to a friend!
     
  Info   View files View files (2)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 192 All time: 261 This week: 1Up
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
  Performance   Level  
Name: MarPlo <contact>
Classes: 13 packages by
Country: Romania Romania
Age: ???
All time rank: 131 in Romania Romania
Week rank: 6 Up1 in Romania Romania Equal

Level 1 Star

 Innovation award
Innovation award
Nominee: 5x

Winner: 1x

Details
<!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

Downloadcountdown-timer-2012-12-15.zip 2KB
Downloadcountdown-timer-2012-12-15.tar.gz 1KB
Install with ComposerInstall with Composer
 Version Control Unique User Downloads Download Rankings  
 0%
Total:192
This week:0
All time:261
This week:1Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Related pages  
Page with Demo for Countdown Timer with starting time added into a form