Permalink
af7b143 Apr 5, 2014
121 lines (112 sloc) 4.13 KB
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<title>Countdown.js Demo</title>
<link href="test/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><a href="/">Countdown.js</a></h1>
<div>
<h2 id="counter">Countdown.js Demo</h2>
<div style="float:right"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://countdownjs.org" data-text="Countdown.js: A simple JavaScript API for producing an accurate, intuitive description of the timespan between dates" data-count="none"></a></div>
<form>
<h3>Countdown date</h3>
<fieldset id="countdown-start"><span>
<input id="year"
type="number"
min="-9999"
max="9999"
step="1"
value="1991"
size="4"
placeholder="year"
/><label for="month">-</label><input id="month"
type="number"
min="1"
max="12"
step="1"
value="8"
size="2"
placeholder="month"
/><label for="date">-</label><input id="date"
type="number"
min="1"
max="31"
step="1"
value="6"
size="2"
placeholder="day"
/></span>
<span><label for="hours">&nbsp;</label><input id="hours"
type="number"
min="0"
max="23"
step="1"
value="14"
size="2"
placeholder="hrs"
/><label for="minutes">:</label><input id="minutes"
type="number"
min="0"
max="59"
step="1"
value="56"
size="2"
placeholder="min"
/><label for="seconds">:</label><input id="seconds"
type="number"
min="0"
max="59"
step="1"
value="20"
size="2"
placeholder="sec"
/><label for="milliseconds">.</label><input id="milliseconds"
type="number"
min="0"
max="999"
step="1"
value="0"
size="3"
placeholder="ms"
/></span>
<span id="timezone">&nbsp;UTC</span>
</fieldset>
<h3>Display units</h3>
<fieldset id="countdown-units"><span>
<label for="units-millennia"><input id="units-millennia" type="checkbox" />millennia</label>
<label for="units-centuries"><input id="units-centuries" type="checkbox" />centuries</label>
<label for="units-decades"><input id="units-decades" type="checkbox" />decades</label>
</span><span>
<label for="units-years"><input id="units-years" type="checkbox" />years</label>
<label for="units-months"><input id="units-months" type="checkbox" />months</label>
<label for="units-weeks"><input id="units-weeks" type="checkbox" />weeks</label>
<label for="units-days"><input id="units-days" type="checkbox" />days</label>
</span><span>
<label for="units-hours"><input id="units-hours" type="checkbox" />hours</label>
<label for="units-minutes"><input id="units-minutes" type="checkbox" />minutes</label>
<label for="units-seconds"><input id="units-seconds" type="checkbox" />seconds</label>
<label for="units-milliseconds"><input id="units-milliseconds" type="checkbox" />milliseconds</label>
</span><span>
<label for="empty-label">empty</label><input id="empty-label" type="text" value="now!" />
</span><span>
<label for="max-units">max</label><input id="max-units" type="number" min="0" max="11" value="11" />
<label for="frac-digits">digits</label><input id="frac-digits" type="number" min="0" max="20" value="0" />
<span></fieldset>
</form>
<h3>Timespan object</h3>
<pre id="timespan"></pre>
</div>
<script src="lib/json/json2.js" type="text/javascript"></script>
<script src="lib/raf/requestAnimationFrame.js" type="text/javascript"></script>
<script src="countdown.demo.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
<footer>
<div style="float:left"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://countdownjs.org" data-text="Countdown.js: A simple JavaScript API for producing an accurate, intuitive description of the timespan between dates"></a></div>
Copyright &copy; 2006-2012 <a href="http://mck.me">Stephen M. McKamey</a>
</footer>
<script src="/ga.js" type="text/javascript" defer></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" defer="defer"></script>
</body>
</html>