7 Tage Inzidenz

Zeigt den aktuellen 7 Tages Inzidenz aus Deutschland an

Der hier verwendete Code

<html> <head> <style> #tacho_svg circle { stroke: #666; stroke-width: 2em; } #tacho_svg .yellow { stroke: #FF9F1E; } #tacho_svg .red { stroke: red; } #tacho_svg .green { stroke: green; } #tacho_svg { border: 1px solid #555555; } body, html { width: 100%; height: 100%; margin: 0px auto; background-color: #0a1a17; font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #ccc; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; } #RPM { font: bold 50px Verdana, Geneva, sans-serif; } #rpm_scale { font: 24px Verdana, Geneva, sans-serif; } #rpm_text { font: 24px Verdana, Geneva, sans-serif; } #rpm_hobbs { font: 20px Verdana, Geneva, sans-serif; } #rpm_pointer { stroke: white; } </style> </head> <body> <h1 style="color:white">7-Tage-Inzidenz</h1> <svg id="tacho_svg" viewBox="-250 -250 500 300" width="320" height="200"> <defs> <style> line { stroke: white; stroke-width: 3px; } text { fill: white; text-anchor: middle; font-size: 22px; font-family: sans-serif; } #id { display: none; } rect { fill: transparent; } </style> </defs> <circle id="red_arc" class="bar red" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <circle id = "yellow_arc" class="bar yellow" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <circle id="green_arc" class="bar green" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <g id="gauge" transform="rotate(-90)"> <g id="noon"> <rect x="-10" y="-220" width="20" height="100"/> <line x1="0" y1="-190" x2="0" y2="-180"/> <text x="0" y="-200"></text> </g> </g> <text id="RPM" x="0" y="-40"></text> <text id="rpm_scale" x="190" y="-210">200</text> <text id="rpm_text" x="-190" y="-210">50</text> <text id="rpm_hobbs" x="-180" y="40"></text> <path id="rpm_pointer" d="M0 120 L0 175" stroke-width="6" transform="rotate(172 0 0)"/> </svg> <script> async function getUpdate(){ const data = await fetch('https://api.corona-zahlen.org/germany') const json = await data.json() sieben=json.weekIncidence; document.getElementById('RPM').innerHTML=sieben.toFixed(2); if(sieben<=50){ var g=42,o=50,count=60; } if(sieben>50 && sieben<=150){ var g=16,o=50,count=160; } if(sieben>150 && sieben<=250){ var g=9.5,o=38.4,count=260; } if(sieben>250){ var g=5,o=20,count=500; } var pos=((180/count*sieben)+90); document.getElementById('rpm_pointer').setAttribute('transform','rotate('+pos+' 0 0)'); green_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-g/100)); yellow_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-o/100)); for (i=0; i<=180; i = i + 12) { var new_tick = noon.cloneNode(true); new_tick.getElementsByTagName('text')[0].textContent = (i/180 *count).toFixed(0); new_tick.removeAttribute("id"); new_tick.setAttribute("transform", "rotate(" + i + " 0 0)"); gauge.appendChild(new_tick); } } function createDayNode(){ return function (obj) { } } function compareDate(){ return function(a, b){ return a - b } } getUpdate() </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!