h5新知识

Posted 2022-05-22 zhangzhengyang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5新知识相关的知识，希望对你有一定的参考价值。

 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>

以上是关于h5新知识的主要内容，如果未能解决你的问题，请参考以下文章