Icontem

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    
Last Updated Ratings Unique User Downloads Download Rankings
2012-12-15 (4 years ago) RSS 2.0 feedNot enough user ratingsTotal: 185 All time: 256 This week: 44Up
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.
  Performance   Level  
Name: MarPlo <contact>
Classes: 13 packages by
Country: Romania Romania

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:185
This week:0
All time:256
This week:44Up

  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  
Countdown Timer with starting time added into a form
Page with Demo for Countdown Timer with starting time added into a form