全站通知：
Widget:装备2
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12件装备练度计算器</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 800px;
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);
}
.equip-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.equip-tab {
padding: 8px 15px;
margin-right: 5px;
background-color: #eee;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.equip-tab.active {
background-color: #4285f4;
color: white;
}
.equip-container {
display: none;
}
.equip-container.active {
display: block;
}
.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: #666;
}
.score-bar {
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
}
.score-progress {
height: 100%;
background: linear-gradient(90deg, #666, #00c853, #d500f9);
}
.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: 120px;
}
.detail-value {
display: inline-block;
}
.attack-attr {
color: #0d47a1;
}
.defense-attr {
color: #bf360c;
}
.error {
color: #d32f2f;
font-size: 0.9em;
margin-top: 5px;
}
.summary {
margin-top: 20px;
font-weight: bold;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 500px;
}
.modal-title {
font-size: 1.2em;
margin-bottom: 15px;
color: #333;
}
.modal-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.modal-buttons {
display: flex;
justify-content: flex-end;
}
.modal-button {
padding: 8px 15px;
margin-left: 10px;
border-radius: 4px;
cursor: pointer;
}
.modal-confirm {
background-color: #4285f4;
color: white;
border: none;
}
.modal-cancel {
background-color: #eee;
border: none;
}
.celebration-card {
display: none;
margin-top: 30px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
color: white;
position: relative;
overflow: hidden;
}
.celebration-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://img.freepik.com/free-vector/golden-confetti-background_1048-7028.jpg') center/cover;
opacity: 0.3;
}
.celebration-title {
font-size: 28px;
margin-bottom: 10px;
color: #d500f9;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
position: relative;
}
.celebration-name {
font-size: 20px;
margin-bottom: 20px;
position: relative;
}
.celebration-name span {
color: #0d47a1;
font-weight: bold;
}
.celebration-content {
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
position: relative;
}
.celebration-main {
font-size: 24px;
color: #d500f9;
margin-bottom: 10px;
}
.celebration-score {
font-size: 18px;
color: #333;
}
.celebration-score span {
color: #d500f9;
font-weight: bold;
}
.celebration-medals {
display: flex;
justify-content: center;
margin-bottom: 20px;
position: relative;
}
.celebration-medal {
background-color: rgba(255,255,255,0.7);
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.celebration-emoji {
font-size: 40px;
color: #d500f9;
}
.celebration-footer {
font-size: 16px;
color: #666;
position: relative;
}
.celebration-date {
margin-top: 20px;
font-size: 14px;
color: #888;
position: relative;
}
.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>
12件装备练度计算器
<button onclick="calculateAll()">计算全部装备练度</button>
综合评分结果
总攻击练度：
平均练度：
综合评级：
单件装备评分：
传奇装备大师
[玩家名称]
达成全装备极品练度！
综合练度: 1.15
🎖️
🏆
🌟
成就解锁时间: [日期]
评级标准：
- 极品: 攻击练度＞1.1
- 优: 攻击练度＞1.0
- 普通: 攻击练度≤1.0
综合练度≥1.15时将生成贺图
<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 currentEquipIndex = 0;
let equipData = Array(12).fill().map(() => ({
name: ,
type: 'normal',
attrs: [],
enhanceTimes: 0,
score: 0,
quality: '普通'
}));
// 初始化装备标签和容器
function initEquipTabs() {
const tabsContainer = document.getElementById('equip-tabs');
const containersContainer = document.getElementById('equip-containers');
tabsContainer.innerHTML = ;
containersContainer.innerHTML = ;
for (let i = 0; i < 12; i++) {
// 创建标签
const tab = document.createElement('div');
tab.className = `equip-tab ${i === 0 ? 'active' : }`;
tab.textContent = `装备 ${i+1}`;
tab.onclick = () => switchEquipTab(i);
tabsContainer.appendChild(tab);
// 创建装备容器
const container = document.createElement('div');
container.className = `equip-container ${i === 0 ? 'active' : }`;
container.id = `equip-${i}`;
// 装备基本信息
container.innerHTML = `
装备基本信息
装备名称：
<input type="text" id="equip-name-${i}" placeholder="输入装备名称">
装备类型：
<select id="equip-type-${i}" onchange="toggleSpecialSection(${i})">
<option value="normal">普通装备</option>
<option value="special">特殊装备</option>
</select>
属性选择（共4个词条）
百分比词条强化设置
`;
containersContainer.appendChild(container);
}
// 初始化第一件装备的属性选择器
initAttrSelectors(0);
initAttrInputs(0);
initPercentEnhanceControls(0);
}
// 切换装备标签
function switchEquipTab(index) {
document.querySelectorAll('.equip-tab').forEach((tab, i) => {
tab.classList.toggle('active', i === index);
});
document.querySelectorAll('.equip-container').forEach((container, i) => {
container.classList.toggle('active', i === index);
});
currentEquipIndex = index;
}
// 初始化属性选择器
function initAttrSelectors(index) {
const container = document.getElementById(`attrs-container-${index}`);
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]) =>
equipData[index].type !== 'special' ||
(config.type === 'base' && name !== '暴击') ||
config.type === 'special'
)
.map(([name]) => `<option value="${name}">${name}</option>`)
.join();
selector.innerHTML = `
<select class="attr-select" onchange="updateAttrSelect(${index}, ${i}, this.value)">
<option value="">选择第${i+1}个词条</option>
${options}
</select>
`;
container.appendChild(selector);
}
}
// 初始化属性输入框
function initAttrInputs(index) {
const container = document.getElementById(`attr-inputs-container-${index}`);
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}-${index}`;
inputDiv.innerHTML = `
${name}：
<input type="number" min="0" max="${config.max}"
step="1" id="value-${name}-${index}" class="attr-value-input">
`;
container.appendChild(inputDiv);
}
}
}
// 初始化百分比词条强化设置
function initPercentEnhanceControls(index) {
const container = document.getElementById(`percent-enhance-container-${index}`);
container.innerHTML = ;
for (const attrName of percentAttrs) {
const control = document.createElement('div');
control.className = 'attr-row';
control.id = `enhance-${attrName}-${index}`;
control.innerHTML = `
${attrName}：
<input type="number" min="0" max="5" value="0"
class="enhance-input" data-attr="${attrName}"
onchange="updateEnhanceTotal(${index}, '${attrName}')">
= 0.0
`;
container.appendChild(control);
}
}
// 更新属性选择
function updateAttrSelect(equipIndex, attrIndex, attrName) {
const errorMsg = document.getElementById(`error-message-${equipIndex}`);
errorMsg.textContent = ;
// 检查是否已选择过该属性
if (attrName && equipData[equipIndex].attrs.some(a => a && a.name === attrName)) {
errorMsg.textContent = '不能选择重复的属性！';
document.querySelectorAll(`#equip-${equipIndex} .attr-select`)[attrIndex].value = ;
return;
}
// 如果是暴击词条，检查数量
if (attrName === '暴击') {
const critCount = equipData.reduce((count, equip) =>
count + equip.attrs.filter(a => a && a.name === '暴击').length, 0);
if (critCount >= 2) {
errorMsg.textContent = '暴击词条总数不能超过2个！';
document.querySelectorAll(`#equip-${equipIndex} .attr-select`)[attrIndex].value = ;
return;
}
}
// 更新装备数据
if (equipData[equipIndex].attrs[attrIndex]) {
// 移除之前选择的属性
const prevAttr = equipData[equipIndex].attrs[attrIndex].name;
if (attrConfig[prevAttr].input) {
document.getElementById(`input-${prevAttr}-${equipIndex}`).classList.remove('show-input');
}
}
if (attrName) {
// 添加新选择的属性
equipData[equipIndex].attrs[attrIndex] = {
name: attrName,
value: 0,
normalized: 0,
isPercent: !attrConfig[attrName].input
};
if (attrConfig[attrName].input) {
document.getElementById(`input-${attrName}-${equipIndex}`).classList.add('show-input');
}
} else {
// 清空选择
equipData[equipIndex].attrs[attrIndex] = null;
}
}
// 更新强化总数
function updateEnhanceTotal(equipIndex, attrName) {
const input = document.querySelector(`#enhance-${attrName}-${equipIndex} .enhance-input`);
const valueDisplay = input.parentElement.querySelector('.enhance-value');
const enhanceTimes = parseInt(input.value) || 0;
// 更新显示值
valueDisplay.textContent = `= ${(enhanceTimes * 0.2).toFixed(1)}`;
// 更新装备数据
const attrIndex = equipData[equipIndex].attrs.findIndex(a => a && a.name === attrName);
if (attrIndex >= 0) {
equipData[equipIndex].attrs[attrIndex].value = enhanceTimes * 0.2;
equipData[equipIndex].attrs[attrIndex].normalized = enhanceTimes * 0.2;
}
// 计算新的强化总数
let newTotal = 0;
document.querySelectorAll(`#enhance-${attrName}-${equipIndex} .enhance-input`).forEach(input => {
newTotal += parseInt(input.value) || 0;
});
// 如果总数达到5，锁定其他强化输入
if (newTotal >= 5) {
document.querySelectorAll(`#enhance-${attrName}-${equipIndex} .enhance-input`).forEach(otherInput => {
if (otherInput !== input && otherInput.value === '0') {
otherInput.disabled = true;
otherInput.parentElement.parentElement.classList.add('locked');
}
});
} else {
// 解锁所有强化输入
document.querySelectorAll(`#enhance-${attrName}-${equipIndex} .enhance-input`).forEach(otherInput => {
otherInput.disabled = false;
otherInput.parentElement.parentElement.classList.remove('locked');
});
}
}
// 切换特殊装备部分显示
function toggleSpecialSection(index) {
equipData[index].type = document.getElementById(`equip-type-${index}`).value;
document.getElementById(`special-section-${index}`).classList.toggle('show-special', equipData[index].type === 'special');
// 重新初始化属性选择器
equipData[index].attrs = [];
initAttrSelectors(index);
}
// 计算单件装备练度
function calculateEquip(index) {
const errorMsg = document.getElementById(`error-message-${index}`);
errorMsg.textContent = ;
// 检查是否选择了4个词条
if (equipData[index].attrs.filter(Boolean).length < 4) {
errorMsg.textContent = '请选择4个词条！';
return false;
}
// 更新装备名称
equipData[index].name = document.getElementById(`equip-name-${index}`).value || `装备 ${index+1}`;
// 收集属性值
let attackScore = 0;
let attackAttrCount = 0;
for (const attr of equipData[index].attrs) {
if (!attr) continue;
const config = attrConfig[attr.name];
if (config.input) {
// 需要输入数值的属性
attr.value = parseFloat(document.getElementById(`value-${attr.name}-${index}`).value) || 0;
attr.normalized = attr.value / config.max;
}
if (config.category === 'attack') {
attackScore += attr.normalized;
if (attackAttrs.includes(attr.name)) {
attackAttrCount++;
}
}
}
// 计算攻击练度
equipData[index].score = attackScore;
// 获取品质评级
if (attackScore > 1.1) {
equipData[index].quality = '极品';
} else if (attackScore > 1.0) {
equipData[index].quality = '优';
} else {
equipData[index].quality = '普通';
}
return true;
}
// 计算全部装备练度
function calculateAll() {
let allValid = true;
let totalAttackScore = 0;
let equipCount = 0;
// 计算每件装备
for (let i = 0; i < 12; i++) {
if (!calculateEquip(i)) {
allValid = false;
// 切换到有错误的装备
switchEquipTab(i);
break;
}
totalAttackScore += equipData[i].score;
equipCount++;
}
if (!allValid) return;
// 计算平均练度
const avgScore = totalAttackScore / equipCount;
// 显示结果
document.getElementById('result').style.display = 'block';
document.getElementById('total-attack-score').textContent = totalAttackScore.toFixed(4);
document.getElementById('avg-score').textContent = avgScore.toFixed(4);
document.getElementById('score-progress').style.width = `${Math.min(100, avgScore * 100)}%`;
// 综合评级
let totalQuality = '普通';
if (avgScore > 1.1) {
totalQuality = '极品';
} else if (avgScore > 1.0) {
totalQuality = '优';
}
document.getElementById('total-quality').innerHTML =
`${totalQuality}`;
// 显示单件装备评分
let equipScoresHtml = ;
for (let i = 0; i < 12; i++) {
equipScoresHtml += `
${equipData[i].name}：
${equipData[i].score.toFixed(4)}
(${equipData[i].quality})
`;
}
document.getElementById('equip-scores').innerHTML = equipScoresHtml;
// 如果平均练度≥1.15，显示名称输入框
if (avgScore >= 1.15) {
showNameModal();
}
}
// 显示名称输入框
function showNameModal() {
document.getElementById('name-modal').style.display = 'flex';
}
// 关闭名称输入框
function closeModal() {
document.getElementById('name-modal').style.display = 'none';
}
// 生成贺图
function generateCelebration() {
const userName = document.getElementById('user-name').value || '神秘玩家';
const avgScore = parseFloat(document.getElementById('avg-score').textContent);
closeModal();
// 设置贺图内容
document.getElementById('celebration-name').textContent = userName;
document.getElementById('celebration-score').textContent = avgScore.toFixed(2);
// 设置当前日期
const now = new Date();
document.getElementById('celebration-date').textContent =
`${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
// 显示贺图
const celebrationCard = document.getElementById('celebration-card');
celebrationCard.style.display = 'block';
celebrationCard.scrollIntoView({ behavior: 'smooth' });
}
// 初始化页面
window.onload = function() {
initEquipTabs();
};
</script>
</body> </html>
沪公网安备 31011002002714 号