HTML5网络状态变化显示提醒(javascript插件)

文章是本人在B站学习“黑马前端”的笔记，感谢pink老师的详细讲解。

1.创建一个html文件。

2.在body中写入一个<p>标签

        <p class="tips"></p>

3.引入jquery.min.js文件

       <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

4.HTNL5提供了两个事件online 和 offline

     online用户网络连接时调用

     offline用户网络断开时调用

     他们的监听对象都是window

  写入代码：

 <script>

    // 1.当网络连接的时候，弹出P标签，然后消失

    window.addEventListener('online',function(){

      $(".tips").text("网络已经连接").fadeIn(500).delay(1000).fadeOut(500);

    })

    // 1.当网络断开的时候，弹出P标签，然后消失

    window.addEventListener('offline',function(){

      $(".tips").text("裂开，网络链接失败").fadeIn(500).delay(1000).fadeOut(500);

    })

  </script>

5.打开网页，连接或断开网络，验证运行是否成功。

完整代码