84 lines
2.5 KiB
HTML
84 lines
2.5 KiB
HTML
<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> |