H5新しい知識

1 <！DOCTYPE HTML>
 2 <HTML langは= "EN">
 3 <ヘッド>
 4      <メタ文字コード= "UTF-8">
 5      <タイトル> 01-检测网络状态</タイトル>
 6      <メタ名= "ビューポート"コンテンツ="幅=デバイス幅、初期スケール= 1.0" >
 7      <スタイル>
 8          HTML {
 9              font- サイズ：10pxの。
10          }
 11          本体{
 12              フォントサイズ：1 .2rem。
13          }
 14          #net {
 15              幅：20rem。
16              身長：4rem。
17             ライン- 高さ：4rem。
18              バックグラウンド色：＃e0e0e0。
19              境界半径：0 .5rem。
20              テキストベース整列：センター;
21              フォントサイズ：1 .8rem。
22              色：赤。
23              ディスプレイ：なし。
24          }
 25      </スタイル>
 26 </ HEAD>
 27 <body>
 28      <ボタンID = "BTN">获取网络的状态</ボタン>
 29      <DIV ID = "ネット"> xxdewdwedwe </ div>
 30      <P >哈哈哈哈</ P>
 31<SCRIPT SRC = "JS / jQueryの-3.3.1.js"> </ SCRIPT>
 32 <SCRIPT>
 33である      $（関数（）{
 34は           $（ 'BTN番号'）。ON（ 'クリック'、（）=> {
 35              //    アラート（window.navigator.onLine）; 
36           }）;
 37          // 1.ネットワーク接続
38は          window.addEventListener（ 'オンライン'、（）=> {
 39              $（ '＃ネット'）。テキスト（ '〜接続されたネットワーク'）フェードイン（500）.delay（1000 ）.fadeOut（）;
 40          }）;
 41は、 
42である         // 場合、ネットワークが切断された場合に2 
43である          window.addEventListener（ 'オフライン'、（ ）=>{
 44             $（ '＃ネット'）テキスト （ ' ネットワークがいくつかの問題よ〜'を有する）フェードイン（500）.delay（1000年... ）.fadeOut（）を;
 45          }）;
 46れる     }）;
 47 </ SCRIPT>
 48 </ BODY>
 49 </ HTML>
おすすめ
