phga/web_snippets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: Prototyp Uniaufgabe für Etti

Browse Source 
Stunde anzeigen und Minuten als "Füllung"
This commit is contained in:
Toerd@archlinux 2020-07-01 21:29:14 +02:00
parent 2b4333fed4
commit 6886207e07
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
etti.html Normal file
View File

@ -0,0 +1,84 @@
<html>
<head>
<meta charset="UTF-8"/>
<title>Clock</title>
<style type="text/css">
#clock {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<clipPath id="21">
<!-- Hier kommt dein SVG rein -->
<path style="fill:#FFC107;" d="M362.676,192H293.77l78.656-177.067c2.356-5.399-0.11-11.686-5.509-14.043
c-1.338-0.584-2.781-0.887-4.24-0.89H149.343c-5.891-0.018-10.681,4.743-10.699,10.634c-0.001,0.289,0.01,0.577,0.032,0.865
l21.333,277.333c0.435,5.564,5.086,9.852,10.667,9.835H203.7L224.074,502.4c0.59,5.861,5.82,10.135,11.682,9.544
c3.86-0.389,7.205-2.843,8.734-6.408l128-298.667c2.321-5.415-0.187-11.685-5.601-14.006
C365.557,192.292,364.124,191.999,362.676,192z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</clipPath>
</defs>
</svg>
<div id="clock"></div>
</body>
<script>
/* let time = new Date().getTime(); */
async function start_animation() {
let clock = document.getElementById("clock");
while (true) {
animate_clock(clock);
await sleep(1000);
}
}
function animate_clock(c) {
let hour = new Date().getHours();
let min = new Date().getMinutes();
let p = min / 60 * 100;
c.style.background = `linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) ${p}%,rgba(9,121,32,1) ${p}%)`;
// 1.svg, ..., 12.svg
c.style.clipPath = `url("#${hour}")`;
}
function sleep(ms) {
return new Promise((nil) => setTimeout(nil, ms));
}
start_animation();
</script>
</html>