File: datetime-from-form.html

Recommend this page to a friend!
  Classes of MarPlo   Countdown Timer until specified Date-Time   ???   Download  
File: ???
Role: Example script
Content type: text/plain
Description: Example date-time from form
Class: Countdown Timer until specified Date-Time
Start a countdown to a time defined in forms
Author: By
Last change:
Date: 12 years ago
Size: 6,500 bytes
 

Contents

Class file image Download 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Countdown Timer until a specified Date-Time from form</title>
<style type="text/css">
h2 {text-align:center;}

#cdttimer {
 width:325px;
 background:#edeffe;
 margin:8px auto;
 padding:5px;
 text-align:center;
 line-height:160%;
}
#cdtshow {
 width:200px;
 margin:1em auto;
 font-weight:800;
}
#cdtshow span { color:#0001da; }
</style>
</head>
<body>
<h2>Countdown Timer until a specified Date-Time from form</h2>

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

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