2011-11-09 19:10:47 -07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!-- Presentation Timer 2011 Neale Pickett -->
|
|
|
|
|
<!-- Placed in the public domain. -->
|
2011-12-23 15:36:04 -07:00
|
|
|
<!-- Time-stamp: "2011-11-10 11:12:04 neale" -->
|
2011-11-09 19:10:47 -07:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Presentation Timer</title>
|
|
|
|
|
<meta charset="utf-8">
|
2011-12-23 15:36:04 -07:00
|
|
|
<meta name="viewport" content="width=device-width">
|
2011-11-09 19:10:47 -07:00
|
|
|
<style>
|
2011-12-23 15:36:04 -07:00
|
|
|
body {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2011-11-09 19:10:47 -07:00
|
|
|
#timer {
|
2011-12-23 15:36:04 -07:00
|
|
|
background: #eee;
|
2011-11-09 19:10:47 -07:00
|
|
|
font-size: 10em;
|
|
|
|
|
text-align: center;
|
2011-12-23 15:36:04 -07:00
|
|
|
border-radius: 15px;
|
|
|
|
|
box-shadow: 10px 10px 5px #aaa;
|
2011-11-09 19:10:47 -07:00
|
|
|
}
|
|
|
|
|
#tools {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var duration = 12000;
|
|
|
|
|
var beginning;
|
|
|
|
|
var itimer;
|
|
|
|
|
|
|
|
|
|
function pad(i) {
|
|
|
|
|
if (i < 10) {
|
|
|
|
|
return "0" + i;
|
|
|
|
|
} else {
|
|
|
|
|
return i;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Start a timer on [element] for [duration] milliseconds.
|
|
|
|
|
// When there are [g] milliseconds left, turn the background green.
|
|
|
|
|
// When there are [y] milliseconds left, turn the background yellow.
|
|
|
|
|
function startTimer(element, duration, g, y) {
|
|
|
|
|
var beginning;
|
|
|
|
|
var itimer;
|
|
|
|
|
|
|
|
|
|
function display(remain) {
|
|
|
|
|
var min = Math.floor(Math.abs(remain / 60000));
|
|
|
|
|
var sec = Math.abs(Math.floor(remain / 1000)) % 60;
|
|
|
|
|
|
|
|
|
|
if (itimer) {
|
2011-12-23 15:36:04 -07:00
|
|
|
element.style.color = element.fg;
|
2011-11-09 19:10:47 -07:00
|
|
|
} else {
|
|
|
|
|
element.style.color = "#888";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (remain < 0) {
|
|
|
|
|
element.style.backgroundColor = "#f24";
|
|
|
|
|
} else if (remain < y) {
|
|
|
|
|
element.style.backgroundColor = "#ff0";
|
|
|
|
|
} else if (remain < g) {
|
|
|
|
|
element.style.backgroundColor = "#0f0";
|
|
|
|
|
} else {
|
2011-12-23 15:36:04 -07:00
|
|
|
element.style.backgroundColor = element.bg;
|
2011-11-09 19:10:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element.innerHTML = "";
|
|
|
|
|
if (remain < 0) {
|
|
|
|
|
element.innerHTML += "-";
|
|
|
|
|
}
|
|
|
|
|
element.innerHTML += min + ":" + pad(sec);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function update() {
|
|
|
|
|
var now = (new Date()).getTime();
|
|
|
|
|
var remain = beginning + duration - now;
|
|
|
|
|
|
|
|
|
|
display(remain);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Stop (clear timer)
|
|
|
|
|
this.stop = function () {
|
|
|
|
|
clearInterval(itimer);
|
|
|
|
|
itimer = undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Pause/play toggle
|
|
|
|
|
this.toggle = function () {
|
|
|
|
|
var now = (new Date()).getTime();
|
|
|
|
|
|
|
|
|
|
if (itimer) {
|
|
|
|
|
this.stop();
|
|
|
|
|
duration -= now - beginning;
|
|
|
|
|
} else {
|
|
|
|
|
beginning = now;
|
|
|
|
|
itimer = setInterval(update, 33);
|
|
|
|
|
}
|
|
|
|
|
display(duration);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (duration > 120000) { // Over 2m?
|
|
|
|
|
g = g?g:120000; // Green @ 2m
|
|
|
|
|
y = y?y:60000; // Yellow @ 1m
|
|
|
|
|
} else {
|
|
|
|
|
g = g?g:60000; // Green @ 1m
|
|
|
|
|
y = y?y:30000; // Yellow @ 30s
|
|
|
|
|
}
|
|
|
|
|
|
2011-12-23 15:36:04 -07:00
|
|
|
if (element.bg == undefined) {
|
|
|
|
|
element.bg = element.style.backgroundColor;
|
|
|
|
|
element.fg = element.style.color;
|
|
|
|
|
}
|
|
|
|
|
|
2011-11-09 19:10:47 -07:00
|
|
|
display(duration);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clicked(id) {
|
|
|
|
|
var e = document.getElementById(id);
|
|
|
|
|
var t = document.getElementById(id + " time");
|
|
|
|
|
|
|
|
|
|
if (! e.timer) {
|
|
|
|
|
setTime(id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
e.timer.toggle();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setTime(id) {
|
|
|
|
|
var e = document.getElementById(id);
|
|
|
|
|
var t = document.getElementById(id + " time").value.split(':');
|
|
|
|
|
var sec = 0;
|
|
|
|
|
|
|
|
|
|
if (e.timer) {
|
|
|
|
|
e.timer.stop();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (t.length > 3) {
|
|
|
|
|
e.innerHTML = "What?";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var i in t) {
|
|
|
|
|
var v = t[i];
|
|
|
|
|
|
|
|
|
|
sec = (sec * 60) + Number(v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
e.timer = new startTimer(e, sec * 1000);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2011-12-23 15:36:04 -07:00
|
|
|
<p><span id="timer" onclick="clicked('timer');">--:--</span></p>
|
2011-11-09 19:10:47 -07:00
|
|
|
<p id="tools">
|
2011-12-23 15:36:04 -07:00
|
|
|
<input id="timer time" list="common times" size="6" value="5:00" onchange="setTime('timer');">
|
2011-11-09 19:10:47 -07:00
|
|
|
<input type="button" value="Set" onclick="setTime('timer');">
|
|
|
|
|
<input type="button" value="❚❚ ▶" onclick="clicked('timer');">
|
|
|
|
|
</p>
|
2011-12-23 15:36:04 -07:00
|
|
|
<datalist id="common times">
|
|
|
|
|
<option value="1:00">
|
|
|
|
|
<option value="2:00">
|
|
|
|
|
<option value="5:00">
|
|
|
|
|
<option value="10:00">
|
|
|
|
|
<option value="15:00">
|
|
|
|
|
<option value="20:00">
|
|
|
|
|
<option value="25:00">
|
|
|
|
|
<option value="30:00">
|
|
|
|
|
<option value="45:00">
|
|
|
|
|
<option value="60:00">
|
|
|
|
|
</datalist>
|
2011-11-09 19:10:47 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
