高位端口生成器
青枫
4月13日
一个使用 AI 写的小玩具
在线体验：port.vdj.me
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高位端口生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.port-display {
font-family: 'Courier New', monospace;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.port-display:hover {
transform: scale(1.05);
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6e8efb;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.range-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6e8efb;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.glow {
box-shadow: 0 0 15px rgba(110, 142, 251, 0.5);
}
.copy-btn {
transition: all 0.2s ease;
}
.copy-btn:hover {
transform: translateY(-2px);
}
.copy-btn:active {
transform: translateY(0);
}
</style>
</head>
<body class="min-h-screen gradient-bg flex flex-col items-center justify-center p-4">
<div class="w-full max-w-md bg-white rounded-xl shadow-2xl overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-800">
<i class="fas fa-network-wired mr-2 text-purple-600"></i>
高位端口生成器
</h1>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
<i class="fas fa-random text-purple-600"></i>
</div>
</div>
<div class="mb-8">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-gray-600">端口范围: 50000-65535</span>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">高位端口</span>
</div>
<div class="relative">
<input type="range" min="50000" max="65535" value="50000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider" id="portRange">
</div>
</div>
<div class="bg-gray-50 rounded-lg p-6 mb-6 text-center glow transition-all duration-300">
<p class="text-sm text-gray-500 mb-1">您的随机高位端口</p>
<div class="port-display text-5xl font-bold text-purple-600 mb-2" id="generatedPort">50000</div>
<div class="flex justify-center space-x-2">
<button id="copyBtn" class="copy-btn bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-copy mr-2"></i>
复制
</button>
<button id="generateBtn" class="copy-btn bg-white border border-purple-600 text-purple-600 hover:bg-purple-50 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-sync-alt mr-2"></i>
生成
</button>
</div>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<i class="fas fa-info-circle text-purple-500"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-purple-800">关于高位端口</h3>
<div class="mt-1 text-sm text-purple-700">
<p>端口50000-65535属于动态/私有范围，非常适合临时连接，可以避免与知名端口冲突。</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-100 px-6 py-4">
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">为开发者用心制作 <i class="fas fa-heart text-red-500"></i></span>
<button id="generateMultipleBtn" class="text-xs bg-white hover:bg-gray-200 text-purple-600 px-3 py-1 rounded-full flex items-center">
<i class="fas fa-bolt mr-1"></i>
生成5个端口
</button>
</div>
</div>
</div>
<div id="multiplePortsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-gray-800">已生成多个端口</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-2 mb-4" id="multiplePortsList">
<!-- 端口将插入这里 -->
</div>
<button id="copyAllBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg flex items-center justify-center">
<i class="fas fa-copy mr-2"></i>
全部复制
</button>
</div>
</div>
<div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>端口已复制到剪贴板！</span>
</div>
<script>
// DOM 元素
const generateBtn = document.getElementById('generateBtn');
const copyBtn = document.getElementById('copyBtn');
const generatedPort = document.getElementById('generatedPort');
const portRange = document.getElementById('portRange');
const generateMultipleBtn = document.getElementById('generateMultipleBtn');
const multiplePortsModal = document.getElementById('multiplePortsModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const multiplePortsList = document.getElementById('multiplePortsList');
const copyAllBtn = document.getElementById('copyAllBtn');
const toast = document.getElementById('toast');
// 生成50000-65535之间的随机端口
function generateRandomPort() {
const min = 50000;
const max = 65535;
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 更新显示新的端口
function updatePortDisplay() {
const newPort = generateRandomPort();
generatedPort.textContent = newPort;
portRange.value = newPort;
// 添加动画
generatedPort.classList.add('animate-pulse');
setTimeout(() => {
generatedPort.classList.remove('animate-pulse');
}, 300);
}
// 生成多个端口
function generateMultiplePorts(count = 5) {
multiplePortsList.innerHTML = '';
const ports = [];
for (let i = 0; i < count; i++) {
const port = generateRandomPort();
ports.push(port);
const portElement = document.createElement('div');
portElement.className = 'flex justify-between items-center bg-gray-50 p-3 rounded-lg';
portElement.innerHTML = `
<span class="font-mono text-purple-600">${port}</span>
<button class="copy-single-btn text-sm bg-white border border-purple-200 text-purple-600 hover:bg-purple-50 px-3 py-1 rounded-full" data-port="${port}">
<i class="fas fa-copy mr-1"></i> 复制
</button>
`;
multiplePortsList.appendChild(portElement);
}
// 为新按钮添加事件监听
document.querySelectorAll('.copy-single-btn').forEach(btn => {
btn.addEventListener('click', function() {
const portToCopy = this.getAttribute('data-port');
navigator.clipboard.writeText(portToCopy);
showToast(`端口 ${portToCopy} 已复制！`);
});
});
// 存储端口以便全部复制功能
copyAllBtn.setAttribute('data-ports', ports.join(', '));
// 显示模态框
multiplePortsModal.classList.remove('hidden');
}
// 显示通知
function showToast(message) {
if (message) {
toast.querySelector('span').textContent = message;
}
toast.classList.remove('hidden');
setTimeout(() => {
toast.classList.add('hidden');
}, 3000);
}
// 事件监听
generateBtn.addEventListener('click', updatePortDisplay);
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(generatedPort.textContent);
showToast();
});
portRange.addEventListener('input', () => {
generatedPort.textContent = portRange.value;
});
generateMultipleBtn.addEventListener('click', () => generateMultiplePorts(5));
closeModalBtn.addEventListener('click', () => {
multiplePortsModal.classList.add('hidden');
});
copyAllBtn.addEventListener('click', () => {
const ports = copyAllBtn.getAttribute('data-ports');
navigator.clipboard.writeText(ports);
showToast('所有端口已复制！');
});
// 点击外部关闭模态框
multiplePortsModal.addEventListener('click', (e) => {
if (e.target === multiplePortsModal) {
multiplePortsModal.classList.add('hidden');
}
});
// 初始化随机端口
updatePortDisplay();
</script>
</body>
</html>