注册

找回密码

账号  

密码  

<<返回列表下一个上一个收藏 打印本文 复制本文地址

223

查看

0

回复
主题：j检测网络404页 [收藏主题]  
lan988 当前离线

288

主题

210

广播

31

粉丝
添加关注
级别:管理员
用户积分:182 分
登录次数:1101 次
注册时间:2007-3-30
最后登录:2024-11-27
lan988 发表于：2024-8-7 2:47:26   | 显示全部帖子 查看该作者主题 楼主 
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-control" content="max-age=1700">
<meta name="viewport" content="user-scalable=no, width=device-width">
<meta name="MobileOptimized" content="320">
<meta name="format-detection" content="telephone=no">
<head>
    <meta charset="UTF-8">
    <title>网络重试加载JS</title>
    <script>
        function checkNetwork() {
            if (navigator.onLine) {
                // 网络正常，尝试加载指定链接
                window.location.href = 'https://lan998.com/3g/';
            } else {
                // 网络断开，设置定时器重试
                console.log('网络断开，正在尝试重新加载...');
                setTimeout(function() {
                    var script = document.createElement('script');
                    script.src = 'your-js-file.js';
                    script.onerror = function() {
                        // 如果JS文件加载失败，继续重试
                        checkNetwork();
                    };
                    document.body.appendChild(script);
                }, 5000); // 5秒后重试
            }
        }
 
        // 页面加载完成后开始检查网络状态
        window.onload = checkNetwork;
 
        // 监听网络状态变化
        window.addEventListener('online', checkNetwork);
        window.addEventListener('offline', checkNetwork);
    </script>
<style>
  .centered-text {
    display: flex;
    margin-top: 100px; /* 设置图片距离顶部50像素 */
    justify-content: center; /* 水平居中 */
  
  }
</style>
<style>
body {
   background-image: url('img/720.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}
</style>
<style>
.loader {
   border: 4px solid rgba(0, 0, 0, 0.1); /* Light grey background */
   border-top: 4px solid #3498db; /* Blue border */
   border-radius: 50%; /* Circular shape */
   width: 20px;
   height: 20px;
   animation: spin 2s linear infinite;
}
  
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}
</style>
<style>
   .centext {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
      height: 60vh; /* 使容器高度为视口高度 */
   }
</style>
</head>
<body>
<div class="centered-text">
  您现在处于离线状态,<br>请检查您的网络连接！
  </div>
  <div class="centext">
    <div id="loading" class="loader"></div>
    </div>
  <script>
   // 显示等待圆圈
   function showLoading() {
     var loadingDiv = document.getElementById('loading');
     loadingDiv.style.display = 'block';
   }
    
   // 隐藏等待圆圈
   function hideLoading() {
     var loadingDiv = document.getElementById('loading');
     loadingDiv.style.display = 'none';
   }
    
   // 用法
   // showLoading(); // 当需要等待时显示圆圈
   // hideLoading(); // 当处理完毕时隐藏圆圈
  </script>
 
</body>
</html>
 
分享到252
 
专业从事风水，命理，择日，取名等。
本站是提供个人知识管理的网络存储空间，所有非本站原创内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请点击这里 举报
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜下一主题 | 上一主题 ＞
风水自学网有限公司 © 2016-2025 版权所有 页面执行0.07617秒 powered by KesionCMS 9.0