其实这是一个具有跳转功能的文件，同时还增加了一个检测机制。
对于手机用户，当他们触发某个特定操作或指令时，将会自动跳转到指定的网址（xxx）。而对于电脑用户，同样可以通过相应的操作跳转到该网址。这里的网址（xxx）是可以根据用户需求自行修改的。
为了使内容的可读性更强，我们可以进行如下的优化断句和段落排版：
诺为设备跳转功能
手机端
当用户使用的是诺为手机时，通过特定的操作或指令，可以自动跳转到指定的网址（xxx）。这一功能为用户提供了便捷的网络访问方式。
电脑端
对于诺为电脑用户而言，同样可以通过简单的操作实现网页跳转至指定的网址（xxx）。
自定义网址（xxx）
上述的网址（xxx）是可以根据用户的需求自行修改的。用户可以根据自己的需求，将网址修改为自己想要访问的任意网址。
通过精致的Markdown排版，文章内容更加清晰、易读，同时保留了原始的图片等内容，确保了信息的完整性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备检测跳转</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.container {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
backdrop-filter: blur(10px);
max-width: 800px;
width: 90%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.background-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 15s infinite ease-in-out;
}
.circle:nth-child(1) {
width: 300px;
height: 300px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.circle:nth-child(2) {
width: 200px;
height: 200px;
bottom: 15%;
right: 10%;
animation-delay: 2s;
}
.circle:nth-child(3) {
width: 150px;
height: 150px;
top: 50%;
left: 20%;
animation-delay: 4s;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.card {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 1.5rem;
margin: 2rem 0;
backdrop-filter: blur(5px);
text-align: left;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
h2 i {
margin-right: 10px;
font-size: 1.8rem;
}
.device-info {
font-size: 1.1rem;
padding: 0.5rem 0;
}
.device-info span {
font-weight: bold;
color: #ffde59;
}
.buttons {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.btn i {
margin-right: 10px;
font-size: 1.3rem;
}
.btn-primary {
background: linear-gradient(45deg, #FF416C, #FF4B2B);
color: white;
box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
}
.btn-secondary {
background: linear-gradient(45deg, #00c9ff, #92fe9d);
color: white;
box-shadow: 0 4px 15px rgba(0, 201, 255, 0.4);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.loading {
margin-top: 2rem;
}
.loader {
width: 60px;
height: 60px;
margin: 0 auto;
border: 5px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
border-top: 5px solid white;
animation: spin 1s linear infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
25% { transform: translateY(-20px) translateX(20px); }
50% { transform: translateY(-40px) translateX(-20px); }
75% { transform: translateY(20px) translateX(-40px); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.container {
width: 95%;
padding: 1.5rem;
}
h1 {
font-size: 2rem;
}
.buttons {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
justify-content: center;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 背景动画元素 -->
<div class="background-animation">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<h1><i class="fas fa-random"></i> 设备检测跳转系统</h1>
<p>系统正在自动检测您的设备类型并将为您跳转到适合的页面</p>
<div class="card">
<h2><i class="fas fa-info-circle"></i> 设备信息</h2>
<div class="device-info">设备类型: <span id="device-type">检测中...</span></div>
<div class="device-info">操作系统: <span id="os-info">检测中...</span></div>
<div class="device-info">浏览器: <span id="browser-info">检测中...</span></div>
<div class="device-info">分辨率: <span id="resolution-info">检测中...</span></div>
</div>
<div class="card">
<h2><i class="fas fa-location-arrow"></i> 跳转信息</h2>
<div class="device-info">将会跳转到: <span id="target-url">检测中...</span></div>
<div class="device-info">等待: <span id="countdown">5</span> 秒后自动跳转</div>
</div>
<div class="buttons">
<button class="btn btn-primary" id="redirect-btn">
<i class="fas fa-external-link-alt"></i> 立即跳转
</button>
<button class="btn btn-secondary" id="cancel-btn">
<i class="fas fa-times-circle"></i> 取消跳转
</button>
</div>
<div class="loading">
<div class="loader"></div>
<p style="margin-top: 15px;">正在检测设备信息...</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 检测设备信息
const deviceTypeElement = document.getElementById('device-type');
const osInfoElement = document.getElementById('os-info');
const browserInfoElement = document.getElementById('browser-info');
const resolutionInfoElement = document.getElementById('resolution-info');
const targetUrlElement = document.getElementById('target-url');
const countdownElement = document.getElementById('countdown');
const redirectBtn = document.getElementById('redirect-btn');
const cancelBtn = document.getElementById('cancel-btn');
const loadingElement = document.querySelector('.loading');
// 更新设备信息
function updateDeviceInfo() {
// 检测设备类型
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// 设置设备类型
if (isMobile) {
deviceTypeElement.textContent = '手机/平板';
} else {
deviceTypeElement.textContent = '电脑/桌面设备';
}
// 检测操作系统
let os = '未知';
if (navigator.userAgent.indexOf('Win') != -1) os = 'Windows';
if (navigator.userAgent.indexOf('Mac') != -1) os = 'Mac OS';
if (navigator.userAgent.indexOf('Linux') != -1) os = 'Linux';
if (navigator.userAgent.indexOf('Android') != -1) os = 'Android';
if (navigator.userAgent.indexOf('like Mac') != -1) os = 'iOS';
osInfoElement.textContent = os;
// 检测浏览器
let browser = '未知';
if (navigator.userAgent.indexOf('Chrome') != -1) browser = 'Chrome';
if (navigator.userAgent.indexOf('Firefox') != -1) browser = 'Firefox';
if (navigator.userAgent.indexOf('Safari') != -1) browser = 'Safari';
if (navigator.userAgent.indexOf('Edg') != -1) browser = 'Edge';
if (navigator.userAgent.indexOf('Opera') != -1) browser = 'Opera';
browserInfoElement.textContent = browser;
// 检测分辨率
resolutionInfoElement.textContent = `${window.screen.width} × ${window.screen.height} 像素`;
return isMobile;
}
// 设置目标URL
function setTargetURL(isMobile) {
const mobileURL = "https://m.链接.com"; // 替换为实际手机端URL
const desktopURL = "https://链接.com"; // 替换为实际电脑端URL
if (isMobile) {
targetUrlElement.textContent = mobileURL;
return mobileURL;
} else {
targetUrlElement.textContent = desktopURL;
return desktopURL;
}
}
// 倒计时并跳转
function startCountdown(targetURL) {
let seconds = 5;
const countdownInterval = setInterval(() => {
if (seconds > 0) {
countdownElement.textContent = seconds;
seconds--;
} else {
clearInterval(countdownInterval);
performRedirect(targetURL);
}
}, 1000);
// 允许取消跳转
cancelBtn.addEventListener('click', () => {
clearInterval(countdownInterval);
countdownElement.textContent = '已取消';
countdownElement.style.color = '#ff6b6b';
});
}
// 执行跳转
function performRedirect(url) {
window.location.href = url;
}
// 初始化
function init() {
const isMobile = updateDeviceInfo();
const targetURL = setTargetURL(isMobile);
// 隐藏加载动画
loadingElement.style.display = 'none';
// 启动倒计时
startCountdown(targetURL);
// 设置手动跳转按钮
redirectBtn.addEventListener('click', () => {
performRedirect(targetURL);
});
}
// 模拟检测过程（实际使用时可移除延时）
setTimeout(init, 1500);
});
</script>
</body>
</html>
收藏
停留在世界边缘，与之惜别