前端 实时 获取 网络状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var st = new Date();
</script>
<div>
<img alt="测试图片" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649559976&t=40f08de8b77f0d284bfc27408041eaa2" onload="speed();">
<div id=txt></div>
</div>
<script>
window.addEventListener("online", () => {
console.log(网络已连接)
});
window.addEventListener("offline", () => {
console.log(网络已断开)
});
console.log(是否在线,navigator.onLine)
if(navigator.onLine){
// 每秒1000 毫秒 获取一次
setInterval(function(){
console.log(网22速,navigator.connection.downlink,MB/s)
},1000)
}
// s手动计算
var arr=["网速低于50KB","网速在50-100KB之间","网速在100-200KB之间","网速在200-300KB之间","视频通讯"];
function speed() {
var filesize =35.4; //measured in KB
var et = new Date();
var speed = Math.round(filesize*1000)/(et - st);
document.title=speed;
var scope=(speed>0 && speed<=50)?0:(speed>50 && speed<=100)?1:(speed>=100 && speed<200)?2:(speed>=200 && speed<300)?3:4;
document.getElementById("txt").innerHTML = ("您的下载速度为：" + arr[scope] + " (K/秒)")
}
</script>
</body>
</html>
标题
下一篇：
学习编程只需要这三条建议！