微件:ExpCalculator：修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的17个中间版本） | |||
| 第11行： | 第11行： | ||
/* 标题与输入布局 */ | /* 标题与输入布局 */ | ||
.calc-title { font-size: 1. | .calc-title { font-size: 1.25rem; font-weight: bold; margin-bottom: 20px; text-align: center; color: #cf3b51; } | ||
.input-group { margin-bottom: 18px; } | .input-group { margin-bottom: 18px; } | ||
.label-wrapper { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 2px; } | |||
.group-label { display: block; font-size: 13px; font-weight: 600; color: #636e72; margin-bottom: 8px; padding-left: 2px; } | .group-label { display: block; font-size: 13px; font-weight: 600; color: #636e72; margin-bottom: 8px; padding-left: 2px; } | ||
.custom-link { font-size: 13px; color: #5c7cfa; margin-bottom: 8px; cursor: pointer; text-decoration: underline; } | |||
.input-row { display: flex; gap: 10px; margin-bottom: 15px; } | .input-row { display: flex; gap: 10px; margin-bottom: 15px; } | ||
| 第52行： | 第54行： | ||
} | } | ||
.tag-label > .tag-effect { color:green; font-weight:bold; } | .tag-label > .tag-effect { color:green; font-weight:bold; } | ||
.tag-item:checked + .tag-label { background-color: # | .tag-item:checked + .tag-label { background-color: #5c7cfa; color: #fff; } | ||
.tag-item:checked + .tag-label > .tag-effect { color: #0f0; } | .tag-item:checked + .tag-label > .tag-effect { color: #0f0; } | ||
| 第75行： | 第77行： | ||
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } | @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } | ||
/* | |||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.input-row { flex-direction: column; gap: 12px; } | .input-row { flex-direction: column; gap: 12px; } | ||
.calc-container { padding: 20px 16px; margin: 10px; } | .calc-container { padding: 20px 16px; margin: 10px; } | ||
} | } | ||
*/ | |||
</style> | </style> | ||
| 第87行： | 第90行： | ||
0,100,300,600,1000,1500,2100,2800,3600,4500,5500,6600,7800,9100,10500,12000,13600,15300,17100,19000,21000,23100,25300,27600,30000,32500,35100,37800,40600,43500,46500,49600,52800,56100,59500,63000,66600,70300,74100,78000,82000,86100,90300,94600,99000,103500,108100,112800,117600,122500,127500,132700,138100,143700,149500,155500,161700,168100,174700,181500,188500,195800,203400,211300,219600,228300,237400,247000,257100,267800,279100,291100,303800,313700,331700,347000,363300,380700,399300,419100,440200,462700,486700,512300,539600,568700,599700,632700,667900,705400,745300,787700,832800,880700,931600,985600,1042800,1103400,1167600,1235500,1307300,1379100,1450900,1522700,1594500,1666300,1738100,1809900,1881700,1953500 | 0,100,300,600,1000,1500,2100,2800,3600,4500,5500,6600,7800,9100,10500,12000,13600,15300,17100,19000,21000,23100,25300,27600,30000,32500,35100,37800,40600,43500,46500,49600,52800,56100,59500,63000,66600,70300,74100,78000,82000,86100,90300,94600,99000,103500,108100,112800,117600,122500,127500,132700,138100,143700,149500,155500,161700,168100,174700,181500,188500,195800,203400,211300,219600,228300,237400,247000,257100,267800,279100,291100,303800,313700,331700,347000,363300,380700,399300,419100,440200,462700,486700,512300,539600,568700,599700,632700,667900,705400,745300,787700,832800,880700,931600,985600,1042800,1103400,1167600,1235500,1307300,1379100,1450900,1522700,1594500,1666300,1738100,1809900,1881700,1953500 | ||
]; | ]; | ||
let isCustomMode = false; | |||
function toggleExpMode() { | |||
isCustomMode = !isCustomMode; | |||
const select = document.getElementById('stageExp'); | |||
const input = document.getElementById('customExp'); | |||
const label = document.getElementById('expLabelName'); | |||
const link = document.getElementById('toggleExpType'); | |||
if (isCustomMode) { | |||
select.style.display = 'none'; | |||
input.style.display = 'block'; | |||
label.innerText = '自定义经验'; | |||
link.innerText = '返回选择关卡'; | |||
} else { | |||
select.style.display = 'block'; | |||
input.style.display = 'none'; | |||
label.innerText = '出征关卡'; | |||
link.innerText = '自定义经验'; | |||
} | |||
} | |||
function toggleSection(header) { | function toggleSection(header) { | ||
| 第100行： | 第124行： | ||
const targetLvl = parseInt(document.getElementById('targetLvl').value); | const targetLvl = parseInt(document.getElementById('targetLvl').value); | ||
const nRuns = parseInt(document.getElementById('nRuns').value); | const nRuns = parseInt(document.getElementById('nRuns').value); | ||
const baseExp = parseInt(document.getElementById('stageExp').value); | const baseExp = isCustomMode | ||
? parseInt(document.getElementById('customExp').value) | |||
: parseInt(document.getElementById('stageExp').value); | |||
if (!startLvl || !baseExp) { | if (!startLvl || !baseExp) { | ||
alert(" | alert("请输入初始等级并" + (isCustomMode ? "填写经验值" : "选择关卡") + "！"); return; | ||
} | } | ||
| 第112行： | 第138行： | ||
}); | }); | ||
const finalExpPerRun = baseExp * multi; | const finalExpPerRun = Math.floor(baseExp * multi); | ||
const startTotalExp = expTable[startLvl - 1] || 0; | const startTotalExp = expTable[startLvl - 1] || 0; | ||
| 第128行： | 第154行： | ||
// 在经验表中查找对应的等级 | // 在经验表中查找对应的等级 | ||
let reachedLvl = 1; | let reachedLvl = 1; | ||
for (let i = 0; i < expTable.length; i++) { | for (let i = 0; i < expTable.length; i++) { if (newTotalExp >= expTable[i]) reachedLvl = i + 1; else break; } | ||
resDesc.innerText = `完成 ${nRuns} 次出征后可达`; | resDesc.innerText = `从 Lv.${startLvl} 完成 ${nRuns} 次出征后可达`; | ||
resVal.innerText = `Lv.${reachedLvl}`; | resVal.innerText = `Lv.${reachedLvl}`; | ||
resBox.className = "calc-result mode-level"; | resBox.className = "calc-result mode-level"; | ||
} else { | } else { | ||
// 模式 A：计算次数 | // 模式 A：计算次数 | ||
if (!targetLvl || targetLvl <= startLvl) { | if (!targetLvl || targetLvl <= startLvl) { alert("请输入有效的目标等级！"); return; } | ||
const targetTotalExp = expTable[targetLvl - 1]; | const targetTotalExp = expTable[targetLvl - 1]; | ||
const neededExp = targetTotalExp - startTotalExp; | const neededExp = targetTotalExp - startTotalExp; | ||
const runs = Math.ceil(neededExp / finalExpPerRun); | const runs = Math.ceil(neededExp / finalExpPerRun); | ||
resDesc.innerText = `达到 Lv.${targetLvl} 预计还需`; | resDesc.innerText = `从 Lv.${startLvl} 达到 Lv.${targetLvl} 预计还需`; | ||
resVal.innerText = `${runs.toLocaleString()} 次`; | resVal.innerText = `${runs.toLocaleString()} 次`; | ||
resBox.className = "calc-result mode-times"; | resBox.className = "calc-result mode-times"; | ||
| 第158行： | 第176行： | ||
<div class="calc-container"> | <div class="calc-container"> | ||
<div class="calc-title"> | <div class="calc-title">舰R百科出征经验计算器</div> | ||
<!-- 等级输入 --> | <!-- 等级输入 --> | ||
| 第168行： | 第186行： | ||
<div class="input-group" style="flex:1;"> | <div class="input-group" style="flex:1;"> | ||
<label class="group-label">目标等级（可选）</label> | <label class="group-label">目标等级（可选）</label> | ||
<input type="number" id="targetLvl" class="calc-input" placeholder=" | <input type="number" id="targetLvl" class="calc-input" placeholder="110" min="1" max="110" value="110"> | ||
</div> | </div> | ||
</div> | </div> | ||
| 第178行： | 第196行： | ||
<input type="number" id="nRuns" class="calc-input" placeholder="留空则计算所需次数" min="0"> | <input type="number" id="nRuns" class="calc-input" placeholder="留空则计算所需次数" min="0"> | ||
</div> | </div> | ||
<div class="input-group" style="flex:1;"> | <div class="input-group" style="flex:1;"> | ||
<label class="group-label"> | <div class="label-wrapper"> | ||
<span class="group-label" id="expLabelName">出征关卡</span> | |||
<span class="custom-link" id="toggleExpType" onclick="toggleExpMode()">自定义经验</span> | |||
</div> | |||
<select id="stageExp" class="calc-select"> | <select id="stageExp" class="calc-select"> | ||
<option value="" disabled selected>选择关卡...</option> | <option value="" disabled selected>选择关卡...</option> | ||
<option value="30">1-1 (30)</option> | <option value="30">1-1 (30)</option> | ||
<option value="50">1-2 (50</option> | <option value="50">1-2 (50)</option> | ||
<option value="80">1-3 (80)</option> | <option value="80">1-3 (80)</option> | ||
<option value="120">1-4 (120)</option> | <option value="120">1-4 (120)</option> | ||
| 第228行： | 第247行： | ||
<option value="1160">10-1 (1160)</option> | <option value="1160">10-1 (1160)</option> | ||
</select> | </select> | ||
<input type="number" id="customExp" class="calc-input" style="display:none;" placeholder="输入单场基础经验"> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="collapsible-section"> | <div class="collapsible-section active"> | ||
<div class="collapsible-header" onclick="toggleSection(this)"> | <div class="collapsible-header" onclick="toggleSection(this)"> | ||
<span> | <span>战果评价（单选）</span> | ||
<div class="arrow-icon"></div> | <div class="arrow-icon"></div> | ||
</div> | </div> | ||
<div class="collapsible-content"> | <div class="collapsible-content" style="display: block;"> | ||
<div class="tag-grid"> | <div class="tag-grid"> | ||
<input type="radio" name="g1" id="g1_1" class="tag-item" value="1.2" checked> | <input type="radio" name="g1" id="g1_1" class="tag-item" value="1.2" checked> | ||
| 第263行： | 第283行： | ||
<div class="collapsible-content"> | <div class="collapsible-content"> | ||
<div class="tag-grid"> | <div class="tag-grid"> | ||
<input type="checkbox" name="g2" id=" | <input type="checkbox" name="g2" id="g2_1" class="tag-item" value="1.5"> | ||
<label for=" | <label for="g2_1" class="tag-label">旗舰 <span class="tag-effect">+50%</span></label> | ||
<input type="checkbox" name="g2" id="g2_2" class="tag-item" value="2.0"> | |||
<label for="g2_2" class="tag-label">MVP <span class="tag-effect">+100%</span></label> | |||
<input type="checkbox" name="g2" id="g2_3" class="tag-item" value="2.0"> | <input type="checkbox" name="g2" id="g2_3" class="tag-item" value="2.0"> | ||
<label for="g2_3 | <label for="g2_3" class="tag-label">建造养成活动 <span class="tag-effect">+100%</span></label> | ||
<input type="checkbox" name="g2" id="g2_4" class="tag-item" value="2.0"> | <input type="checkbox" name="g2" id="g2_4" class="tag-item" value="2.0"> | ||
| 第532行： | 第552行： | ||
<div class="result-label" id="resDesc">预计结果</div> | <div class="result-label" id="resDesc">预计结果</div> | ||
<span id="resultValue" class="result-val">-</span> | <span id="resultValue" class="result-val">-</span> | ||
<div style="font-size: 12px; color: # | <div style="font-size: 12px; color: #747d8c; margin-top: 8px;">单场获得：<span id="expDetail">0</span> 经验</div> | ||
</div> | </div> | ||
</div></includeonly> | </div></includeonly> | ||