查看“MediaWiki:StatCalcTemplate”的源代码

<html>
<style>
.stat-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 20px auto;
  font-family: sans-serif;
}
fieldset {
  padding: 10px 15px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #ffffffcc;
}
legend {
  font-weight: bold;
}
label {
  display: inline-block;
  margin: 5px 0;
}
input[type="number"], select {
  width: 60px;
}
.stat-table {
  width: 100%;
  border-collapse: collapse;
}
.stat-table td, .stat-table th {
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px;
}
</style>

<div class="stat-wrapper">
  <!-- 基础配置 -->
  <fieldset>
    <legend>基础配置</legend>
    <label>等级：<input id="level" type="number" value="100" min="1" max="100"></label><br>
    <label>个体值：<input id="iv" type="number" value="31" min="0" max="31"></label><br>
    <label>性格：
      <select id="nature">
        <option value="neutral">平衡</option>
        <option value="adamant">固执</option>
        <option value="modest">保守</option>
        <option value="jolly">爽朗</option>
        <option value="bold">大胆</option>
        <option value="calm">冷静</option>
      </select>
    </label><br><br>
    <button onclick="resetStats()">重置</button>
    <button onclick="calcStats()">计算</button>
  </fieldset>

  <!-- 学习力 -->
  <fieldset>
    <legend>学习力</legend>
    <label>体力：<input name="ev" type="number" value="0"></label><br>
    <label>攻击：<input name="ev" type="number" value="0"></label><br>
    <label>防御：<input name="ev" type="number" value="0"></label><br>
    <label>特攻：<input name="ev" type="number" value="0"></label><br>
    <label>特防：<input name="ev" type="number" value="0"></label><br>
    <label>速度：<input name="ev" type="number" value="0"></label><br>
    <b>剩余学习力：<span id="ev-remaining">510</span></b>
  </fieldset>

  <!-- 种族值 -->
  <fieldset>
    <legend>种族值</legend>
<table class="stat-table">
  <tr><th>项目</th><th>值</th></tr>
  <tr><td>体力</td><td><input name="base" type="number" value="" min="1"></td></tr>
  <tr><td>攻击</td><td><input name="base" type="number" value="" min="1"></td></tr>
  <tr><td>防御</td><td><input name="base" type="number" value="" min="1"></td></tr>
  <tr><td>特攻</td><td><input name="base" type="number" value="" min="1"></td></tr>
  <tr><td>特防</td><td><input name="base" type="number" value="" min="1"></td></tr>
  <tr><td>速度</td><td><input name="base" type="number" value="" min="1"></td></tr>
</table>

  </fieldset>

  <!-- 计算结果 -->
  <fieldset>
    <legend>计算结果</legend>
    <table class="stat-table">
      <tr><th>项目</th><th>结果</th></tr>
      <tr><td>体力</td><td class="result">0</td></tr>
      <tr><td>攻击</td><td class="result">0</td></tr>
      <tr><td>防御</td><td class="result">0</td></tr>
      <tr><td>特攻</td><td class="result">0</td></tr>
      <tr><td>特防</td><td class="result">0</td></tr>
      <tr><td>速度</td><td class="result">0</td></tr>
    </table>
  </fieldset>
</div>

<script>
function getNatureModifiers(nature) {
  const map = {
    adamant: [1.1, 1.0, 1.0, 0.9, 1.0],
    modest:  [0.9, 1.0, 1.0, 1.1, 1.0],
    jolly:   [1.0, 1.0, 1.0, 0.9, 1.1],
    bold:    [0.9, 1.1, 1.0, 1.0, 1.0],
    calm:    [0.9, 1.0, 1.0, 1.0, 1.1],
    neutral: [1.0, 1.0, 1.0, 1.0, 1.0]
  };
  return map[nature] || map.neutral;
}

function calcStats() {
  const level = parseInt(document.getElementById("level").value);
  const iv = parseInt(document.getElementById("iv").value);
  const evs = document.getElementsByName("ev");
  const bases = document.querySelectorAll(".base");
  const results = document.querySelectorAll(".result");
  const nature = document.getElementById("nature").value;
  const modifiers = getNatureModifiers(nature);

  let totalEV = 0;
  for (let i = 0; i < 6; i++) {
    const base = parseInt(bases[i].value || "0");
    const ev = parseInt(evs[i].value || "0");
    totalEV += ev;
    let stat;
    if (i === 0) {
      stat = Math.floor(((base * 2 + iv + Math.floor(ev / 4)) * level) / 100 + level + 10);
    } else {
      stat = Math.floor(((((base * 2 + iv + Math.floor(ev / 4)) * level) / 100) + 5) * modifiers[i - 1]);
    }
    results[i].textContent = stat;
  }
  document.getElementById("ev-remaining").textContent = Math.max(510 - totalEV, 0);
}

function resetStats() {
  document.getElementById("level").value = 100;
  document.getElementById("iv").value = 31;
  document.getElementById("nature").value = "neutral";
  document.querySelectorAll("input[name='ev']").forEach(i => i.value = 0);
  document.querySelectorAll(".result").forEach(i => i.textContent = "0");
  document.getElementById("ev-remaining").textContent = "510";
  document.getElementById("calc-btn").addEventListener("click", calcStats);

}
</script>
</html>