neale/homepage
neale
/
homepage
1
0
Fork 0
Code Pull Requests Actions Activity

add timer

This commit is contained in:
Neale Pickett 2011-12-23 16:36:04 -06:00
parent 33a66271c7
commit c4f68982a6
2 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
misc/good-and-bad-los-alamos.mdwn
View File

@ -1,5 +1,8 @@
Title: The good and bad of Los Alamos Title: The good and bad of Los Alamos
*I did not write this. It was in the local newspaper's opinion page,
and I thought it was worth preserving.*
November 5, 2008 November 5, 2008
Dear Editor, Dear Editor,

35
toys/timer.html
View File

@ -1,16 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett --> <!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. --> <!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-11-09 18:15:56 neale" --> <!-- Time-stamp: "2011-11-10 11:12:04 neale" -->
<html> <html>
<head> <head>
<title>Presentation Timer</title> <title>Presentation Timer</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> <style>
body {
text-align: center;
}
#timer { #timer {
background: #eee;
font-size: 10em; font-size: 10em;
text-align: center; text-align: center;
margin: 0.1em; border-radius: 15px;
box-shadow: 10px 10px 5px #aaa;
} }
#tools { #tools {
text-align: center; text-align: center;
@ -41,7 +47,7 @@ function startTimer(element, duration, g, y) {
var sec = Math.abs(Math.floor(remain / 1000)) % 60; var sec = Math.abs(Math.floor(remain / 1000)) % 60;
if (itimer) { if (itimer) {
element.style.color = "inherit"; element.style.color = element.fg;
} else { } else {
element.style.color = "#888"; element.style.color = "#888";
} }
@ -53,7 +59,7 @@ function startTimer(element, duration, g, y) {
} else if (remain < g) { } else if (remain < g) {
element.style.backgroundColor = "#0f0"; element.style.backgroundColor = "#0f0";
} else { } else {
element.style.backgroundColor = "inherit"; element.style.backgroundColor = element.bg;
} }
element.innerHTML = ""; element.innerHTML = "";
@ -98,6 +104,11 @@ function startTimer(element, duration, g, y) {
y = y?y:30000; // Yellow @ 30s y = y?y:30000; // Yellow @ 30s
} }
if (element.bg == undefined) {
element.bg = element.style.backgroundColor;
element.fg = element.style.color;
}
display(duration); display(duration);
} }
@ -137,11 +148,23 @@ function setTime(id) {
</script> </script>
</head> </head>
<body> <body>
<p id="timer" onclick="clicked('timer');">--:--</p> <p><span id="timer" onclick="clicked('timer');">--:--</span></p>
<p id="tools"> <p id="tools">
<input id="timer time" type="time" size="6" value="5:00" onchange="setTime('timer');"> <input id="timer time" list="common times" size="6" value="5:00" onchange="setTime('timer');">
<input type="button" value="Set" onclick="setTime('timer');"> <input type="button" value="Set" onclick="setTime('timer');">
<input type="button" value="❚❚ ▶" onclick="clicked('timer');"> <input type="button" value="❚❚ ▶" onclick="clicked('timer');">
</p> </p>
<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>
</body> </body>
</html> </html>