Commit 488a4487 authored by Frank Fuhlbrück's avatar Frank Fuhlbrück
Browse files

klausuhr intial

parent 2005f960
Pipeline #6450 canceled with stages
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<title>Klausuhr - die Klausuruhr</title>
<style>
body {
background-color:black
}
#setup {
font-size:20pt;
font-family: monospace;
background-color: white;
color:black;
position: absolute;
width: 95vw;
height: 95vh;
top:2vh;
left:2vh;
}
#time {
font-size:40vw;
font-family: monospace;
color:white;
text-align: center;
vertical-align: center;
position: relative;
top:12vh;
}
#wc {
font-size:10vh;
font-family:monospace;
color:red;
background-color: white;
position: absolute;
right:5vw;
top:2vh;
padding:0.3vw;
visibility:hidden;
}
</style>
<script>
var started = false;
var full = 15;
var fullOrig = 120*60;
var startDate = 0;
var elapsed = 0;
var remaining = 0;
var finalFiveMin = false;
function init(){
alert("wuhu");
fullOrig = document.getElementById("fullmin").value * 60;
full = fullOrig;
remaining = full;
document.getElementById("setup").style.visibility = "hidden";
document.getElementById("time").innerHTML =
(Math.floor(remaining / 60) + "'");
document.getElementById('set').blur();
}
function toggleClock(){
if(started){
full = remaining;
started = false;
} else {
startDate = Math.floor(new Date().getTime()/1000);
started = true;
alert(full);
}
}
function toggleWC() {
document.getElementById("wc").style.visibility =
document.getElementById("wc").style.visibility == "hidden" ?
"visible" : "hidden";
}
document.addEventListener('keydown', function(event){
if (event.key == " ")
toggleClock();
else
toggleWC();
});
setInterval(function(){
if(!started){
return;
}
var now = Math.floor(new Date().getTime()/1000);
elapsed = now - startDate;
remaining = full - elapsed;
if (remaining <= 0) {
started = false;
document.body.style.backgroundColor = "white";
document.getElementById("time").style.fontSize = "25vw";
document.getElementById("time").style.color = "black";
document.getElementById("time").innerHTML = "Abgabe";
return;
}
if (remaining < 300 && !finalFiveMin){
finalFiveMin = true;
document.body.style.backgroundColor = "red";
document.getElementById("time").style.fontSize = "30vw";
}
if (finalFiveMin){
document.getElementById("time").innerHTML =
(Math.floor(remaining / 60) + "'")+
((remaining % 60)<10?"0":"")+
((remaining % 60) + '"');
} else {
document.getElementById("time").innerHTML =
(Math.floor(remaining / 60) + "'");
}
}, 1000);
</script>
</head>
<body>
<div id="time">???</div>
<div id="wc">WC</div>
<div id="setup">
<h3>Klausuhr - die Klausuruhr</h3>
<form action="">
Dauer in Minuten: <input id="fullmin" type="text" value="120"><br>
<input type="button" value="Setzen" id="set" onclick="init()">
</form>
Starten der Uhr danach mit Leertaste, jede andere Taste wechselt
die WC-Anzeige.
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment