45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>JS Ping Widget Test</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>JS Ping Widget Test</h1>
|
||
|
|
|
||
|
|
<div id="pingWidget">
|
||
|
|
<span id="statusCircle">⬤</span>
|
||
|
|
<span id="hostname">hostname</span>
|
||
|
|
<span class="pingTime" id="pingTimeNumber">XX</span>
|
||
|
|
<span class="pingTime"> ms</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="outputDiv"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let hostname = "8.8.8.8";
|
||
|
|
let statusCircleText = document.getElementById("statusCircle");
|
||
|
|
let pingTimeText = document.getElementById("pingTimeNumber");
|
||
|
|
let hostnameText = document.getElementById("hostname");
|
||
|
|
|
||
|
|
// Simulate pings for now. ICMP ping doesn't seem to be possible in JS. Will have to check status codes of regular API calls.
|
||
|
|
|
||
|
|
let intervalID = setInterval(pingEverySecond, 1000);
|
||
|
|
|
||
|
|
function pingEverySecond() {
|
||
|
|
hostnameText.innerHTML = hostname;
|
||
|
|
pingTimeText.innerHTML = Math.floor(Math.random()*50);
|
||
|
|
|
||
|
|
if (parseInt(pingTimeText.innerHTML) < 25) {
|
||
|
|
statusCircleText.setAttribute("style","color: green");
|
||
|
|
} else {
|
||
|
|
statusCircleText.setAttribute("style","color: red");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|