|
|

本帖最后由 雨田9527 于 2025-11-18 20:26 编辑
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀英雄战力cha询 - 最新英雄列表</title>
<link rel="stylesheet" >
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
min-height: 100vh;
padding: 20px;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
header {
background: linear-gradient(to right, #e74c3c, #c0392b);
color: white;
padding: 25px 30px;
text-align: center;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
}
.card-content {
display: flex;
flex-wrap: wrap;
}
.query-section {
flex: 1;
min-width: 300px;
padding: 25px;
background: #f8f9fa;
border-right: 1px solid #e9ecef;
}
.result-section {
flex: 2;
min-width: 300px;
padding: 25px;
}
.section-title {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e74c3c;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
color: #e74c3c;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
input, select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
button {
background: linear-gradient(to right, #e74c3c, #c0392b);
color: white;
border: none;
padding: 14px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
transition: all 0.3s;
margin-top: 10px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
}
.loading {
display: none;
text-align: center;
margin: 20px 0;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
border-radius: 50%;
border-left-color: #e74c3c;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.result-area {
min-height: 300px;
}
.placeholder {
text-align: center;
color: #7f8c8d;
padding: 40px 20px;
}
.placeholder i {
font-size: 50px;
margin-bottom: 15px;
color: #bdc3c7;
}
.hero-info {
display: none;
}
.hero-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.hero-avatar {
width: 80px;
height: 80px;
border-radius: 10px;
overflow: hidden;
margin-right: 20px;
border: 3px solid #e74c3c;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #bdc3c7;
font-size: 35px;
}
.hero-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-details {
flex: 1;
}
.hero-name {
font-size: 1.6rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.hero-type {
color: #7f8c8d;
font-size: 1rem;
}
.power-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.power-card {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
text-align: center;
border-left: 4px solid #e74c3c;
}
.power-title {
font-size: 0.9rem;
color: #7f8c8d;
margin-bottom: 5px;
}
.power-value {
font-size: 1.3rem;
color: #e74c3c;
font-weight: 700;
}
.region-stats {
margin-top: 20px;
}
.region-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 15px;
color: #2c3e50;
}
.region-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
max-height: 200px;
overflow-y: auto;
padding: 5px;
}
.region-item {
background: #f8f9fa;
border-radius: 6px;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
.region-name {
font-weight: 500;
}
.region-power {
color: #e74c3c;
font-weight: 600;
}
.error-message {
display: none;
background: #fadbd8;
color: #c0392b;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
border-left: 4px solid #e74c3c;
}
.success-message {
display: none;
background: #d5f4e6;
color: #27ae60;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
border-left: 4px solid #27ae60;
}
.proxy-info {
background: #e8f4fd;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
font-size: 0.9rem;
}
footer {
text-align: center;
color: #7f8c8d;
padding: 20px;
border-top: 1px solid #eee;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.card-content {
flex-direction: column;
}
.query-section {
border-right: none;
border-bottom: 1px solid #e9ecef;
}
h1 {
font-size: 1.8rem;
}
.power-stats {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-crown"></i> 王者荣耀英雄战力cha询</h1>
<p class="subtitle">最新英雄列表版 - 截至2025年11月</p>
</header>
<div class="card-content">
<div class="query-section">
<h2 class="section-title"><i class="fas fa-search"></i> cha询条件</h2>
<div class="form-group">
<label for="heroSelect"><i class="fas fa-user-ninja"></i> 选择英雄</label>
<select id="heroSelect">
<option value="夏侯惇">夏侯惇</option>
<option value="猪八戒">猪八戒</option>
<option value="白起">白起</option>
<option value="廉颇">廉颇</option>
<option value="刘邦">刘邦</option>
<option value="项羽">项羽</option>
<option value="程咬金">程咬金</option>
<option value="刘禅">刘禅</option>
<option value="牛魔">牛魔</option>
<option value="张飞">张飞</option>
<option value="苏烈">苏烈</option>
<option value="盾山">盾山</option>
<option value="阿古朵">阿古朵</option>
<option value="嫦娥">嫦娥</option>
<option value="曹操">曹操</option>
<option value="花木兰">花木兰</option>
<option value="夏洛特">夏洛特</option>
<option value="狂铁">狂铁</option>
<option value="马超">马超</option>
<option value="蒙恬">蒙恬</option>
<option value="姬小满">姬小满</option>
<option value="老夫子">老夫子</option>
<option value="司空震">司空震</option>
<option value="云缨">云缨</option>
<option value="赵云">赵云</option>
<option value="达摩">达摩</option>
<option value="宫本武藏">宫本武藏</option>
<option value="杨戬">杨戬</option>
<option value="吕布">吕布</option>
<option value="亚瑟">亚瑟</option>
<option value="雅典娜">雅典娜</option>
<option value="孙策">孙策</option>
<option value="李信">李信</option>
<option value="盘古">盘古</option>
<option value="凯">凯</option>
<option value="裴擒虎">裴擒虎</option>
<option value="元歌">元歌</option>
<option value="镜">镜</option>
<option value="韩信">韩信</option>
<option value="兰陵王">兰陵王</option>
<option value="李白">李白</option>
<option value="娜可露露">娜可露露</option>
<option value="百里玄策">百里玄策</option>
<option value="橘右京">橘右京</option>
<option value="澜">澜</option>
<option value="暃">暃</option>
<option value="司马懿">司马懿</option>
<option value="阿轲">阿轲</option>
<option value="安琪拉">安琪拉</option>
<option value="妲己">妲己</option>
<option value="嬴政">嬴政</option>
<option value="干将莫邪">干将莫邪</option>
<option value="姜子牙">姜子牙</option>
<option value="王昭君">王昭君</option>
<option value="张良">张良</option>
<option value="女娲">女娲</option>
<option value="周瑜">周瑜</option>
<option value="扁鹊">扁鹊</option>
<option value="高渐离">高渐离</option>
<option value="钟馗">钟馗</option>
<option value="诸葛亮">诸葛亮</option>
<option value="貂蝉">貂蝉</option>
<option value="弈星">弈星</option>
<option value="米莱狄">米莱狄</option>
<option value="沈梦溪">沈梦溪</option>
<option value="上官婉儿">上官婉儿</option>
<option value="西施">西施</option>
<option value="海月">海月</option>
<option value="金蝉">金蝉</option>
<option value="海诺">海诺</option>
<option value="杨玉环">杨玉环</option>
<option value="孙尚香">孙尚香</option>
<option value="鲁班七号">鲁班七号</option>
<option value="后羿">后羿</option>
<option value="狄仁杰">狄仁杰</option>
<option value="虞姬">虞姬</option>
<option value="伽罗">伽罗</option>
<option value="黄忠">黄忠</option>
<option value="百里守约">百里守约</option>
<option value="公孙离">公孙离</option>
<option value="蒙犽">蒙犽</option>
<option value="李元芳">李元芳</option>
<option value="艾琳">艾琳</option>
<option value="戈娅">戈娅</option>
<option value="莱西奥">莱西奥</option>
<option value="庄周">庄周</option>
<option value="鬼谷子">鬼谷子</option>
<option value="大乔">大乔</option>
<option value="明世隐">明世隐</option>
<option value="孙膑">孙膑</option>
<option value="瑶">瑶</option>
<option value="鲁班大师">鲁班大师</option>
<option value="蔡文姬">蔡文姬</option>
<option value="太乙真人">太乙真人</option>
<option value="桑启">桑启</option>
<option value="朵莉亚">朵莉亚</option>
<option value="钟无艳">钟无艳</option>
<option value="东皇太一">东皇太一</option>
<option value="元流之子">元流之子</option>
</select>
</div>
<div class="form-group">
<label for="serverType"><i class="fas fa-server"></i> 区服类型</label>
<select id="serverType">
<option value="aqq">安卓QQ区</option>
<option value="awx">安卓VX区</option>
<option value="iqq">苹果QQ区</option>
<option value="iwx">苹果VX区</option>
</select>
</div>
<div class="proxy-info">
<p><i class="fas fa-info-circle"></i> 使用稳定的代理服务器解决跨域问题</p>
</div>
<button id="queryBtn"><i class="fas fa-play"></i> 开始cha询</button>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>正在cha询中,请稍候...</p>
</div>
<div class="success-message" id="successMessage">
<i class="fas fa-check-circle"></i> <span id="successText">cha询成功!</span>
</div>
</div>
<div class="result-section">
<h2 class="section-title"><i class="fas fa-chart-bar"></i> cha询结果</h2>
<div class="result-area">
<div class="placeholder" id="placeholder">
<i class="fas fa-user-circle"></i>
<p>请选择英雄和区服类型,然后点击cha询按钮</p>
</div>
<div class="hero-info" id="heroInfo">
<div class="hero-header">
<div class="hero-avatar">
<i class="fas fa-user-ninja" id="heroIcon"></i>
<img id="heroPhoto" src="" alt="英雄头像" style="display: none;">
</div>
<div class="hero-details">
<div class="hero-name" id="heroName">英雄名称</div>
<div class="hero-type" id="heroType">英雄类型</div>
<div>英雄ID: <span id="heroId">-</span></div>
</div>
</div>
<div class="power-stats">
<div class="power-card">
<div class="power-title">国服前十战力要求</div>
<div class="power-value" id="top10Power">-</div>
</div>
<div class="power-card">
<div class="power-title">国服前百战力要求</div>
<div class="power-value" id="top100Power">-</div>
</div>
<div class="power-card">
<div class="power-title">更新时间</div>
<div class="power-value" id="updateTime">-</div>
</div>
</div>
<div class="region-stats">
<div class="region-title">省级战力要求</div>
<div class="region-list" id="provinceList">
<!-- 省级数据将通过JavaScript动态生成 -->
</div>
</div>
<div class="region-stats">
<div class="region-title">市级战力要求</div>
<div class="region-list" id="cityList">
<!-- 市级数据将通过JavaScript动态生成 -->
</div>
</div>
<div class="region-stats">
<div class="region-title">区县级战力要求</div>
<div class="region-list" id="countyList">
<!-- 区县级数据将通过JavaScript动态生成 -->
</div>
</div>
</div>
<div class="error-message" id="errorMessage">
<i class="fas fa-exclamation-triangle"></i> <span id="errorText">cha询失败,请检查网络连接或稍后重试</span>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 王者荣耀英雄战力cha询工具 | 最新英雄列表版 - 截至2025年11月</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const queryBtn = document.getElementById('queryBtn');
const heroSelect = document.getElementById('heroSelect');
const serverType = document.getElementById('serverType');
const loading = document.getElementById('loading');
const placeholder = document.getElementById('placeholder');
const heroInfo = document.getElementById('heroInfo');
const errorMessage = document.getElementById('errorMessage');
const successMessage = document.getElementById('successMessage');
const heroName = document.getElementById('heroName');
const heroType = document.getElementById('heroType');
const heroId = document.getElementById('heroId');
const heroPhoto = document.getElementById('heroPhoto');
const heroIcon = document.getElementById('heroIcon');
const top10Power = document.getElementById('top10Power');
const top100Power = document.getElementById('top100Power');
const updateTime = document.getElementById('updateTime');
const provinceList = document.getElementById('provinceList');
const cityList = document.getElementById('cityList');
const countyList = document.getElementById('countyList');
const errorText = document.getElementById('errorText');
const successText = document.getElementById('successText');
// 英雄下拉框按首字母排序
function sortHeroSelect() {
const select = document.getElementById('heroSelect');
const options = Array.from(select.options);
options.sort((a, b) => {
return a.text.localeCompare(b.text, 'zh-CN');
});
// 清空并重新添加排序后的选项
select.innerHTML = '';
options.forEach(option => {
select.add(option);
});
}
// cha询按钮点击事件
queryBtn.addEventListener('click', function() {
const hero = heroSelect.value;
const type = serverType.value;
// 隐藏结果和错误信息
placeholder.style.display = 'none';
heroInfo.style.display = 'none';
errorMessage.style.display = 'none';
successMessage.style.display = 'none';
// 显示加载动画
loading.style.display = 'block';
// 构建API URL
const apiUrl = `https://api.wzryqz.cn/gethero?hero=${encodeURIComponent(hero)}&type=${type}`;
// 使用稳定的代理服务器
const proxyUrls = [
"https://api.allorigins.win/raw?url=",
"https://cors-anywhere.herokuapp.com/",
"https://api.codetabs.com/v1/proxy?quest="
];
// 尝试使用不同的代理服务器
tryProxies(proxyUrls, apiUrl, 0);
});
// 递归尝试不同的代理服务器
function tryProxies(proxyUrls, apiUrl, index) {
if (index >= proxyUrls.length) {
// 所有代理都失败
loading.style.display = 'none';
errorText.textContent = '所有代理服务器都不可用,请稍后重试或检查网络连接';
errorMessage.style.display = 'block';
return;
}
const proxyUrl = proxyUrls[index] + encodeURIComponent(apiUrl);
fetch(proxyUrl, {
method: 'GET',
headers: {
'Accept': 'application/json',
},
mode: 'cors'
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP错误! 状态: ${response.status}`);
}
return response.json();
})
.then(data => {
// 隐藏加载动画
loading.style.display = 'none';
if (data.code === 200) {
// 显示成功消息
successText.textContent = `cha询成功! (使用代理服务器${index+1})`;
successMessage.style.display = 'block';
// 显示英雄信息
displayHeroData(data.data);
} else {
throw new Error(data.message || 'API返回数据异常');
}
})
.catch(error => {
console.error(`代理服务器${index+1}失败:`, error);
// 尝试下一个代理服务器
tryProxies(proxyUrls, apiUrl, index + 1);
});
}
// 显示英雄数据
function displayHeroData(data) {
// 设置英雄基本信息
heroName.textContent = data.name || '未知';
heroType.textContent = data.hero_type || '未知';
heroId.textContent = data.heroId || '-';
// 尝试加载英雄头像,如果失败则显示图标
if (data.photo) {
heroPhoto.src = data.photo;
heroPhoto.style.display = 'block';
heroIcon.style.display = 'none';
} else {
heroPhoto.style.display = 'none';
heroIcon.style.display = 'block';
}
// 设置战力数据
top10Power.textContent = data.Top10 ? parseInt(data.Top10).toLocaleString() : '-';
top100Power.textContent = data.Top100 ? parseInt(data.Top100).toLocaleString() : '-';
updateTime.textContent = data.updatetime ? data.updatetime.split(' ')[0] : '-';
// 清空地区列表
provinceList.innerHTML = '';
cityList.innerHTML = '';
countyList.innerHTML = '';
// 填充省级数据
if (data.province && data.province.length > 0) {
data.province.forEach(item => {
const regionItem = document.createElement('div');
regionItem.className = 'region-item';
regionItem.innerHTML = `
<span class="region-name">${item.loc}</span>
<span class="region-power">${item.val.toLocaleString()}</span>
`;
provinceList.appendChild(regionItem);
});
} else {
provinceList.innerHTML = '<div class="region-item"><span class="region-name">暂无数据</span></div>';
}
// 填充市级数据
if (data.city && data.city.length > 0) {
data.city.forEach(item => {
const regionItem = document.createElement('div');
regionItem.className = 'region-item';
regionItem.innerHTML = `
<span class="region-name">${item.loc}</span>
<span class="region-power">${item.val.toLocaleString()}</span>
`;
cityList.appendChild(regionItem);
});
} else {
cityList.innerHTML = '<div class="region-item"><span class="region-name">暂无数据</span></div>';
}
// 填充区县级数据
if (data.county && data.county.length > 0) {
data.county.forEach(item => {
const regionItem = document.createElement('div');
regionItem.className = 'region-item';
regionItem.innerHTML = `
<span class="region-name">${item.loc}</span>
<span class="region-power">${item.val.toLocaleString()}</span>
`;
countyList.appendChild(regionItem);
});
} else {
countyList.innerHTML = '<div class="region-item"><span class="region-name">暂无数据</span></div>';
}
// 显示结果
heroInfo.style.display = 'block';
}
// 页面加载后初始化
window.onload = function() {
// 对英雄下拉框排序
sortHeroSelect();
// 设置默认值为孙悟空和安卓VX区
heroSelect.value = "孙悟空";
serverType.value = "awx";
};
});
</script>
</body>
</html>
AI生成
补充内容 (2025-11-22 12:20):
总体来说,跟ai的沟通方式很重要,很多自己无法想到的事,把问题就给ai就会给你想要的答案v |
评分
-
查看全部评分
|