148 lines
3.4 KiB
HTML
148 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!-- Presentation Timer 2011 Neale Pickett -->
|
||
|
|
<!-- Placed in the public domain. -->
|
||
|
|
<!-- Time-stamp: "2011-11-09 18:15:56 neale" -->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Presentation Timer</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
#timer {
|
||
|
|
font-size: 10em;
|
||
|
|
text-align: center;
|
||
|
|
margin: 0.1em;
|
||
|
|
}
|
||
|
|
#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) {
|
||
|
|
element.style.color = "inherit";
|
||
|
|
} 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 {
|
||
|
|
element.style.backgroundColor = "inherit";
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|
||
|
|
<p id="timer" onclick="clicked('timer');">--:--</p>
|
||
|
|
<p id="tools">
|
||
|
|
<input id="timer time" type="time" size="6" value="5:00" onchange="setTime('timer');">
|
||
|
|
<input type="button" value="Set" onclick="setTime('timer');">
|
||
|
|
<input type="button" value="❚❚ ▶" onclick="clicked('timer');">
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|