<title>Talk Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8"/>
-
+ <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<script type="text/javascript">
function isInt(value) {
return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value))
var TO;
var starttime = 100;
var timer = 0;
- function start() {
- starttime = document.getElementById('set').value;
+ function start(i) {
+ if(isInt(i))
+ starttime = i;
+ else
+ starttime = document.getElementById('set').value;
+
document.getElementById('tim').className='';
if(!isInt(starttime)) {
document.getElementById('tim').innerHTML = 'X';
starttime = starttime*60;
timer = starttime+10;
clearInterval(TO);
- TO = setInterval('update()',10000);
+ TO = setInterval('update()',1000);
update();
}
//if (x==0) {clearInterval(TO);}
}
-
+ function stop() {
+ clearInterval(TO);
+ document.getElementById('tim').innerHTML = "--";
+ document.getElementById('tim').className='';
+ }
</script>
</head>
<body>
+<div id="sets">
+<input type="text" id="set" onChange="start()" value="10"/><br>
+<input type="button" value="start" onClick="start()"/><br>
+<input type="button" value="stop" onClick="stop()"/><br>
+<div> </div>
+<input type="button" value="5" onClick="start(5)"/><br>
+<input type="button" value="10" onClick="start(10)"/><br>
+<input type="button" value="15" onClick="start(15)"/><br>
+<input type="button" value="20" onClick="start(20)"/><br>
+<input type="button" value="25" onClick="start(25)"/><br>
+<input type="button" value="30" onClick="start(30)"/><br>
+</div>
<div id="tim">
00</div>
<div id="timsmall"></div>
-<div id="setting">
-<input type="text" id="set" onChange="start()" value="10"/>
-<input type="button" value="start" onClick="start()"/>
-</div>
+
</body></html>
body {
- font-family:"Trebuchet MS";
+ font-family:'Droid Sans Mono', monospace;
margin:0;
height:100%;
width:100%;
background:black;
}
-
-#setting {
-position:absolute;
-left:5px;
-top:5px;
-height:20px;
-}
-
-input {
-height:20px;
-}
-
-
#tim {
-font-family:monospace;
-font-size:70vw;
-width:100%;
+font-size:30vw;
+width:80vw;
height:95%;
text-align:center;
margin:auto;
.shutup{
background:red;
color:white;
- animation: blinker 1s linear infinite;
+/* animation: blinker 1s linear infinite; */
}
@keyframes blinker {
50% { opacity: 0; }
}
+
+#sets {
+ position:absolute;
+ top:1vw;
+ left:1vw;
+ width:8vw;
+}
+
+#sets input {
+ width : 5vw;
+ height: 6vh;
+ font-size:2vw;
+ margin-bottom:2vh;
+ background:#444;
+ color:#aaa;
+}
+
+#sets div {
+ height:10vh;
+ }
jspc29 / labtools.git / commitdiff