h5新知识

最新推荐文章于 2023-07-19 19:57:54 发布

weixin_30263277

最新推荐文章于 2023-07-19 19:57:54 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/zhangzhengyang/p/11259118.html

版权

 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>