svg+JavaScript 模拟网络是否断开

不会写代码的咸鱼王

于 2024-10-05 18:33:02 发布

阅读量138

点赞数

文章标签： html5 javascript xhtml

本文链接：https://blog.csdn.net/2301_80748163/article/details/142717308

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #f7f7f7;
    }
    p {
      width: 200px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin: 100px auto;
      color: #fff;
      font-size: 24px;
      background-color: #000;
      display: none;
    }
  </style>
</head>
<body>
  <p class="tips"></p>
  <script src="jquery.min.js"></script>
  <script>
    window.addEventListener('online', function() {
      $('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
    })
    window.addEventListener('offline', function() {
      $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
    })
  </script>
</body>
</html>