h5 new knowledge

 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 the src = "JS / jQuery-3.3.1.js"> </ Script>
 32 <Script>
 33 is      $ ( function () {
 34 is           $ ( 'BTN #'). ON ( 'the Click', () => {
 35              //    Alert (window.navigator.onLine); 
36           });
 37 [          // 1. when the network connection 
38 is          window.addEventListener ( 'Online', () => {
 39              $ ( '# nET'). text ( 'connected network ~') fadeIn (500) .delay (1000. ) .fadeOut ();
 40          });
 41 is  
42 is          // 2. when the network is disconnected when 
43 is          window.addEventListener ( 'Offline', ( ) =>{
44             $ ( '# net') text ( ' your network having some problems yo ~') fadeIn (500) .delay (1000.. ) .fadeOut ();
 45          });
 46 is      });
 47 </ Script>
 48 </ body>
 49 </ HTML>

 

Guess you like

Origin www.cnblogs.com/zhangzhengyang/p/11259118.html