Countdown Timer until a specified Date-Time

A JavaScript Countdown Timer that shows the remaining number of Years, Months, Days, Hours, Minutes, and Seconds until a specified date-time. The date-time can be selected from form fields, or defined into HTML elements. From coursesweb.net
When the Countdown Timer reaches to 0, it is executed the cTimer0() function, defined in "cdtime.js" (line 4). In this function you can add a code to be executed when countdown timer reaches to 0.

• Copy the cdtime.js file on your server, in the same directory in which you have the page where you want to add this Countdown Timer.

1) If you want the ending date-time to be selected from form fields, add this code in that HTML document (example in: datetime-from-form.html):
<div id="cdtshow">
Years: <span id="cdtyears">0</span><br/>
Months: <span id="cdtmonths">0</span><br/>
Days: <span id="cdtdays">0</span><br/>
Hours: <span id="cdthours">0</span><br/>
Minutes: <span id="cdtmints">0</span><br/>
Seconds: <span id="cdtsecs">0</span><br/><hr/>
Until: <span id="cdtuntil">...</span>
</div>
<form id="cdttimer">
<label for="cdtfyear">Year:</label> <select id="cdtfyear"></select>
<label for="cdtfmonth">Month:</label> <select id="cdtfmonth" onchange="objCT.setDays(this.value);">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="cdtfday">Day:</label> <select id="cdtfday"></select><br/>
<label for="cdtfhour">Hour:</label> <select id="cdtfhour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<label for="cdtfmints">Minutes:</label> <select id="cdtfmints">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<label for="cdtfsecs">Seconds:</label> <select id="cdtfsecs">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br/>
<input type="button" id="cdtfbtn" value="START" onclick="objCT.startCDT()"/>
</form>
<script type="text/javascript" src="cdtime.js"></script>
2) If you want to start the countdown automatically, with an ending date-time already defined in web page, delete the three slashes added in front of objCT.startCDT(); in "cdtime.js" (line 106), and adds this code in your HTML document (example in: datetime-defined.html):
<div id="cdtshow">
Years: <span id="cdtyears">0</span><br/>
Months: <span id="cdtmonths">0</span><br/>
Days: <span id="cdtdays">0</span><br/>
Hours: <span id="cdthours">0</span><br/>
Minutes: <span id="cdtmints">0</span><br/>
Seconds: <span id="cdtsecs">0</span>
</div><hr/>
<div id="cdttimer">
Until: <span id="cdtfmonth">MM</span>/<span id="cdtfday">DD</span>/<span id="cdtfyear">YYYY</span>
 - <span id="cdtfhour">H</span>:<span id="cdtfmints">mm</span>:<span id="cdtfsecs">ss</span>
</div>
<script type="text/javascript" src="cdtime.js"></script>

How to add countdown for multiple date-time

The ID of the HTML elements used for countdown timer starts with the same prefix ('cdt'). This prefix is added as argument when it is defined an object of the countdownTime class in "cdtime.js" file.
So, if you want to add countdown for multiple date-time in the same page, sets another prefix for the IDs of each group of HTML elements, create an object of countdownTime for each countdown timer, passing the associated prefix, and calls the startCDT() method to each object. See the example and code in the multiple-datetime.html file.



Free JavaScript & jQuery Course, tutorials, and code snippets: http://coursesweb.net/javascript/