Refactoring
This commit is contained in:
parent
a4a90bf61b
commit
3b838722ff
68
time.html
68
time.html
|
|
@ -1,13 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>time</title>
|
||||
<meta charset="UTF-8">
|
||||
<script>
|
||||
|
||||
const darkColor = "#000000";
|
||||
const lightColor = "#ffffff";
|
||||
const fontSizeFallbackPx = 300;
|
||||
const intervalMillisec = 200;
|
||||
|
||||
let light = false;
|
||||
let darkColor = "#000000";
|
||||
let lightColor = "#ffffff";
|
||||
const fontSizeFallback = 300;
|
||||
let fontSizePx = 300;
|
||||
let fontSizePx = fontSizeFallbackPx;
|
||||
let getStrings = [
|
||||
function(){return (new Date()).toTimeString().split(" ")[0];},
|
||||
function(){const a = (new Date()).toTimeString().split(" ")[0].split(":"); return a[0] + ":" + a[1];},
|
||||
|
|
@ -17,22 +21,38 @@
|
|||
];
|
||||
let getStrInd = 0;
|
||||
|
||||
document.addEventListener("keypress", keyPress);
|
||||
|
||||
function load() {
|
||||
setLight();
|
||||
setTime();
|
||||
setSize();
|
||||
setInterval(setTime, 200);
|
||||
setColors();
|
||||
setInterval(setTime, intervalMillisec);
|
||||
}
|
||||
|
||||
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) {
|
||||
case " ":
|
||||
getStrInd = ((getStrInd + 1) % getStrings.length);
|
||||
break;
|
||||
case "c":
|
||||
reverseColors();
|
||||
light = !light;
|
||||
setColors();
|
||||
break;
|
||||
case "+":
|
||||
fontSizePx *= 1.2;
|
||||
|
|
@ -43,7 +63,7 @@
|
|||
setSize();
|
||||
break;
|
||||
case "0":
|
||||
fontSizePx = fontSizeFallback;
|
||||
fontSizePx = fontSizeFallbackPx;
|
||||
setSize();
|
||||
break;
|
||||
case "*":
|
||||
|
|
@ -54,39 +74,13 @@
|
|||
fontSizePx /= 1.05;
|
||||
setSize();
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setTime() {
|
||||
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 {
|
||||
font-size: 16.0vw;
|
||||
font-family: "Monoid";
|
||||
font-family: monospace;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in a new issue