121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
padding: 2rem;
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
}
|
|
.test-section {
|
|
margin: 2rem 0;
|
|
padding: 2rem;
|
|
border: 2px solid #007bff;
|
|
border-radius: 10px;
|
|
}
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="text-center mb-4">网站功能测试</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>1. 页面加载测试</h3>
|
|
<p id="pageLoadTest" class="success">✅ 页面加载成功</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>2. CSS样式测试</h3>
|
|
<div class="alert alert-success">Bootstrap样式加载正常</div>
|
|
<div class="alert alert-info">自定义样式测试</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>3. JavaScript功能测试</h3>
|
|
<button class="btn btn-primary" onclick="testJS()">测试JavaScript</button>
|
|
<p id="jsTestResult" class="mt-2"></p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>4. 资源加载测试</h3>
|
|
<p id="cssTest">CSS文件状态: 检测中...</p>
|
|
<p id="jsTest">JS文件状态: 检测中...</p>
|
|
<p id="imageTest">图片资源状态: 检测中...</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>5. 响应式设计测试</h3>
|
|
<div class="row">
|
|
<div class="col-md-4 bg-light p-3">小屏幕列</div>
|
|
<div class="col-md-4 bg-light p-3">中等屏幕列</div>
|
|
<div class="col-md-4 bg-light p-3">大屏幕列</div>
|
|
</div>
|
|
<p class="mt-2 success">✅ 响应式布局正常</p>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<a href="index.html" class="btn btn-success me-2">查看首页</a>
|
|
<a href="download.html" class="btn btn-info">查看下载中心</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript功能测试
|
|
function testJS() {
|
|
document.getElementById('jsTestResult').textContent = '✅ JavaScript执行正常';
|
|
document.getElementById('jsTestResult').className = 'success';
|
|
}
|
|
|
|
// 资源加载测试
|
|
function checkResource(url, type) {
|
|
return new Promise((resolve) => {
|
|
const resource = type === 'css' ? document.createElement('link') :
|
|
type === 'js' ? document.createElement('script') :
|
|
new Image();
|
|
|
|
if (type === 'css') {
|
|
resource.rel = 'stylesheet';
|
|
resource.href = url;
|
|
} else if (type === 'js') {
|
|
resource.src = url;
|
|
} else {
|
|
resource.src = url;
|
|
}
|
|
|
|
resource.onload = () => resolve(true);
|
|
resource.onerror = () => resolve(false);
|
|
|
|
document.head.appendChild(resource);
|
|
});
|
|
}
|
|
|
|
// 执行资源检查
|
|
async function checkResources() {
|
|
const cssLoaded = await checkResource('assets/css/style.css', 'css');
|
|
const jsLoaded = await checkResource('assets/js/script.js', 'js');
|
|
const imageLoaded = await checkResource('assets/images/placeholder.svg', 'image');
|
|
|
|
document.getElementById('cssTest').textContent =
|
|
`CSS文件状态: ${cssLoaded ? '✅ 加载成功' : '❌ 加载失败'}`;
|
|
document.getElementById('jsTest').textContent =
|
|
`JS文件状态: ${jsLoaded ? '✅ 加载成功' : '❌ 加载失败'}`;
|
|
document.getElementById('imageTest').textContent =
|
|
`图片资源状态: ${imageLoaded ? '✅ 加载成功' : '❌ 加载失败'}`;
|
|
}
|
|
|
|
// 页面加载完成后执行检查
|
|
document.addEventListener('DOMContentLoaded', checkResources);
|
|
</script>
|
|
</body>
|
|
</html> |