全站通知：
Widget:装备
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单件装备练度计算器</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
color: #444;
font-size: 1.1em;
}
.attr-row {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.attr-name {
width: 150px;
font-weight: bold;
}
.attr-value {
flex: 1;
}
input[type="number"], input[type="text"], select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4285f4;
color: white;
border: none;
padding: 12px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
width: 100%;
margin-top: 15px;
transition: background-color 0.3s;
}
button:hover {
background-color: #3367d6;
}
.result {
background-color: #e8f5e9;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
display: none;
}
.quality-极品 {
color: #d500f9;
font-weight: bold;
font-size: 1.2em;
}
.quality-优 {
color: #00c853;
font-weight: bold;
font-size: 1.2em;
}
.quality-良 {
color: #0091ea;
font-size: 1.1em;
}
.quality-合格 {
color: #ff6d00;
}
.quality-不合格 {
color: #d50000;
}
.score-bar {
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
}
.score-progress {
height: 100%;
background: linear-gradient(90deg, #d50000, #ff6d00, #0091ea, #00c853);
}
.criteria {
margin-top: 20px;
font-size: 0.9em;
color: #666;
}
.criteria h3 {
margin-bottom: 5px;
color: #444;
}
.criteria ul {
margin-top: 5px;
padding-left: 20px;
}
.special-only {
display: none;
}
.show-special {
display: block;
}
.detail-row {
margin-bottom: 5px;
}
.detail-name {
font-weight: bold;
display: inline-block;
width: 100px;
}
.detail-value {
display: inline-block;
}
.attack-attr {
color: #0d47a1;
}
.defense-attr {
color: #bf360c;
}
.error {
color: #d32f2f;
font-size: 0.9em;
margin-top: 5px;
}
.attr-selector {
margin-bottom: 10px;
}
.attr-input {
display: none;
}
.show-input {
display: block;
}
.percent-attr {
color: #6a1b9a;
font-weight: bold;
}
.locked {
opacity: 0.6;
pointer-events: none;
}
.enhance-control {
display: flex;
align-items: center;
}
.enhance-value {
margin-left: 10px;
font-weight: bold;
}
</style>
</head> <body>
单件装备练度计算器
装备基本信息
装备名称：
<input type="text" id="equip-name" placeholder="输入装备名称">
装备类型：
<select id="equip-type" onchange="toggleSpecialSection()">
<option value="normal">普通装备</option>
<option value="special">特殊装备</option>
</select>
属性选择（共4个词条）
百分比词条强化设置
<button onclick="calculate()">计算练度</button>
装备评分结果
装备名称：
装备类型：
攻击练度：
防御练度：
综合评分：
品质评级：
攻击词条数：
详细评分：
评级标准：
- 极品: 任一攻击词条≥0.9且攻击词条≥2个
- 优: 任一攻击词条≥0.9
- 良: 攻击练度≥0.7或攻击词条≥3个
- 合格: 攻击练度≥0.6
- 不合格: 攻击练度<0.6
攻击词条包括: 全攻、主属性攻击、暴击、属性攻击百分比、暴击率百分比
<script>
// 装备属性配置
const attrConfig = {
'全攻': { max: 1800, type: 'base', category: 'attack', input: true },
'主属性攻击': { max: 2200, type: 'base', category: 'attack', input: true },
'主属性抗性': { max: 8000, type: 'base', category: 'defense', input: true },
'全抗': { max: 1800, type: 'base', category: 'defense', input: true },
'暴击': { max: 8000, type: 'base', category: 'attack', input: true },
'属性攻击百分比': { max: 1, type: 'special', category: 'attack', input: false },
'属性伤害百分比': { max: 1, type: 'special', category: 'attack', input: false },
'属性抗性百分比': { max: 1, type: 'special', category: 'defense', input: false },
'暴击率百分比': { max: 1, type: 'special', category: 'attack', input: false }
};
// 攻击词条列表
const attackAttrs = ['全攻', '主属性攻击', '暴击', '属性攻击百分比', '暴击率百分比'];
// 百分比词条列表
const percentAttrs = ['属性攻击百分比', '属性伤害百分比', '属性抗性百分比', '暴击率百分比'];
// 全局状态
let selectedAttrs = [];
let isSpecial = false;
let critCount = 0;
let totalEnhance = 0;
// 初始化属性选择器
function initAttrSelectors() {
const container = document.getElementById('attrs-container');
container.innerHTML = ;
// 创建4个属性选择器
for (let i = 0; i < 4; i++) {
const selector = document.createElement('div');
selector.className = 'attr-selector';
// 普通装备可选所有基础属性
// 特殊装备可选所有基础属性（除暴击）和特殊属性
const options = Object.entries(attrConfig)
.filter(([name, config]) =>
!isSpecial ||
(config.type === 'base' && name !== '暴击') ||
config.type === 'special'
)
.map(([name]) => `<option value="${name}">${name}</option>`)
.join();
selector.innerHTML = `
<select class="attr-select" onchange="updateAttrSelect(${i}, this.value)">
<option value="">选择第${i+1}个词条</option>
${options}
</select>
`;
container.appendChild(selector);
}
}
// 初始化属性输入框
function initAttrInputs() {
const container = document.getElementById('attr-inputs-container');
container.innerHTML = ;
// 为所有需要输入的属性创建输入框（初始隐藏）
for (const [name, config] of Object.entries(attrConfig)) {
if (config.input) {
const inputDiv = document.createElement('div');
inputDiv.className = 'attr-input';
inputDiv.id = `input-${name}`;
inputDiv.innerHTML = `
${name}：
<input type="number" min="0" max="${config.max}"
step="1" id="value-${name}" class="attr-value-input">
`;
container.appendChild(inputDiv);
}
}
}
// 初始化百分比词条强化设置
function initPercentEnhanceControls() {
const container = document.getElementById('percent-enhance-container');
container.innerHTML = ;
for (const attrName of percentAttrs) {
const control = document.createElement('div');
control.className = 'attr-row';
control.id = `enhance-${attrName}`;
control.innerHTML = `
${attrName}：
<input type="number" min="0" max="5" value="0"
class="enhance-input" data-attr="${attrName}"
onchange="updateEnhanceTotal('${attrName}')">
= 0.0
`;
container.appendChild(control);
}
}
// 更新属性选择
function updateAttrSelect(index, attrName) {
const errorMsg = document.getElementById('error-message');
errorMsg.textContent = ;
// 检查是否已选择过该属性
if (attrName && selectedAttrs.includes(attrName)) {
errorMsg.textContent = '不能选择重复的属性！';
document.querySelectorAll('.attr-select')[index].value = ;
return;
}
// 如果是暴击词条，检查数量
if (attrName === '暴击') {
if (critCount >= 2) {
errorMsg.textContent = '暴击词条总数不能超过2个！';
document.querySelectorAll('.attr-select')[index].value = ;
return;
}
critCount++;
}
// 更新已选属性列表
if (selectedAttrs[index]) {
// 移除之前选择的属性
const prevAttr = selectedAttrs[index];
if (attrConfig[prevAttr].input) {
document.getElementById(`input-${prevAttr}`).classList.remove('show-input');
}
// 如果是暴击词条，减少计数
if (prevAttr === '暴击') {
critCount--;
}
}
if (attrName) {
// 添加新选择的属性
selectedAttrs[index] = attrName;
if (attrConfig[attrName].input) {
document.getElementById(`input-${attrName}`).classList.add('show-input');
}
} else {
// 清空选择
selectedAttrs[index] = null;
}
}
// 更新强化总数
function updateEnhanceTotal(attrName) {
const input = document.querySelector(`.enhance-input[data-attr="${attrName}"]`);
const valueDisplay = input.parentElement.querySelector('.enhance-value');
const enhanceTimes = parseInt(input.value) || 0;
// 更新显示值
valueDisplay.textContent = `= ${(enhanceTimes * 0.2).toFixed(1)}`;
// 计算新的强化总数
let newTotal = 0;
document.querySelectorAll('.enhance-input').forEach(input => {
newTotal += parseInt(input.value) || 0;
});
// 更新全局状态
totalEnhance = newTotal;
// 如果总数达到5，锁定其他强化输入
if (totalEnhance >= 5) {
document.querySelectorAll('.enhance-input').forEach(otherInput => {
if (otherInput !== input && otherInput.value === '0') {
otherInput.disabled = true;
otherInput.parentElement.parentElement.classList.add('locked');
}
});
} else {
// 解锁所有强化输入
document.querySelectorAll('.enhance-input').forEach(otherInput => {
otherInput.disabled = false;
otherInput.parentElement.parentElement.classList.remove('locked');
});
}
}
// 切换特殊装备部分显示
function toggleSpecialSection() {
isSpecial = document.getElementById('equip-type').value === 'special';
document.getElementById('special-section').classList.toggle('show-special', isSpecial);
// 重新初始化属性选择器
selectedAttrs = [];
critCount = 0;
totalEnhance = 0;
initAttrSelectors();
initAttrInputs();
if (isSpecial) {
initPercentEnhanceControls();
}
}
// 获取装备品质评级
function getQualityRating(scoreDetails, attackAttrCount) {
// 检查是否有任一攻击词条≥0.9
const hasHighValueAttr = scoreDetails.some(detail =>
detail.category === 'attack' && detail.normalized >= 0.9
);
// 计算攻击练度总和
const attackScoreSum = scoreDetails.reduce((sum, detail) =>
sum + (detail.category === 'attack' ? detail.normalized : 0), 0);
// 新评级标准
if (hasHighValueAttr && attackAttrCount >= 2) {
return { rating: '极品', class: 'quality-极品' };
} else if (hasHighValueAttr) {
return { rating: '优', class: 'quality-优' };
} else if (attackScoreSum >= 0.7 || attackAttrCount >= 3) {
return { rating: '良', class: 'quality-良' };
} else if (attackScoreSum >= 0.6) {
return { rating: '合格', class: 'quality-合格' };
} else {
return { rating: '不合格', class: 'quality-不合格' };
}
}
// 计算练度
function calculate() {
const errorMsg = document.getElementById('error-message');
errorMsg.textContent = ;
// 检查是否选择了4个词条
if (selectedAttrs.filter(Boolean).length < 4) {
errorMsg.textContent = '请选择4个词条！';
return;
}
// 如果是特殊装备，检查强化总数
if (isSpecial && totalEnhance > 5) {
errorMsg.textContent = '强化总数不能超过5！';
return;
}
// 收集装备基本信息
const equipName = document.getElementById('equip-name').value || '未命名装备';
const equipType = isSpecial ? '特殊装备' : '普通装备';
// 收集属性值
let scoreDetails = [];
let attackScore = 0;
let defenseScore = 0;
let attackAttrCount = 0;
for (const attrName of selectedAttrs) {
if (!attrName) continue;
const config = attrConfig[attrName];
let value, normalizedValue;
if (config.input) {
// 需要输入数值的属性
value = parseFloat(document.getElementById(`value-${attrName}`).value) || 0;
normalizedValue = value / config.max;
} else {
// 百分比属性，根据强化次数计算
const enhanceInput = document.querySelector(`.enhance-input[data-attr="${attrName}"]`);
const enhanceTimes = enhanceInput ? parseInt(enhanceInput.value) || 0 : 0;
value = enhanceTimes * 0.2;
normalizedValue = value; // 百分比属性max=1，所以value=normalizedValue
}
if (config.category === 'attack') {
attackScore += normalizedValue;
if (attackAttrs.includes(attrName)) {
attackAttrCount++;
}
} else {
defenseScore += normalizedValue;
}
scoreDetails.push({
name: attrName,
value: value,
normalized: normalizedValue,
category: config.category,
isPercent: !config.input
});
}
// 计算综合评分
const totalScore = scoreDetails.length > 0 ? (attackScore + defenseScore) / scoreDetails.length : 0;
// 获取品质评级
const quality = getQualityRating(scoreDetails, attackAttrCount);
// 显示结果
document.getElementById('result').style.display = 'block';
document.getElementById('result-name').textContent = equipName;
document.getElementById('result-type').textContent = equipType;
document.getElementById('result-attack-score').textContent = attackScore.toFixed(4);
document.getElementById('result-defense-score').textContent = defenseScore.toFixed(4);
document.getElementById('result-score').textContent = totalScore.toFixed(4);
document.getElementById('score-progress').style.width = `${totalScore * 100}%`;
document.getElementById('result-quality').innerHTML =
`${quality.rating}`;
document.getElementById('result-attack-count').textContent = attackAttrCount;
// 显示详细评分
const detailsHtml = scoreDetails.map(detail => `
${detail.name}:
${detail.isPercent ?
`${detail.value.toFixed(1)} (强化${detail.value/0.2}次)` :
detail.value.toFixed(0)} → ${detail.normalized.toFixed(4)}
`).join();
document.getElementById('result-details').innerHTML = detailsHtml;
}
// 初始化页面
window.onload = function() {
initAttrSelectors();
initAttrInputs();
};
</script>
</body> </html>
沪公网安备 31011002002714 号