<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检查网络</title>
<style>
body {
background-color: #eeeeee;
}
</style>
</head>
<body>
<p class="tips"></p>
<script src="jquery-3.3.1.js"></script>
<script>
// 通过 window.navigator.onLine 来检测网络是否可用
// alert(window.navigator.onLine);
// 1.当网络连接时,弹出p标签
window.addEventListener("online", function () {
$(".tips").text("网络已连接").fadeIn(1000).delay(2000).fadeOut(500);
})
// 2.当网络断开时,弹出p标签
window.addEventListener("offline", function () {
$(".tips").text("网络已断开").fadeIn(1000).delay(2000).fadeOut(500);
})
</script>
</body>
</html>
