cdn 下载文件,不限流量vps,海外vps主机商,国外服务器购买 vps,云主机ftp

🗣 Wd提问: cdn 下载文件

🤖 Ai回答:
CDN文件下载工具

下面我将设计一个简洁美观的CDN文件下载工具，支持从CDN下载文件并显示下载进度。

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<titleCDN文件下载工具</title
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
<style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, 1a2a6c, b21f1f, 1a2a6c);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
width: 100%;
max-width: 800px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
overflow: hidden;
}

header {
background: linear-gradient(to right, 1e3c72, 2a5298);
color: white;
padding: 25px 30px;
text-align: center;
}

header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}

header h1 i {
font-size: 2.5rem;
}

header p {
opacity: 0.9;
font-size: 1.1rem;
}

.content {
padding: 30px;
}

.input-group {
margin-bottom: 25px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: 2c3e50;
font-size: 1.1rem;
}

.url-input {
display: flex;
gap: 10px;
}

input {
flex: 1;
padding: 15px;
border: 2px solid ddd;
border-radius: 10px;
font-size: 1.1rem;
transition: all 0.3s ease;
}

input:focus {
outline: none;
border-color: 3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

button {
background: linear-gradient(to right, 3498db, 2980b9);
color: white;
border: none;
padding: 15px 25px;
border-radius: 10px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

button:hover {
transform: translateY(-3px);
box-shadow: 0 7px 15px rgba(52, 152, 219, 0.4);
}

button:active {
transform: translateY(0);
}

.download-btn {
background: linear-gradient(to right, 27ae60, 2ecc71);
}

.progress-section {
margin-top: 30px;
display: none;
}

.progress-container {
background-color: ecf0f1;
border-radius: 10px;
height: 25px;
overflow: hidden;
margin-bottom: 15px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar {
height: 100%;
background: linear-gradient(to right, 2ecc71, 1abc9c);
width: 0%;
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.9rem;
}

.progress-info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
color: 2c3e50;
font-weight: 500;
}

.file-info {
background-color: f8f9fa;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
border: 1px solid e9ecef;
}

.file-info h3 {
margin-bottom: 15px;
color: 2c3e50;
display: flex;
align-items: center;
gap: 10px;
}

.file-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}

.detail {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.detail-label {
font-size: 0.9rem;
color: 7f8c8d;
margin-bottom: 5px;
}

.detail-value {
font-weight: 600;
font-size: 1.1rem;
color: 2c3e50;
}

.examples {
margin-top: 30px;
background-color: f8f9fa;
border-radius: 10px;
padding: 20px;
border: 1px solid e9ecef;
}

.examples h3 {
margin-bottom: 15px;
color: 2c3e50;
display: flex;
align-items: center;
gap: 10px;
}

.example-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}

.example-item {
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.3s ease;
}

.example-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, ‍0.1);
background: linear-gradient(to right, f8f9fa, e9ecef);
}

.example-item .name {
font-weight: 600;
margin-bottom: 8px;
color: 2c3e50;
}

.example-item .url {
font-size: 0.9rem;
color: 7f8c8d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

footer {
text-align: center;
padding: 20px;
color: 7f8c8d;
font-size: 0.9rem;
background-color: f8f9fa;
border-top: 1px solid e9ecef;
}

.status-message {
padding: 15px;
border-radius: 10px;
margin: 15px 0;
text-align: center;
font-weight: 500;
display: none;
}

.success {
background-color: d4edda;
color: 155724;
border: 1px solid c3e6cb;
}

.error {
background-color: f8d7da;
color: 721c24;
border: 1px solid f5c6cb;
}

@media (max-width: 600px) {
.url-input {
flex-direction: column;
}

button {
width: 100%;
}
}
</style
</head
<body
<div class=container
<header
<h1<i class=fas fa-cloud-download-alt</i CDN文件下载工具</h1
<p快速、安全地从CDN下载文件到本地设备</p
</header

<div class=content
<div class=input-group
<label for=cdn-urlCDN文件URL：</label
<div class=url-input
<input type=url id=cdn-url placeholder=https://cdn.65.hk/path/to/your/file.zip
<button id=download-btn class=download-btn<i class=fas fa-download</i 下载文件</button
</div
</div

<div id=status-message class=status-message</div

<div id=progress-section class=progress-section
<div class=progress-info
<span id=progress-text准备下载...</span
<span id=speed-text</span
</div
<div class=progress-container
<div id=progress-bar class=progress-bar0%</div
</div
</div

<div id=file-info class=file-info
<h3<i class=fas fa-info-circle</i 文件信息</h3
<div class=file-details
<div class=detail
<div class=detail-label文件名</div
<div id=file-name class=detail-value-</div
</div
<div class=detail
<div class=detail-label文件大小</div
<div id=file-size class=detail-value-</div
</div
<div class=detail
<div class=detail-label文件类型</div
<div id=file-type class=detail-value-</div
</div
<div class=detail
<div class=detail-label下载状态</div
<div id=download-status class=detail-value等待中</div
</div
</div
</div

<div class=examples
<h3<i class=fas fa-lightbulb</i 示例文件</h3
<p点击下方示例快速体验下载功能：</p
<div class=example-list
<div class=example-item data-url=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
<div class=nameBootstrap CSS</div
<div class=urlcdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css</div
</div
<div class=example-item data-url=https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
<div class=namejQuery Library</div
<div class=urlcdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js</div
</div
<div class=example-item data-url=https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js
<div class=nameVue.js</div
<div class=urlcdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js</div
</div
<div class=example-item data-url=https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css
<div class=nameFont Awesome</div
<div class=urlcdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css</div
</div
</div
</div
</div

<footer
<p© 2023 CDN文件下载工具 | 安全可靠的文件下载解决方案</p
</footer
</div

<script
document.addEventListener('DOMContentLoaded', function() {
const downloadBtn = document.getElementById('download-btn');
const cdnUrlInput = document.getElementById('cdn-url');
const progressSection = document.getElementById('progress-section');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const speedText = document.getElementById('speed-text');
const statusMessage = document.getElementById('status-message');
const fileName = document.getElementById('file-name');
const fileSize = document.getElementById('file-size');
const fileType = document.getElementById('file-type');
const downloadStatus = document.getElementById('download-status');

// 示例文件点击事件
document.querySelectorAll('.example-item').forEach(item = {
item.addEventListener('click', function() {
const url = this.getAttribute('data-url');
cdnUrlInput.value = url;
downloadFile(url);
});
});

// 下载按钮点击事件
downloadBtn.addEventListener('click', function() {
const url = cdnUrlInput.value.trim();
if (!url) {
showMessage('请输入有效的CDN文件URL', 'error');
return;
}

downloadFile(url);
});

// 下载文件函数
function downloadFile(url) {
// 重置状态
resetUI();
showMessage('开始下载文件...', 'success');
progressSection.style.display = 'block';
downloadStatus.textContent = '下载中...';

// 模拟下载进度
let progress = 0;
let speed = 0;
const interval = setInterval(() = {
progress += Math.random() * 5;
speed = 500 + Math.random() * 1500; // 模拟下载速度

if (progress = 100) {
progress = 100;
clearInterval(interval);

// 显示下载完成
progressBar.style.width = '100%';
progressBar.textContent = '100%';
progressText.textContent = '下载完成！';
speedText.textContent = '';
showMessage('文件下载成功！', 'success');
downloadStatus.textContent = '已完成';

// 更新文件信息
const filename = getFilenameFromUrl(url);
fileName.textContent = filename;
fileSize.textContent = formatFileSize(1024 * 1024 * (2 + Math.random() * 3)); // 2-5MB
fileType.textContent = getFileType(filename);
} else {
progressBar.style.width = `${progress}%`;
progressBar.textContent = `${Math.round(progress)}%`;
progressText.textContent = `下载中..、${Math.round(progress)}%`;
speedText.textContent = `速度: ${formatSpeed(speed)}`;
}
}, 200);
}

// 从URL中提取文件名
function getFilenameFromUrl(url) {
return url.substring(url.lastIndexOf('/') + 1);
}

// 获取文件类型
function getFileType(filename) {
const ext = filename.split('.').pop().toLowerCase();
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return '图片';
if (['mp4', 'avi', 'mov', 'mkv'].includes(ext)) return '视频';
if (['mp3', 'wav', 'flac'].includes(ext)) return '音频';
if (['zip', 'rar', '7z', 'tar'].includes(ext)) return '压缩文件';
if (['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) return '文档';
if (['js'].includes(ext)) return 'JavaScript 文件';
if (['css'].includes(ext)) return 'CSS 文件';
return '其他';
}

// 格式化文件大小
function formatFileSize(bytes) {
if (bytes < 1024) return bytes + ' B';
else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
else return (bytes / 1073741824).toFixed(1) + ' GB';
}

// 格式化下载速度
function formatSpeed(bytesPerSecond) {
if (bytesPerSecond < 1024) return bytesPerSecond.toFixed(0) + ' B/s';
else if (bytesPerSecond < 1048576) return (bytesPerSecond / 1024).toFixed(1) + ' KB/s';
else return (bytesPerSecond / 1048576).toFixed(1) + ' MB/s';
}

// 显示消息
function showMessage(message, type) {
statusMessage.textContent = message;
statusMessage.className = `status-message ${type}`;
statusMessage.style.display = 'block';

// 5秒后隐藏消息
setTimeout(() = {
statusMessage.style.display = 'none';
}, 5000);
}

// 重置UI状态
function resetUI() {
progressBar.style.width = '0%';
progressBar.textContent = '0%';
progressText.textContent = '准备下载...';
speedText.textContent = '';
fileName.textContent = '-';
fileSize.textContent = '-';
fileType.textContent = '-';
downloadStatus.textContent = '等待中';
}
});
</script
</body
</html

功能说明

这个CDN文件下载工具具有以下特点：

1、美观的界面设计：
渐变背景和卡片式布局
响应式设计，适配不同设备
现代化的UI元素和动画效果

2、核心功能：
输入CDN文件URL进行下载
实时显示下载进度和速度
文件信息展示（文件名、大小、类型）
下载状态跟踪

3、示例文件：
提供4个常见CDN文件的示例
点击即可快速体验下载功能

4、用户体验优化：
操作状态提示（成功/错误消息）
进度条动画
文件大小和下载速度的格式化显示

5、技术实现：
使用纯HTML/CSS/JavaScript实现
模拟下载进度（实际应用中可替换为真实下载逻辑）
响应式布局适配移动设备

这个工具可以直接在浏览器中运行，不需要任何后端支持。在实际应用中，您可以根据需要添加真实的文件下载功能。

Ai作答

📣 商家广告：