189 lines
4.1 KiB
HTML
189 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>LADD Penalty Timer</title>
|
|
<style type="text/css">
|
|
body {
|
|
background: black;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
p {
|
|
width: 40%;
|
|
display: inline-block;
|
|
border: solid #444 2px;
|
|
border-radius: 15px;
|
|
margin: 1em;
|
|
padding: 1em;
|
|
}
|
|
.expired {
|
|
background: #080;
|
|
}
|
|
.lowtime {
|
|
background: #880;
|
|
}
|
|
.paused {
|
|
background: #444;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var timer_updates = [];
|
|
function update() {
|
|
for (i in timer_updates) {
|
|
var u = timer_updates[i];
|
|
|
|
u();
|
|
}
|
|
}
|
|
|
|
// Create a timer on [element].
|
|
// If [tenths] is true, show tenths of a second.
|
|
// If [callback] is defined, call it when time runs out.
|
|
function startTimer(element, tenths, callback) {
|
|
var itimer;
|
|
var startTime;
|
|
var duration = 0;
|
|
var className;
|
|
|
|
// Re-calculate and update displayed time
|
|
function refresh() {
|
|
var remain = element.remaining();
|
|
var min = Math.floor(Math.abs(remain / 60000));
|
|
var sec = (Math.floor(Math.abs(remain / 100)) / 10) % 60;
|
|
|
|
// Set classes
|
|
element.className = className;
|
|
if (! itimer) {
|
|
element.className += " paused";
|
|
}
|
|
if (! className) {
|
|
if (remain <= 0) {
|
|
element.className += " expired";
|
|
} else if (remain <= 10000) {
|
|
element.className += " lowtime";
|
|
}
|
|
}
|
|
|
|
// Has the timer run out?
|
|
if ((duration > 0) && (remain <= 0)) {
|
|
duration = 0;
|
|
sec = 0;
|
|
clearInterval(itimer);
|
|
itimer = undefined;
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
// .toFixed() rounds, we want to truncate
|
|
if (! tenths) {
|
|
sec = Math.floor(sec);
|
|
} else {
|
|
sec = sec.toFixed(1);
|
|
}
|
|
// Zero-pad
|
|
if (sec < 10) {
|
|
sec = "0" + sec;
|
|
}
|
|
|
|
var t = min + ":" + sec;
|
|
if (t != element.innerHTML) {
|
|
element.innerHTML = t;
|
|
}
|
|
}
|
|
|
|
// Return remaining time in milliseconds
|
|
element.remaining = function() {
|
|
if (itimer) {
|
|
var now = (new Date()).getTime();
|
|
return duration - (now - startTime);
|
|
} else {
|
|
return duration;
|
|
}
|
|
}
|
|
|
|
// Set timer to [d] milliseconds.
|
|
// Put element into class [cn], if set.
|
|
element.set = function(t, cn) {
|
|
startTime = (new Date()).getTime();
|
|
duration = t;
|
|
className = cn;
|
|
refresh();
|
|
}
|
|
|
|
// Start timer
|
|
element.start = function() {
|
|
if (! itimer) {
|
|
startTime = (new Date()).getTime();
|
|
itimer = setInterval(refresh, 33);
|
|
}
|
|
refresh();
|
|
}
|
|
|
|
// Stop timer
|
|
element.stop = function() {
|
|
if (itimer) {
|
|
duration = element.remaining();
|
|
clearInterval(itimer);
|
|
itimer = undefined;
|
|
}
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
function clicky(event) {
|
|
var tgt = event.target || window.event.srcElement;
|
|
|
|
tgt.set((tgt.remaining() + 60000) % (60000*8));
|
|
tgt.start();
|
|
}
|
|
|
|
var timers = [];
|
|
|
|
function pause(event) {
|
|
var tgt = event.target || window.event.srcElement;
|
|
var pause = (tgt.value == "Pause");
|
|
|
|
for (var i in timers) {
|
|
var e = timers[i];
|
|
|
|
if (e.remaining()) {
|
|
if (pause) {
|
|
e.stop();
|
|
} else {
|
|
e.start();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (pause) {
|
|
tgt.value = "Resume";
|
|
} else {
|
|
tgt.value = "Pause";
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
var t = document.getElementById("timers");
|
|
|
|
for (var i = 0; i < 8; i += 1) {
|
|
var e = document.createElement("p");
|
|
|
|
startTimer(e, true);
|
|
e.set(0);
|
|
e.onclick = clicky;
|
|
t.appendChild(e);
|
|
timers.push(e);
|
|
}
|
|
update_itimer = setInterval(update, 33);
|
|
}
|
|
|
|
window.onload = start;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="timers"></div>
|
|
<input type="button" value="Pause" onclick="pause(event)">
|
|
</body>
|
|
</html>
|