Skip to content

Commit c83091a

Browse files
CommandstoneCommandstone
authored
Create ht.html
1 parent 463928c commit c83091a

File tree

1 file changed

+214
-0
lines changed

1 file changed

+214
-0
lines changed

‎denlu/ht.html‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="zh-CN">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>IP追踪系统</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
font-family: 'Courier New', monospace;
14+
}
15+
body {
16+
background: #000;
17+
color: #0f0;
18+
overflow: hidden;
19+
height: 100vh;
20+
}
21+
#matrix {
22+
position: fixed;
23+
top: 0;
24+
left: 0;
25+
z-index: 0;
26+
opacity: 0.1;
27+
}
28+
.container {
29+
position: relative;
30+
z-index: 1;
31+
width: 90%;
32+
max-width: 1200px;
33+
margin: 0 auto;
34+
padding: 20px;
35+
}
36+
header {
37+
padding: 20px 0;
38+
border-bottom: 1px solid #0f0;
39+
margin-bottom: 30px;
40+
text-align: center;
41+
}
42+
.ip-display {
43+
background: rgba(0, 0, 0, 0.8);
44+
border: 1px solid #0f0;
45+
padding: 30px;
46+
margin-top: 30px;
47+
}
48+
table {
49+
width: 100%;
50+
border-collapse: collapse;
51+
margin-top: 20px;
52+
}
53+
th, td {
54+
border: 1px solid #0f0;
55+
padding: 12px;
56+
text-align: left;
57+
}
58+
th {
59+
background: rgba(0, 255, 0, 0.1);
60+
}
61+
.refresh-btn {
62+
background: transparent;
63+
color: #0f0;
64+
border: 1px solid #0f0;
65+
padding: 10px 20px;
66+
margin-top: 20px;
67+
cursor: pointer;
68+
transition: all 0.3s;
69+
}
70+
.refresh-btn:hover {
71+
background: #0f0;
72+
color: #000;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<canvas id="matrix"></canvas>
78+
79+
<div class="container">
80+
<header>
81+
<h1>IP追踪</h1>
82+
<p>当前服务器时间: <span id="server-time"></span></p>
83+
</header>
84+
85+
<div class="ip-display">
86+
<h2>您的IP信息</h2>
87+
<div id="current-ip"></div>
88+
89+
<h2 style="margin-top: 30px;">访问记录</h2>
90+
<table id="ip-table">
91+
<thead>
92+
<tr>
93+
<th>序号</th>
94+
<th>IP地址</th>
95+
<th>访问时间</th>
96+
<th>用户代理</th>
97+
</tr>
98+
</thead>
99+
<tbody id="ip-list">
100+
</tbody>
101+
</table>
102+
<button class="refresh-btn" onclick="fetchIPs()">刷新数据</button>
103+
</div>
104+
</div>
105+
106+
<script>
107+
// 代码雨背景
108+
const canvas = document.getElementById('matrix');
109+
const ctx = canvas.getContext('2d');
110+
111+
function initMatrix() {
112+
canvas.width = window.innerWidth;
113+
canvas.height = window.innerHeight;
114+
115+
const chars = "01";
116+
const fontSize = 14;
117+
const columns = canvas.width / fontSize;
118+
const drops = Array(Math.floor(columns)).fill(0);
119+
120+
function draw() {
121+
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
122+
ctx.fillRect(0, 0, canvas.width, canvas.height);
123+
ctx.fillStyle = '#0f0';
124+
ctx.font = fontSize + 'px monospace';
125+
126+
for (let i = 0; i < drops.length; i++) {
127+
const text = chars[Math.floor(Math.random() * chars.length)];
128+
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
129+
130+
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
131+
drops[i] = 0;
132+
}
133+
drops[i]++;
134+
}
135+
requestAnimationFrame(draw);
136+
}
137+
138+
window.addEventListener('resize', () => {
139+
canvas.width = window.innerWidth;
140+
canvas.height = window.innerHeight;
141+
});
142+
143+
draw();
144+
}
145+
146+
// IP记录功能
147+
let ipRecords = JSON.parse(localStorage.getItem('ipRecords')) || [];
148+
149+
function getClientIP() {
150+
// 实际部署时应从服务器获取真实IP
151+
// 这里使用模拟数据演示
152+
return {
153+
ip: '192.168.' + Math.floor(Math.random() * 255) + '.' + Math.floor(Math.random() * 255),
154+
timestamp: new Date().toLocaleString(),
155+
userAgent: navigator.userAgent
156+
};
157+
}
158+
159+
function recordIP() {
160+
const ipInfo = getClientIP();
161+
document.getElementById('current-ip').innerHTML = `
162+
<p>IP地址: ${ipInfo.ip}</p>
163+
<p>访问时间: ${ipInfo.timestamp}</p>
164+
<p>浏览器信息: ${ipInfo.userAgent}</p>
165+
`;
166+
167+
// 添加到记录
168+
ipRecords.unshift(ipInfo);
169+
170+
// 保持最多100条记录
171+
if (ipRecords.length > 20) {
172+
ipRecords = ipRecords.slice(0, 100);
173+
}
174+
175+
// 保存到本地存储
176+
localStorage.setItem('ipRecords', JSON.stringify(ipRecords));
177+
178+
// 更新显示
179+
updateIPTable();
180+
}
181+
182+
function updateIPTable() {
183+
const tbody = document.getElementById('ip-list');
184+
tbody.innerHTML = '';
185+
186+
ipRecords.forEach((record, index) => {
187+
const row = document.createElement('tr');
188+
row.innerHTML = `
189+
<td>${index + 1}</td>
190+
<td>${record.ip}</td>
191+
<td>${record.timestamp}</td>
192+
<td>${record.userAgent.substring(0, 50)}...</td>
193+
`;
194+
tbody.appendChild(row);
195+
});
196+
}
197+
198+
function fetchIPs() {
199+
recordIP(); // 模拟获取新数据
200+
}
201+
202+
// 更新时间显示
203+
function updateTime() {
204+
document.getElementById('server-time').textContent = new Date().toLocaleString();
205+
setTimeout(updateTime, 1000);
206+
}
207+
208+
// 初始化
209+
initMatrix();
210+
updateTime();
211+
recordIP();
212+
</script>
213+
</body>
214+
</html>

0 commit comments

Comments
 (0)