691
1
<!DOCTYPE html>
<html lang="zh" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>FlowLoss-实时网络质量监测专家</title>
<meta name="keywords" content="IP查询,IP归属查询,在线测速,网速测试,多地IP查询,流量杀手网页,流量杀手在线">
<meta name="description" content="测试您的网速，多地查询您的IP地址，同时具备网络延迟实时检测">
<meta http-equiv="Cache-Control" content="no-store" />
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind主题 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF82AB', // 主色调
secondary: '#FFB6C1', // 辅助色
accent: '#FF69B4', // 强调色
light: '#FFF0F5', // 浅色背景
dark: '#DB7093', // 深色文本
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(255, 130, 171, 0.1), 0 4px 6px -2px rgba(255, 130, 171, 0.05);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(255, 130, 171, 0.2), 0 10px 10px -5px rgba(255, 130, 171, 0.1);
}
.btn-primary {
@apply bg-primary text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-accent hover:shadow-lg transform hover:-translate-y-1;
}
.btn-outline {
@apply border border-primary text-primary font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-lg transform hover:-translate-y-1;
}
.input-field {
@apply border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-300;
}
.select-field {
@apply border border-gray-300 rounded-lg px-4 py-2 appearance-none bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-300;
}
/* 自定义滑动条样式 */
.slider-container {
@apply w-full mt-4;
}
.slider-track {
@apply h-2 bg-gray-200 rounded-full relative;
}
.slider-range {
@apply absolute h-full rounded-full bg-gradient-to-r from-primary to-accent;
}
.slider-thumb {
@apply absolute top-1/2 w-6 h-6 bg-white rounded-full shadow-md transform -translate-y-1/2 cursor-pointer;
@apply border-2 border-primary transition-all duration-200;
}
.slider-thumb:hover {
@apply w-7 h-7 shadow-lg;
}
.slider-thumb:active {
@apply w-6 h-6 shadow-md;
}
.slider-marks {
@apply flex justify-between mt-2 text-xs text-gray-500;
}
.slider-mark {
@apply relative;
}
.slider-mark::after {
@apply absolute -top-1 left-1/2 transform -translate-x-1/2 w-px h-2 bg-gray-300 content-[''];
}
.slider-value {
@apply text-center mt-2 text-primary font-medium;
}
}
</style>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<meta itemprop="image" content="./favicon.ico" />
<meta name="sharecontent" data-msg-img="./favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="./favicon.ico">
</head>
<body class="bg-light font-sans text-dark">
<!-- wrap @s -->
<div class="nk-wrap min-h-screen flex flex-col">
<!-- main header @s -->
<header class="nk-header bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<div class="nk-header-brand">
<a href="#" class="flex items-center text-xl font-bold text-primary">
<span class="fa fa-bolt mr-2"></span>
FlowLoss-实时网络质量监测专家
</a>
</div>
<!-- .nk-header-brand -->
<div class="nk-header-tools">
<!-- Menu -->
<ul class="flex items-center space-x-4">
<li>
<a href="../" class="flex items-center text-gray-600 hover:text-primary transition-colors duration-300">
<span class="fa fa-home mr-1"></span>
<span>首页</span>
</a>
</li>
</ul>
</div>
<!-- .nk-header-tools -->
</div>
<!-- .nk-header-wrap -->
</div>
<!-- .container-fliud -->
</header>
<!-- main header @e -->
<!-- content @s -->
<main class="nk-content flex-grow py-8">
<div id="app" class="container mx-auto px-4">
<div class="max-w-3xl mx-auto">
<!-- 主卡片 -->
<div class="card-preview bg-white rounded-2xl shadow-lg overflow-hidden card-shadow transition-all duration-500 hover:shadow-xl">
<div class="p-6">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-3">
<span class="fa fa-tachometer text-primary text-xl"></span>
</div>
<h2 class="text-2xl font-bold text-gray-800">网络速度测试</h2>
</div>
<!-- 表单区域 -->
<form class="space-y-5">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">测试地址</label>
<select id="select" class="select-field w-full" onchange="handleTestAddressChange(this)">
<option value="" id="diy">自定义</option>
<option selected="selected" value="https://jx3wbl.xoyocdn.com/js/chunk/common.7fa74db4.js">金山云cdn，可以跑满500+</option>
<option value="https://cbg-static.huawei.com/s3/xui.4.1.60.min.js">华为云，只能跑满200M，但是很稳定</option>
</select>
<div id="custom-address-container" class="mt-2 hidden">
<input type="text" id="link" placeholder="请输入自定义下载链接" autocomplete="off" class="input-field w-full">
</div>
</div>
<!-- 线程滑动条 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">线程数</label>
<div class="slider-container">
<div class="slider-track" id="slider-track">
<div class="slider-range" id="slider-range"></div>
<div class="slider-thumb" id="slider-thumb"></div>
</div>
<div class="slider-marks">
<span class="slider-mark">1</span>
<span class="slider-mark">8</span>
<span class="slider-mark">16</span>
<span class="slider-mark">24</span>
<span class="slider-mark">32</span>
</div>
<div class="slider-value" id="slider-value">1</div>
<input type="hidden" id="thread" value="1" min="1" max="32">
</div>
</div>
<div class="flex items-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="customSwitch2" class="sr-only peer" onclick="musiccontrol(this)">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
<span class="ml-2 text-sm font-medium text-gray-700">保持后台运行</span>
</label>
</div>
<button onclick="botton_clicked();" type="button" id="do" class="btn-primary w-full flex items-center justify-center">
<span class="fa fa-play-circle mr-2"></span>
开始测试
</button>
</form>
<!-- 统计数据 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
<div class="stat-card bg-white rounded-xl p-5 border border-gray-100 hover:border-primary/30" onclick='inputMax=prompt("请输入流量上限(GB)\n不填为不设置上限","");if(inputMax !== null)setMax(inputMax)'>
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 mb-1">总流量<a id="showMax"></a></p>
<p class="text-2xl font-bold text-gray-800" id="total">-</p>
</div>
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
<span class="fa fa-tint text-primary"></span>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl p-5 border border-gray-100 hover:border-primary/30">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 mb-1" id="describe">实时速度</p>
<p class="text-2xl font-bold text-primary" id="speed">-</p>
</div>
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
<span class="fa fa-bolt text-primary"></span>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl p-5 border border-gray-100 hover:border-primary/30">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 mb-1">带宽</p>
<p class="text-2xl font-bold text-gray-800" id="mbps">-</p>
</div>
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
<span class="fa fa-wifi text-primary"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- IP信息卡片 -->
<div class="card-preview bg-white rounded-2xl shadow-lg overflow-hidden mt-6 card-shadow transition-all duration-500 hover:shadow-xl">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
<span class="fa fa-map-marker text-primary"></span>
</div>
<h3 class="text-xl font-bold text-gray-800">出口地址</h3>
</div>
<div class="space-y-3">
<div class="p-4 bg-gray-50 rounded-lg flex justify-between items-center">
<div class="flex items-center">
<span class="fa fa-globe text-primary mr-2"></span>
<span id="ipcn" class="text-gray-700">Loading...</span>
</div>
<span id="laycn" class="text-primary">-ms</span>
</div>
<div class="p-4 bg-gray-50 rounded-lg flex justify-between items-center">
<div class="flex items-center">
<span class="fa fa-server text-primary mr-2"></span>
<span id="ipgb" class="text-gray-700">Loading...</span>
</div>
<span id="laygb" class="text-primary">-ms</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- content @e -->
<!-- footer @e -->
<footer class="nk-footer bg-white py-6 border-t border-gray-100">
<div class="container mx-auto px-4">
<div class="text-center text-gray-500 text-sm">
© 2025 <a href="https://youyi.si" class="text-primary hover:underline">有意思</a>
</div>
</div>
</footer>
<!-- footer @e -->
</div>
<!-- wrap @e -->
<audio controls id="music" loop="loop" style="display:none">
<source src="res/background.mp3" type="audio/mpeg">
</audio>
<script>
// 禁用双击放大(防止按加减按钮误触)
var lastTouchEnd = 0;
if (!!('ontouchstart' in window || navigator.maxTouchPoints)) {
document.documentElement.addEventListener(
'touchend',
function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},
{
passive: false
}
);
}
// 测试地址选择变化处理
function handleTestAddressChange(select) {
const customContainer = document.getElementById('custom-address-container');
const linkInput = document.getElementById('link');
if (select.selectedIndex === 0) { // 选择了"自定义"
customContainer.classList.remove('hidden');
linkInput.value = getCookie("diy") || '';
linkInput.focus();
} else {
customContainer.classList.add('hidden');
linkInput.value = select.options[select.selectedIndex].value;
}
setCookie('select', select.selectedIndex, 365);
setCookie('diy', linkInput.value, 365);
}
// 滑动条功能实现
document.addEventListener('DOMContentLoaded', function() {
// 初始化测试地址选择
const select = document.getElementById('select');
if (getCookie("select")) {
select.selectedIndex = getCookie("select");
}
handleTestAddressChange(select);
// 自定义输入变化时保存
document.getElementById('link').addEventListener('input', function() {
setCookie('diy', this.value, 365);
});
// 滑动条初始化
const sliderTrack = document.getElementById('slider-track');
const sliderThumb = document.getElementById('slider-thumb');
const sliderRange = document.getElementById('slider-range');
const sliderValue = document.getElementById('slider-value');
const threadInput = document.getElementById('thread');
let isDragging = false;
const min = 1;
const max = 32;
// 初始化滑动条位置
updateSlider(threadInput.value);
// 鼠标/触摸事件
sliderThumb.addEventListener('mousedown', startDrag);
sliderTrack.addEventListener('click', handleTrackClick);
// 触摸屏支持
sliderThumb.addEventListener('touchstart', startDrag);
sliderTrack.addEventListener('touchstart', handleTrackClick);
document.addEventListener('mousemove', handleDrag);
document.addEventListener('touchmove', handleDrag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchend', endDrag);
function startDrag(e) {
e.preventDefault();
isDragging = true;
sliderThumb.classList.add('ring-2', 'ring-primary/50');
}
function handleDrag(e) {
if (!isDragging) return;
e.preventDefault();
const trackRect = sliderTrack.getBoundingClientRect();
let clientX;
if (e.type.includes('touch')) {
clientX = e.touches[0].clientX;
} else {
clientX = e.clientX;
}
let position = clientX - trackRect.left;
position = Math.max(0, Math.min(position, trackRect.width));
const percent = position / trackRect.width;
const value = Math.round(min + percent * (max - min));
updateSlider(value);
}
function endDrag() {
isDragging = false;
sliderThumb.classList.remove('ring-2', 'ring-primary/50');
}
function handleTrackClick(e) {
const trackRect = sliderTrack.getBoundingClientRect();
let clientX;
if (e.type.includes('touch')) {
clientX = e.touches[0].clientX;
} else {
clientX = e.clientX;
}
const position = clientX - trackRect.left;
const percent = position / trackRect.width;
const value = Math.round(min + percent * (max - min));
updateSlider(value);
}
function updateSlider(value) {
const percent = (value - min) / (max - min) * 100;
sliderThumb.style.left = `${percent}%`;
sliderRange.style.width = `${percent}%`;
sliderValue.textContent = value;
threadInput.value = value;
}
});
function show(num, des, flo) {
var cnum = num;
var total_index = 0;
while (cnum >= 1024) {
if (total_index == des.length - 1) break;
cnum = cnum / 1024;
total_index++;
}
return cnum.toFixed(flo[total_index]) + des[total_index];
}
function musiccontrol(botton) {
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
if (document.getElementById("customSwitch2").checked) document.getElementById("music").play();
else document.getElementById("music").pause();
}
}
document.getElementById("music").addEventListener("pause", function () {
document.title = '网络面板';
if (run && !visibl) botton_clicked();
document.getElementById("customSwitch2").checked = false;
});
document.getElementById("music").addEventListener("play", function () {
if (!(run || visibl)) botton_clicked();
document.getElementById("customSwitch2").checked = true;
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
document.getElementById('diy').value = getCookie("diy");
if (getCookie("select")) document.getElementById('select').selectedIndex = getCookie("select");
var selector = document.getElementById("select");
document.getElementById('link').value = selector.options[selector.selectedIndex].value;
var Maximum = 0;
setMax(getCookie('Max'));
function setMax(inputMax) {
if (inputMax > 0) {
setCookie("Max", inputMax, 365);
Maximum = inputMax * 1073741824;
document.getElementById("showMax").innerText = '/' + show(Maximum, ['B', 'KB', 'MB', 'GB', 'TB', 'PB'], [0, 0, 1, 2, 2, 2]);
} else {
Maximum = 0;
document.getElementById("showMax").innerText = '';
setCookie("Max", 0, 365);
}
}
// 页面滚动时调整导航栏样式
window.addEventListener('scroll', function() {
const header = document.querySelector('.nk-header');
if (window.scrollY > 10) {
header.classList.add('py-2', 'shadow-lg');
header.classList.remove('py-3', 'shadow-md');
} else {
header.classList.add('py-3', 'shadow-md');
header.classList.remove('py-2', 'shadow-lg');
}
});
</script>
<script src='https://flowloss.net/main.js'></script>
</body>
</html>
这家伙太懒了，什么也没留下。
