Login   Register  
Icontem

File: multiple-datetime.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of MarPlo  >  Countdown Timer until specified Date-Time  >  multiple-datetime.html  >  Download  
File: multiple-datetime.html
Role: Example script
Content type: text/plain
Description: Example script multiple countdowns
Class: Countdown Timer until specified Date-Time
Start a countdown to a time defined in forms
Author: By
Last change:
Date: 2013-01-02 00:51
Size: 1,972 bytes
 

Contents

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

#cdttimer, #xyztimer {
 width:325px;
 background:#b0e1b1;
 margin:8px auto;
 padding:5px;
 text-align:center;
 line-height:160%;
}
#cdtshow, #xyzshow {
 width:200px;
 margin:1em auto;
 font-weight:800;
}
span { color:#0001da; }
</style>
</head>
<body>
<h2>Countdown Timer for multiple Date-Time</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>
</div><hr/>
<div id="cdttimer">
Until: <span id="cdtfmonth">12</span>/<span id="cdtfday">31</span>/<span id="cdtfyear">2018</span>
 - <span id="cdtfhour">18</span>:<span id="cdtfmints">33</span>:<span id="cdtfsecs">00</span>
</div><hr/>

<h3>Seccond countdown timer</h3>
<div id="xyzshow">
Years: <span id="xyzyears">0</span><br/>
Months: <span id="xyzmonths">0</span><br/>
Days: <span id="xyzdays">0</span><br/>
Hours: <span id="xyzhours">0</span><br/>
Minutes: <span id="xyzmints">0</span><br/>
Seconds: <span id="xyzsecs">0</span>
</div><hr/>
<div id="xyztimer">
Until: <span id="xyzfmonth">2</span>/<span id="xyzfday">21</span>/<span id="xyzfyear">2021</span>
 - <span id="xyzfhour">10</span>:<span id="xyzfmints">30</span>:<span id="xyzfsecs">00</span>
</div>

<script type="text/javascript" src="cdtime.js"></script>

<script type="text/javascript">
// starts countdown for first date-time, using the objCT object defined in cdtime.js (with 'dtc')
objCT.startCDT();

// creates another object of the countdownTime class, with 'xyz' which is the prefix of the seccond group of elements
var obXYZ = new countdownTime('xyz');
obXYZ.startCDT();           // starts the countdown for the seccond group
</script>
</body>
</html>