Aktuelle Inzidenz von Deutschland

Zeigt die aktuelle Inzidenz an

Der hier verwendete Code

<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 .blue { stroke: violet; } #tacho_svg .pink { stroke: blue; } #tacho_svg .dark { stroke: darkblue; } #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> <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="dark_arc" class="bar dark" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <circle id="pink_arc" class="bar pink" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <circle id="blue_arc" class="bar blue" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> <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">0</text> <text id="rpm_text" x="-190" y="-210">0</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); //sieben=1100; var green=false; var orange=false; var red=false; var blue=false; var pink=false; var end=12; var d=0; var z=0; if(sieben<=50){ var g=42,o=50,r=0, b=0, p=0, count=60; green='true'; orange='true'; red='true'; var s=0; z=60; } if(sieben>50 && sieben<=150){ var g=16,o=32,r=50, b=0, p=0,count=160; green=true; orange=true; red=true; var s=0; } if(sieben>150 && sieben<=250){ var g=10,o=20,r=238, b=50, p=0,count=260; var s=0; end=22; z=260; } if(sieben>250 && sieben<=500){ var g=5,o=9,r=15, b=42, p=50,count=600; var s=10; end=20; z=600; } if(sieben>500 && sieben<=1000){ var g=2,o=5,r=9, b=23, p=52,count=1100; var s=9; end=20; z=1100; } if(sieben>1000 && sieben<=2000){ var g=1,o=3,r=6, b=9, p=13,count=2100; d=24; var s=9; end=20; z=2100; } var pos=((180/count*sieben)+90); document.getElementById('rpm_scale').innerHTML=z; document.getElementById('rpm_pointer').setAttribute('transform','rotate('+pos+' 0 0)'); //if(green=='true'){ green_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-g/100)); //} //if(yellow=='true'){ yellow_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-o/100)); //} //if(red=='true'){ red_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-r/100)); // } //if(blue=='true'){ blue_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-b/100)); // } // if(pink=='true'){ pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-p/100)); // } pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-d/100)); for (i=s; i<=180; i = i + end) { 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!