File: readme.html

Recommend this page to a friend!
  Classes of MarPlo   Countdown Timer   ???   Download  
File: ???
Role: Example script
Content type: text/plain
Description: Example and instructions
Class: Countdown Timer
Show countdown for a time defined in form inputs
Author: By
Last change:
Date: 12 years ago
Size: 2,502 bytes
 

Contents

Class file image Download 
<!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>