Internet Speedometer
Die Internetgeschwindigkeit wird von der Chrome Network Information API berechnet .. Klicken Sie , hier um die MDN-Dokumente anzuzeigen. Beachten Sie, dass diese API von Firefox nicht unterstützt wird.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@tailwind preflight;
@tailwind components;
@tailwind utilities;
.speedometr {
position: relative;
height: 100px;
width: 200px;
}
.speedometr .scale {
position: absolute;
border: 3px solid red;
width: 65px;
height: 15px;
border-radius: 100% 100% 0 0;
border-bottom: none;
}
.speedometr .scale.low {
top: 10px;
left: -30px;
border-color: #e74c3c;
transform: rotate(-50deg);
transform-origin: top right;
}
.speedometr .scale.middle {
left: calc(50% - 37px);
border-color: #f1c40f;
}
.speedometr .scale.hight {
top: 10px;
right: -30px;
transform: rotate(50deg);
transform-origin: top left;
border-color: #2ecc71;
}
.speedometr .arrow {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -1px;
width: 1px;
height: 66px;
border: 1px solid;
border-color: #2c3e50;
border-radius: 100% 100% 0 0;
background-color: black;
transform: rotate(-75deg);
transform-origin: bottom center;
transition: transform 0.8s;
transition-timing-function: cubic-bezier(0.65, 1.95, 0.03, 0.32);
}
.speedometr .arrow:after {
content: '';
display: block;
height: 14px;
width: 14px;
background-color: #2c3e50;
border-radius: 100%;
position: absolute;
bottom: -1px;
left: -6px;
}
</style>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="min-h-screen items-center flex justify-center p-6">
<div
class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden border-r">
<div class="block px-4 py-2 mb-6 leading-normal bg-grey-lighter flex flex-no-shrink">
<h3 class="pl-2 text-left m-auto align-middle text-grey-darkest w-full">Internet Speedometer</h3>
<button onClick="refreshSpeedOMeter();"
class="bg-grey-light float-right hover:bg-grey text-grey-darkest font-bold py-3 px-3 rounded-full inline-flex items-center">
<svg class="fill-current w-6 h-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"/></svg>
</button>
</div>
<div class="items-center flex justify-center p-4">
<div class="">
<div class="speedometr">
<div class="scale low"></div>
<div class="scale middle"></div>
<div class="scale hight"></div>
<div id="arrow" class="arrow"></div>
</div>
<div
id="counter"
class="text-grey-darkest text-center text-base font-semibold pt-4 pb-0"
>0.0 Mbps</div>
</div>
</div>
<div class="px-6 pt-0 pb-4 text-center">
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2" id="effectiveType">-</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2" id="rtt">rtt</span>
</div>
<div
class="py-4 px-8 text-sm font-medium text-grey-darker bg-grey-lighter leading-normal">
<p>Die Internetgeschwindigkeit wird von der
<b>Chrome Network Information API berechnet .</b>.
Klicken Sie ,
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API"
target="_black">hier</a>
um die MDN-Dokumente anzuzeigen.
Beachten Sie, dass diese API von Firefox nicht unterstützt wird.
</p>
</div>
</div>
</div>
<script>
function getConnection() {
const connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
connection.addEventListener('change', updateConnectionStatus);
return connection;
}
function updateConnectionStatus() {
var speed =
connection.downlink +
Math.floor(Math.random() * 10) / 15 -
Math.floor(Math.random() * 10) / 15;
if((speed<0)||(connection.downlink==0)) speed = 0.0;
var type = connection.effectiveType;
var rtt = connection.rtt;
var angle = calcAngle(speed);
document.getElementById("arrow").style.WebkitTransform = `rotate(${angle}deg)`;
document.getElementById("arrow").style.msTransform = `rotate(${angle}deg)`;
document.getElementById("arrow").style.transform = `rotate(${angle}deg)`;
document.getElementById("counter").innerHTML = `${speed.toFixed(1)} Mbps`;
document.getElementById("effectiveType").innerHTML = `${type}`;
document.getElementById("rtt").innerHTML = `${rtt} milliseconds`;
}
var connection = getConnection();
let timerId = setInterval(() => dummyRequest(), 1000 + Math.random() * 500 + Math.random() * 500 );
function refreshSpeedOMeter(){
clearInterval(timerId);
let speed = 0;
let angle = calcAngle(speed);
var type = "-";
var rtt = connection.rtt;
document.getElementById("arrow").style.WebkitTransform = `rotate(${angle}deg)`;
document.getElementById("arrow").style.msTransform = `rotate(${angle}deg)`;
document.getElementById("arrow").style.transform = `rotate(${angle}deg)`;
document.getElementById("counter").innerHTML = `${speed.toFixed(1)} Mbps`;
document.getElementById("effectiveType").innerHTML = `${type}`;
document.getElementById("rtt").innerHTML = `${rtt} milliseconds`;
timerId = setInterval(() => dummyRequest(), 1000 + Math.random() * 500 + Math.random() * 500 );
}
function dummyRequest() {
// fetch("http://i66.tinypic.com/2s1unv6.jpg")
// .then(response => response.blob())
// .then(images => {
// outside = URL.createObjectURL(images);
// console.log(outside);
// })
// .catch(e => console.log(e));
updateConnectionStatus();
}
function calcAngle(value) {
var angle = -90;
if (value < 1.5) {
angle = (value / 1.5) * 60 - 90;
} else if (value > 1.5 && value < 6.5) {
angle = (value / 6.5) * 90 - 90;
} else if (value > 6.5 && value < 15) {
angle = (value / 15) * 30;
} else {
angle = (value / 15) * 90;
}
return Math.round(angle);
}
</script>
</body>
</html>