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>