1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>01-检测网络状态</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 html{
9 font-
size: 10px;
10 }
11 body{
12 font-size: 1
.2rem;
13 }
14 #net{
15 width: 20rem;
16 height: 4rem;
17 line-
height: 4rem;
18 background-
color: #e0e0e0;
19 border-radius: 0
.5rem;
20 text-
align: center;
21 font-size: 1
.8rem;
22 color: red;
23 display: none;
24 }
25 </style>
26 </head>
27 <body>
28 <button id="btn">获取网络的状态</button>
29 <div id="net">xxdewdwedwe</div>
30 <p>哈哈哈哈</p>
31 <script src="js/jquery-3.3.1.js"></script>
32 <script>
33 $(
function () {
34 $('#btn').on('click', ()=>
{
35 // alert(window.navigator.onLine);
36 });
37 // 1. 当网络连接的时候
38 window.addEventListener('online', ()=>
{
39 $('#net').text('网络已经连接~').fadeIn(500).delay(1000
).fadeOut();
40 });
41
42 // 2. 当网络断开的时候
43 window.addEventListener('offline', ()=>
{
44 $('#net').text('您的网络出了些问题哟~').fadeIn(500).delay(1000
).fadeOut();
45 });
46 });
47 </script>
48 </body>
49 </html>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11259118.html
