Visueller Timer mit Endzeit<\/title>\n <style>\n body {\n font-family: sans-serif;\n text-align: center;\n margin: 0;\n background-color: #000;\n color: #fff;\n overflow: hidden;\n }\n canvas {\n display: block;\n margin: 0 auto;\n background: #222;\n }\n input[type=\"time\"] {\n font-size: 1.5rem;\n background: #fff;\n color: #000;\n padding: 0.5rem;\n border-radius: 5px;\n margin-top: 1rem;\n }\n button {\n font-size: 1.5rem;\n padding: 1rem 2rem;\n margin-top: 1rem;\n background: #76c7c0;\n color: #000;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body>\n \n <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 80%;\"><canvas id=\"timerCanvas\" style=\"width: 100%; height: 100%; display: block;\"><\/canvas><\/div>\n<div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n <p>Gib die Endzeit ein:<\/p>\n <div style=\"display: flex; gap: 1rem; align-items: center; justify-content: center;\">\n <input type=\"time\" id=\"endTimeInput\" \/>\n <button onclick=\"startTimer()\">Start<\/button>\n <\/div>\n<\/div>\n<script>\n const canvas = document.getElementById(\"timerCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let endTime;\n let timerInterval;\n\n function resizeCanvas() {\n const container = canvas.parentElement.getBoundingClientRect();\ncanvas.width = container.width;\ncanvas.height = container.height;\n drawInitialClock();\n }\n\n window.addEventListener(\"resize\", resizeCanvas);\n resizeCanvas();\n\n function drawInitialClock() {\n const cx = canvas.width \/ 2;\n const cy = canvas.height \/ 2;\n const r = Math.min(canvas.width, canvas.height) \/ 2 - 10;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.beginPath();\n ctx.arc(cx, cy, r * 0.8, 0, 2 * Math.PI);\n ctx.fillStyle = \"#fff\";\n ctx.fill();\n drawDial(cx, cy, r * 0.8);\n }\n\n function startTimer() {\n const timeStr = document.getElementById(\"endTimeInput\").value;\n if (!timeStr) {\n alert(\"Bitte eine Endzeit eingeben.\");\n return;\n }\n const [h, m] = timeStr.split(\":\").map(Number);\n endTime = new Date();\n endTime.setHours(h, m, 0, 0);\n if (endTime < new Date()) endTime.setDate(endTime.getDate() + 1);\n clearInterval(timerInterval);\n timerInterval = setInterval(updateTimer, 1000);\n updateTimer();\n }\n\n function updateTimer() {\n const now = new Date();\n const diffMs = endTime - now;\n if (diffMs <= 0) {\n clearInterval(timerInterval);\n alert(\"Zeit abgelaufen!\");\n return;\n }\n\n const cx = canvas.width \/ 2;\n const cy = canvas.height \/ 2;\n const r = Math.min(canvas.width, canvas.height) * 0.4;\n const diffSec = Math.floor(diffMs \/ 1000);\n const remaining = diffSec % 3600;\n const angle = (remaining \/ 3600) * 2 * Math.PI;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.beginPath();\n ctx.arc(cx, cy, r * 0.8, 0, 2 * Math.PI);\n ctx.fillStyle = \"#fff\";\n ctx.fill();\n\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.arc(cx, cy, r * 0.8, -0.5 * Math.PI, -0.5 * Math.PI + angle);\n ctx.fillStyle = \"#f00\";\n ctx.fill();\n\n drawDial(cx, cy, r * 0.8);\n\n const min = Math.floor(remaining \/ 60);\n const sec = remaining % 60;\n ctx.fillStyle = \"#000\";\n ctx.font = `${r * 0.2}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(`${min}m ${sec}s`, cx, cy);\n }\n\n function drawDial(cx, cy, r) {\n ctx.save();\n ctx.translate(cx, cy);\n for (let i = 0; i < 60; i++) {\n ctx.save();\n const angle = (i \/ 60) * 2 * Math.PI - Math.PI \/ 2;\n ctx.rotate(angle);\n ctx.beginPath();\n ctx.moveTo(r * 0.9, 0);\n if (i % 5 === 0) {\n ctx.lineTo(r * 0.7, 0);\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n ctx.save();\n ctx.translate(r * 0.6, 0);\n ctx.rotate(-angle);\n ctx.fillStyle = \"#000\";\n ctx.font = `${r * 0.1}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(i, 0, 0);\n ctx.restore();\n } else {\n ctx.lineTo(r * 0.8, 0);\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n ctx.restore();\n }\n ctx.restore();\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Visueller Timer mit Endzeit Gib die Endzeit ein: Start<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1086","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/comments?post=1086"}],"version-history":[{"count":1,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/media?parent=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1086,"date":"2025-06-21T21:26:27","date_gmt":"2025-06-21T20:26:27","guid":{"rendered":"https:\/\/lernen.hpslimmattal.ch\/?page_id=1086"},"modified":"2025-06-21T21:26:29","modified_gmt":"2025-06-21T20:26:29","slug":"timetimer","status":"publish","type":"page","link":"https:\/\/lernen.hpslimmattal.ch\/index.php\/timetimer\/","title":{"rendered":"TimeTimer"},"content":{"rendered":"\n\n\n\n \n \n Visueller Timer mit Endzeit<\/title>\n <style>\n body {\n font-family: sans-serif;\n text-align: center;\n margin: 0;\n background-color: #000;\n color: #fff;\n overflow: hidden;\n }\n canvas {\n display: block;\n margin: 0 auto;\n background: #222;\n }\n input[type=\"time\"] {\n font-size: 1.5rem;\n background: #fff;\n color: #000;\n padding: 0.5rem;\n border-radius: 5px;\n margin-top: 1rem;\n }\n button {\n font-size: 1.5rem;\n padding: 1rem 2rem;\n margin-top: 1rem;\n background: #76c7c0;\n color: #000;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body>\n \n <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 80%;\"><canvas id=\"timerCanvas\" style=\"width: 100%; height: 100%; display: block;\"><\/canvas><\/div>\n<div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n <p>Gib die Endzeit ein:<\/p>\n <div style=\"display: flex; gap: 1rem; align-items: center; justify-content: center;\">\n <input type=\"time\" id=\"endTimeInput\" \/>\n <button onclick=\"startTimer()\">Start<\/button>\n <\/div>\n<\/div>\n<script>\n const canvas = document.getElementById(\"timerCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let endTime;\n let timerInterval;\n\n function resizeCanvas() {\n const container = canvas.parentElement.getBoundingClientRect();\ncanvas.width = container.width;\ncanvas.height = container.height;\n drawInitialClock();\n }\n\n window.addEventListener(\"resize\", resizeCanvas);\n resizeCanvas();\n\n function drawInitialClock() {\n const cx = canvas.width \/ 2;\n const cy = canvas.height \/ 2;\n const r = Math.min(canvas.width, canvas.height) \/ 2 - 10;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.beginPath();\n ctx.arc(cx, cy, r * 0.8, 0, 2 * Math.PI);\n ctx.fillStyle = \"#fff\";\n ctx.fill();\n drawDial(cx, cy, r * 0.8);\n }\n\n function startTimer() {\n const timeStr = document.getElementById(\"endTimeInput\").value;\n if (!timeStr) {\n alert(\"Bitte eine Endzeit eingeben.\");\n return;\n }\n const [h, m] = timeStr.split(\":\").map(Number);\n endTime = new Date();\n endTime.setHours(h, m, 0, 0);\n if (endTime < new Date()) endTime.setDate(endTime.getDate() + 1);\n clearInterval(timerInterval);\n timerInterval = setInterval(updateTimer, 1000);\n updateTimer();\n }\n\n function updateTimer() {\n const now = new Date();\n const diffMs = endTime - now;\n if (diffMs <= 0) {\n clearInterval(timerInterval);\n alert(\"Zeit abgelaufen!\");\n return;\n }\n\n const cx = canvas.width \/ 2;\n const cy = canvas.height \/ 2;\n const r = Math.min(canvas.width, canvas.height) * 0.4;\n const diffSec = Math.floor(diffMs \/ 1000);\n const remaining = diffSec % 3600;\n const angle = (remaining \/ 3600) * 2 * Math.PI;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.beginPath();\n ctx.arc(cx, cy, r * 0.8, 0, 2 * Math.PI);\n ctx.fillStyle = \"#fff\";\n ctx.fill();\n\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.arc(cx, cy, r * 0.8, -0.5 * Math.PI, -0.5 * Math.PI + angle);\n ctx.fillStyle = \"#f00\";\n ctx.fill();\n\n drawDial(cx, cy, r * 0.8);\n\n const min = Math.floor(remaining \/ 60);\n const sec = remaining % 60;\n ctx.fillStyle = \"#000\";\n ctx.font = `${r * 0.2}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(`${min}m ${sec}s`, cx, cy);\n }\n\n function drawDial(cx, cy, r) {\n ctx.save();\n ctx.translate(cx, cy);\n for (let i = 0; i < 60; i++) {\n ctx.save();\n const angle = (i \/ 60) * 2 * Math.PI - Math.PI \/ 2;\n ctx.rotate(angle);\n ctx.beginPath();\n ctx.moveTo(r * 0.9, 0);\n if (i % 5 === 0) {\n ctx.lineTo(r * 0.7, 0);\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n ctx.save();\n ctx.translate(r * 0.6, 0);\n ctx.rotate(-angle);\n ctx.fillStyle = \"#000\";\n ctx.font = `${r * 0.1}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(i, 0, 0);\n ctx.restore();\n } else {\n ctx.lineTo(r * 0.8, 0);\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n ctx.restore();\n }\n ctx.restore();\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Visueller Timer mit Endzeit Gib die Endzeit ein: Start<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1086","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/comments?post=1086"}],"version-history":[{"count":1,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/pages\/1086\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/lernen.hpslimmattal.ch\/index.php\/wp-json\/wp\/v2\/media?parent=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}