微件:ExpCalculator
<style>
/* 基础重置与容器 */
.calc-container *, .calc-container *:before, .calc-container *:after { box-sizing: border-box; }
.calc-container {
max-width: 500px; margin: 20px auto; padding: 24px;
background-color: #ffffff; border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
font-family: sans-serif;
border: 1px solid #f0f0f0; color: #2d3436;
}
/* 标题与输入布局 */
.calc-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 24px; text-align: center; color: #1e272e; }
.input-group { margin-bottom: 18px; }
.group-label { display: block; font-size: 13px; font-weight: 600; color: #636e72; margin-bottom: 8px; padding-left: 2px; }
.input-row { display: flex; gap: 10px; margin-bottom: 15px; }
/* 输入控件 */
.calc-input, .calc-select {
width: 100%; height: 46px; padding: 0 12px; border: 2px solid #edf2f7; border-radius: 10px;
font-size: 15px; outline: none; transition: all 0.2s; background-color: #f8fafc;
}
.calc-input:focus, .calc-select:focus { border-color: #5c7cfa; background-color: #fff; box-shadow: 0 0 0 3px rgba(92,124,250,0.1); }
/* 下拉菜单箭头 */
.calc-select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a4b0be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
/* 可折叠部分 */
.collapsible-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 4px; cursor: pointer; border-bottom: 1px solid #f1f3f5; margin-top: 5px;
}
.header-title { font-size: 13px; font-weight: 700; color: #2d3436; }
.arrow-icon {
width: 8px; height: 8px; border-left: 2px solid #b2bec3; border-bottom: 2px solid #b2bec3;
transform: rotate(-45deg); transition: transform 0.3s;
}
.active .arrow-icon { transform: rotate(135deg); }
.collapsible-content { display: none; padding: 12px 0; }
/* Tag 样式单选/多选 */
.tag-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { display: none; }
.tag-label {
min-width: 60px; padding: 8px 14px; border: 1.5px solid #bbb; border-radius: 50px;
font-size: 12px; text-align: center; cursor: pointer; transition: all 0.2s;
background-color: #fff; color: #2d3436;
}
.tag-label > .tag-effect { color:green; font-weight:bold; }
.tag-item:checked + .tag-label { background-color: #2d3436; color: #fff; }
.tag-item:checked + .tag-label > .tag-effect { color: #0f0; }
/* 按钮与结果 */
.calc-btn {
width: 100%; height: 50px; background-color: #5c7cfa; color: #fff; border: none;
border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 25px;
box-shadow: 0 4px 15px rgba(92, 124, 250, 0.3); transition: all 0.2s;
}
.calc-btn:hover { background-color: #4c6ef5; transform: translateY(-1px); }
.calc-result {
margin-top: 24px; padding: 20px; border-radius: 12px;
text-align: center; display: none; animation: fadeIn 0.4s ease-out;
}
/* 不同模式下的背景色微调 */
.mode-times { background-color: #f1f3f5; }
.mode-level { background-color: #edf2ff; border: 1px solid #dbe4ff; }
.result-label { font-size: 13px; color: #747d8c; margin-bottom: 5px; }
.result-val { font-size: 28px; font-weight: 800; color: #5c7cfa; display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
.input-row { flex-direction: column; gap: 12px; }
.calc-container { padding: 20px 16px; margin: 10px; }
}
</style>
<script>
// 1-110级总经验表 (请替换为实际完整数据) const expTable = [ 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 ];
function toggleSection(header) {
const section = header.parentElement;
const content = header.nextElementSibling;
const isActive = section.classList.contains('active');
section.classList.toggle('active');
content.style.display = isActive ? 'none' : 'block';
}
function calculate() {
const startLvl = parseInt(document.getElementById('startLvl').value);
const targetLvl = parseInt(document.getElementById('targetLvl').value);
const nRuns = parseInt(document.getElementById('nRuns').value);
const baseExp = parseInt(document.getElementById('stageExp').value);
if (!startLvl || !baseExp) {
alert("请输入初始等级并选择关卡！"); return;
}
// 计算倍率
let multi = 1.0;
document.querySelectorAll('.tag-item:checked').forEach(item => {
multi *= parseFloat(item.value);
});
const finalExpPerRun = baseExp * multi;
const startTotalExp = expTable[startLvl - 1] || 0;
const resBox = document.getElementById('resultBox');
const resDesc = document.getElementById('resDesc');
const resVal = document.getElementById('resultValue');
document.getElementById('expDetail').innerText = Math.floor(finalExpPerRun);
// 逻辑判断：是计算“所需次数”还是“推算等级”
if (nRuns && nRuns > 0) {
// 模式 B：推算等级
const gainedExp = nRuns * finalExpPerRun;
const newTotalExp = startTotalExp + gainedExp;
// 在经验表中查找对应的等级
let reachedLvl = 1;
for (let i = 0; i < expTable.length; i++) {
if (newTotalExp >= expTable[i]) {
reachedLvl = i + 1;
} else {
break;
}
}
resDesc.innerText = `完成 ${nRuns} 次出征后可达`;
resVal.innerText = `Lv.${reachedLvl}`;
resBox.className = "calc-result mode-level";
} else {
// 模式 A：计算次数
if (!targetLvl || targetLvl <= startLvl) {
alert("请输入有效的目标等级！"); return;
}
const targetTotalExp = expTable[targetLvl - 1];
const neededExp = targetTotalExp - startTotalExp;
const runs = Math.ceil(neededExp / finalExpPerRun);
resDesc.innerText = `达到 Lv.${targetLvl} 预计还需`;
resVal.innerText = `${runs.toLocaleString()} 次`;
resBox.className = "calc-result mode-times";
}
resBox.style.display = "block"; }
</script>
经验计算器
<label class="group-label">初始等级</label>
<input type="number" id="startLvl" class="calc-input" placeholder="1" min="1" max="110" value="1">
<label class="group-label">目标等级（可选）</label>
<input type="number" id="targetLvl" class="calc-input" placeholder="100" min="1" max="110" value="110">
<label class="group-label">预定出征次数</label>
<input type="number" id="nRuns" class="calc-input" placeholder="留空则计算所需次数" min="0">
<label class="group-label">通常关卡（基础经验）</label>
<select id="stageExp" class="calc-select">
<option value="" disabled selected>选择关卡...</option>
<option value="30">1-1 (30)</option>
<option value="50">1-2 (50</option>
<option value="80">1-3 (80)</option>
<option value="120">1-4 (120)</option>
<option value="100">2-1 (100)</option>
<option value="120">2-2 (120)</option>
<option value="150">2-3 (150)</option>
<option value="200">2-4 (200)</option>
<option value="400">2-5 (400)</option>
<option value="420">2-6 (420)</option>
<option value="150">3-1 (150)</option>
<option value="180">3-2 (180)</option>
<option value="220">3-3 (220)</option>
<option value="300">3-4 (300)</option>
<option value="250">4-1 (250)</option>
<option value="300">4-2 (300)</option>
<option value="330">4-3 (330)</option>
<option value="360">4-4 (360)</option>
<option value="350">5-1 (350)</option>
<option value="370">5-2 (370)</option>
<option value="400">5-3 (400)</option>
<option value="420">5-4 (420)</option>
<option value="450">5-5 (450)</option>
<option value="400">6-1 (400)</option>
<option value="410">6-2 (410)</option>
<option value="420">6-3 (420)</option>
<option value="500">6-4 (500)</option>
<option value="450">7-1 (450)</option>
<option value="480">7-2 (480)</option>
<option value="520">7-3 (520)</option>
<option value="560">7-4 (560)</option>
<option value="600">7-5 (600)</option>
<option value="600">8-1 (600)</option>
<option value="600">8-2 (600)</option>
<option value="600">8-3 (600)</option>
<option value="600">8-4 (600)</option>
<option value="600">8-5 (600)</option>
<option value="660">9-1 (660)</option>
<option value="680">9-2 (680)</option>
<option value="800">9-3 (800)</option>
<option value="920">9-4 (920)</option>
<option value="1040">9-5 (1040)</option>
<option value="1160">10-1 (1160)</option>
</select>
战后评价（单选）
<input type="radio" name="g1" id="g1_1" class="tag-item" value="1.2" checked>
<label for="g1_1" class="tag-label">S +20%</label>
<input type="radio" name="g1" id="g1_2" class="tag-item" value="1.0">
<label for="g1_2" class="tag-label">A 0%</label>
<input type="radio" name="g1" id="g1_3" class="tag-item" value="0.8">
<label for="g1_3" class="tag-label">B -20%</label>
<input type="radio" name="g1" id="g1_4" class="tag-item" value="0.7">
<label for="g1_4" class="tag-label">C -30%</label>
<input type="radio" name="g1" id="g1_5" class="tag-item" value="0.5">
<label for="g1_5" class="tag-label">D -50%</label>
出征系统加成（多选）
<input type="checkbox" name="g2" id="g2_2" class="tag-item" value="1.5">
<label for="g2_2" class="tag-label">旗舰 +50%</label>
<input type="checkbox" name="g2" id="g2_3" class="tag-item" value="2.0">
<label for="g2_3" class="tag-label">MVP +100%</label>
<input type="checkbox" name="g2" id="g2_4" class="tag-item" value="2.0">
<label for="g2_4" class="tag-label">建造养成活动 +100%</label>
<input type="checkbox" name="g2" id="g2_4" class="tag-item" value="2.0">
<label for="g2_4" class="tag-label">神秘的教材 +100%</label>
<input type="checkbox" name="g2" id="g2_5" class="tag-item" value="2.0">
<label for="g2_5" class="tag-label">研发中的神秘教材 +100%</label>
战役支援加成（单选）
<input type="radio" name="g3" id="g3_1" class="tag-item" value="1.0" checked>
<label for="g3_1" class="tag-label">无</label>
<input type="radio" name="g3" id="g3_2" class="tag-item" value="1.5">
<label for="g3_2" class="tag-label">初级模拟 +50%</label>
<input type="radio" name="g3" id="g3_3" class="tag-item" value="1.75">
<label for="g3_3" class="tag-label">教官指导 +75%</label>
<input type="radio" name="g3" id="g3_4" class="tag-item" value="2.0">
<label for="g3_4" class="tag-label">艾拉督战 +100%</label>
工程局（单选）
<input type="radio" name="g4" id="g4_1" class="tag-item" value="1.0" checked>
<label for="g4_1" class="tag-label">无</label>
<input type="radio" name="g4" id="g4_2" class="tag-item" value="1.01">
<label for="g4_2" class="tag-label">+1%</label>
<input type="radio" name="g4" id="g4_3" class="tag-item" value="1.02">
<label for="g4_3" class="tag-label">+2%</label>
<input type="radio" name="g4" id="g4_4" class="tag-item" value="1.03">
<label for="g4_4" class="tag-label">+3%</label>
<input type="radio" name="g4" id="g4_5" class="tag-item" value="1.04">
<label for="g4_5" class="tag-label">+4%</label>
<input type="radio" name="g4" id="g4_6" class="tag-item" value="1.05">
<label for="g4_6" class="tag-label">+5%</label>
<input type="radio" name="g4" id="g4_7" class="tag-item" value="1.06">
<label for="g4_7" class="tag-label">+6%</label>
<input type="radio" name="g4" id="g4_8" class="tag-item" value="1.07">
<label for="g4_8" class="tag-label">+7%</label>
<input type="radio" name="g4" id="g4_9" class="tag-item" value="1.08">
<label for="g4_9" class="tag-label">+8%</label>
<input type="radio" name="g4" id="g4_10" class="tag-item" value="1.09">
<label for="g4_10" class="tag-label">+9%</label>
<input type="radio" name="g4" id="g4_11" class="tag-item" value="1.1">
<label for="g4_11" class="tag-label">+10%</label>
菜谱（单选）
<input type="radio" name="g5" id="g5_1" class="tag-item" value="1.0" checked>
<label for="g5_1" class="tag-label">无</label>
<input type="radio" name="g5" id="g5_2" class="tag-item" value="1.1">
<label for="g5_2" class="tag-label">吐司面包 小型+10%</label>
<input type="radio" name="g5" id="g5_3" class="tag-item" value="1.1">
<label for="g5_3" class="tag-label">格瓦斯 S国+10%</label>
舰船技能（多选）
<input type="checkbox" name="g6" id="g6_1" class="tag-item" value="1.25">
<label for="g6_1" class="tag-label">百眼巨人 CV/CVL/AV+25%</label>
<input type="checkbox" name="g6" id="g6_2" class="tag-item" value="1.5">
<label for="g6_2" class="tag-label">百眼巨人 E国CV/CVL/AV+50%</label>
<input type="checkbox" name="g6" id="g6_3" class="tag-item" value="1.25">
<label for="g6_3" class="tag-label">兰利 CV/CVL/AV+25%</label>
<input type="checkbox" name="g6" id="g6_4" class="tag-item" value="1.5">
<label for="g6_4" class="tag-label">兰利 U国CV/CVL/AV+50%</label>
<input type="checkbox" name="g6" id="g6_5" class="tag-item" value="1.07">
<label for="g6_5" class="tag-label">宁海 +7%</label>
<input type="checkbox" name="g6" id="g6_6" class="tag-item" value="1.15">
<label for="g6_6" class="tag-label">埃姆登 +15%</label>
<input type="checkbox" name="g6" id="g6_7" class="tag-item" value="1.15">
<label for="g6_7" class="tag-label">埃姆登 G国+15%</label>
<input type="checkbox" name="g6" id="g6_8" class="tag-item" value="1.1">
<label for="g6_8" class="tag-label">贝亚恩 CV/CVL/AV+10%</label>
<input type="checkbox" name="g6" id="g6_9" class="tag-item" value="1.1">
<label for="g6_9" class="tag-label">贝亚恩 F国+10%</label>
<input type="checkbox" name="g6" id="g6_10" class="tag-item" value="1.07">
<label for="g6_10" class="tag-label">香取 DD+7%</label>
<input type="checkbox" name="g6" id="g6_11" class="tag-item" value="1.1">
<label for="g6_11" class="tag-label">莱比锡 G国+10%</label>
<input type="checkbox" name="g6" id="g6_12" class="tag-item" value="1.2">
<label for="g6_12" class="tag-label">U-2540 G国SS+20%</label>
<input type="checkbox" name="g6" id="g6_13" class="tag-item" value="1.15">
<label for="g6_13" class="tag-label">列克星敦(CV-16) CV/CVL/AV+15%</label>
<input type="checkbox" name="g6" id="g6_14" class="tag-item" value="1.15">
<label for="g6_14" class="tag-label">47工程 DD+15%</label>
<input type="checkbox" name="g6" id="g6_15" class="tag-item" value="1.1">
<label for="g6_15" class="tag-label">阿金库尔 BB/BC+10%</label>
<input type="checkbox" name="g6" id="g6_16" class="tag-item" value="1.25">
<label for="g6_16" class="tag-label">克劳塞维茨 +25%</label>
<input type="checkbox" name="g6" id="g6_17" class="tag-item" value="1.09">
<label for="g6_17" class="tag-label">济南 +9%</label>
<input type="checkbox" name="g6" id="g6_18" class="tag-item" value="1.09">
<label for="g6_18" class="tag-label">但丁 主力+9%</label>
<input type="checkbox" name="g6" id="g6_19" class="tag-item" value="1.09">
<label for="g6_19" class="tag-label">但丁 I国主力+9%</label>
<input type="checkbox" name="g6" id="g6_20" class="tag-item" value="1.25">
<label for="g6_20" class="tag-label">威武 S国+25%</label>
装备（不可叠加）
<input type="radio" name="g7" id="g7_1" class="tag-item" value="1.0" checked>
<label for="g7_1" class="tag-label">无</label>
<input type="radio" name="g7" id="g7_2" class="tag-item" value="1.07">
<label for="g7_2" class="tag-label">БР-482炮弹 +7%</label>
<input type="radio" name="g7" id="g7_3" class="tag-item" value="1.05">
<label for="g7_3" class="tag-label">四一式三十六厘炮（外膛炮） +5%</label>
<input type="radio" name="g7" id="g7_4" class="tag-item" value="1.05">
<label for="g7_4" class="tag-label">45厘米三联主炮 +5%</label>
<input type="radio" name="g7" id="g7_5" class="tag-item" value="1.09">
<label for="g7_5" class="tag-label">双联15英寸主炮（RP12） +9%</label>
<input type="radio" name="g7" id="g7_6" class="tag-item" value="1.1">
<label for="g7_6" class="tag-label">CM.170 +10%</label>
<input type="radio" name="g7" id="g7_7" class="tag-item" value="1.05">
<label for="g7_7" class="tag-label">T-2V海星 +5%</label>
<input type="radio" name="g7" id="g7_8" class="tag-item" value="1.05">
<label for="g7_8" class="tag-label">F6F（102） +5%</label>
<input type="radio" name="g7" id="g7_9" class="tag-item" value="1.05">
<label for="g7_9" class="tag-label">F4U（冰淇淋） +5%</label>
<input type="radio" name="g7" id="g7_10" class="tag-item" value="1.07">
<label for="g7_10" class="tag-label">特制穿甲弹 +7%</label>
<input type="radio" name="g7" id="g7_11" class="tag-item" value="1.05">
<label for="g7_11" class="tag-label">通气管（潜艇） +5%</label>
<input type="radio" name="g7" id="g7_12" class="tag-item" value="1.01">
<label for="g7_12" class="tag-label">奇迹球鞋 +1%</label>
<input type="radio" name="g7" id="g7_13" class="tag-item" value="1.01">
<label for="g7_13" class="tag-label">蓝色战袍 +1%</label>
<input type="radio" name="g7" id="g7_14" class="tag-item" value="1.01">
<label for="g7_14" class="tag-label">红黑球袜 +1%</label>
<input type="radio" name="g7" id="g7_14" class="tag-item" value="1.01">
<label for="g7_14" class="tag-label">蜘蛛手套 +1%</label>
装备（可叠加）
<input type="checkbox" name="g8" id="g8_1" class="tag-item" value="1.15">
<label for="g8_1" class="tag-label">双联5英寸高平两用炮（L54） U国+15%</label>
<input type="checkbox" name="g8" id="g8_2" class="tag-item" value="1.1">
<label for="g8_2" class="tag-label">六一式舰炮 +10%</label>
<input type="checkbox" name="g8" id="g8_3" class="tag-item" value="1.1">
<label for="g8_3" class="tag-label">六一式舰炮 +10%</label>
<input type="checkbox" name="g8" id="g8_4" class="tag-item" value="1.1">
<label for="g8_4" class="tag-label">海吸血鬼战斗机（埃里克·布朗） +10%</label>
<input type="checkbox" name="g8" id="g8_5" class="tag-item" value="1.1">
<label for="g8_5" class="tag-label">TA-4教练机 +10%</label>
<input type="checkbox" name="g8" id="g8_6" class="tag-item" value="1.05">
<label for="g8_6" class="tag-label">TA-4教练机 列克星敦(CV-16)+5%</label>
<input type="checkbox" name="g8" id="g8_7" class="tag-item" value="1.1">
<label for="g8_7" class="tag-label">TA-4教练机 +10%</label>
<input type="checkbox" name="g8" id="g8_8" class="tag-item" value="1.05">
<label for="g8_8" class="tag-label">TA-4教练机 列克星敦(CV-16)+5%</label>
<input type="checkbox" name="g8" id="g8_9" class="tag-item" value="1.15">
<label for="g8_9" class="tag-label">双联37毫米M1935高炮（测试） F国+15%</label>
<button class="calc-btn" onclick="calculate()">开始计算</button>
预计结果
-
单场获得：0 经验