Benjamin/time
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactoring

Browse source
This commit is contained in:
Benjamin 2020-12-13 18:22:00 +01:00
parent a4a90bf61b
commit 3b838722ff
No known key found for this signature in database
GPG key ID: 99C8C88768F0F905
1 changed files with 93 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
time.html
View file

@ -1,38 +1,58 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <title>time</title>
<script> <meta charset="UTF-8">
let light = false; <script>
let darkColor = "#000000";
let lightColor = "#ffffff"; const darkColor = "#000000";
const fontSizeFallback = 300; const lightColor = "#ffffff";
let fontSizePx = 300; const fontSizeFallbackPx = 300;
let getStrings = [ const intervalMillisec = 200;
let light = false;
let fontSizePx = fontSizeFallbackPx;
let getStrings = [
function(){return (new Date()).toTimeString().split(" ")[0];}, function(){return (new Date()).toTimeString().split(" ")[0];},
function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0] + ":" + a[1];}, function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0] + ":" + a[1];},
function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0];}, function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0];},
function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[1];}, function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[1];},
function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[2];}, function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[2];},
]; ];
let getStrInd = 0; let getStrInd = 0;
document.addEventListener("keypress", keyPress); function load() {
function load() {
setLight();
setTime(); setTime();
setSize(); setSize();
setInterval(setTime, 200); setColors();
} setInterval(setTime, intervalMillisec);
}
function keyPress(event) { function setTime() {
let str = getStrings[getStrInd]();
document.getElementById("time").innerHTML = str;
document.title = str;
}
function setSize() {
document.getElementById("time").style.fontSize = fontSizePx + "px";
}
function setColors() {
document.body.style.background = light ? lightColor : darkColor;
document.getElementById("time").style.color = light ? darkColor : lightColor;
}
document.addEventListener("keypress", keyPress);
function keyPress(event) {
switch (event.key) { switch (event.key) {
case " ": case " ":
getStrInd = ((getStrInd + 1) % getStrings.length); getStrInd = ((getStrInd + 1) % getStrings.length);
break; break;
case "c": case "c":
reverseColors(); light = !light;
setColors();
break; break;
case "+": case "+":
fontSizePx *= 1.2; fontSizePx *= 1.2;
@ -43,7 +63,7 @@
setSize(); setSize();
break; break;
case "0": case "0":
fontSizePx = fontSizeFallback; fontSizePx = fontSizeFallbackPx;
setSize(); setSize();
break; break;
case "*": case "*":
@ -54,39 +74,13 @@
fontSizePx /= 1.05; fontSizePx /= 1.05;
setSize(); setSize();
break; break;
}
} }
}
</script>
function setTime() { <style>
document.getElementById("time").innerHTML = getStrings[getStrInd]();
}
function setSize() {
document.getElementById("time").style.fontSize = fontSizePx + "px";
}
function reverseColors() {
if (light) { setDark(); } else { setLight(); }
}
function setDark() {
document.body.style.background = darkColor;
document.getElementById("time").style.color = lightColor;
light = false;
}
function setLight() {
document.body.style.background = lightColor;
document.getElementById("time").style.color = darkColor;
light = true;
}
</script>
<style>
#time { #time {
font-size: 16.0vw; font-family: monospace;
font-family: "Monoid";
} }
.container { .container {
position: absolute; position: absolute;
@ -96,11 +90,11 @@
-webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
</style> </style>
</head> </head>
<body onload="load();"> <body onload="load();">
<div class="container"> <div class="container">
<span id="time"></span> <span id="time"></span>
</div> </div>
</body> </body>
</html> </html>