微件:CharacterAttributes:修订间差异

无编辑摘要
标签已被回退
无编辑摘要
标签手工回退
 
(未显示同一用户的16个中间版本)
第1行: 第1行:
<includeonly>
<includeonly>
<div>
  <div class="character-shuju">
  <label for="levelSlider">角色等级: <span id="currentLevel">1</span></label>
    <div class="character-stats">
  <input type="range" id="levelSlider" min="1" max="100" value="1">
      <div class="level-display">
</div>
        <div class="slider-container">
<div id="attributes">
          <label for="levelSlider">角色等级:<span id="currentLevel">1</span></label>
  <p>生命值: <span id="生命">100</span></p>
          <input type="range" id="levelSlider" min="1" max="60" value="1">
  <p>攻击力: <span id="攻击力">10</span></p>
        </div>
  <p>防御力: <span id="防御力">5</span></p>
      </div>
  <p>冲击力: <span id="冲击力">5</span></p>
      <div class="stats-grid">
  <p>暴击率: <span id="暴击率">5</span></p>
        <div class="stat-item">
  <p>暴击伤害: <span id="暴击伤害">5</span></p>
          <span class="stat-label">生命值</span>
  <p>穿透率: <span id="穿透率">5</span></p>
          <span id="生命值" class="stat-value2">7672</span>
  <p>穿透值: <span id="穿透值">5</span></p>
        </div>
  <p>异常精通: <span id="异常精通">5</span></p>
        <div class="stat-item">
  <p>异常掌控: <span id="异常掌控">5</span></p>
          <span class="stat-label">攻击力</span>
  <p>能量上限: <span id="能量上限">5</span></p>
          <span id="攻击力" class="stat-value2">937</span>
  <p>能量自动回复: <span id="能量自动回复">5</span></p>
        </div>
        <div class="stat-item">
          <span class="stat-label">防御力</span>
          <span id="防御力" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">冲击力</span>
          <span id="冲击力" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label stat-label2">暴击率</span>
          <span id="暴击率" class="stat-value2 stat-label2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">暴击伤害</span>
          <span id="暴击伤害" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">穿透率</span>
          <span id="穿透率" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">穿透值</span>
          <span id="穿透值" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">异常精通</span>
          <span id="异常精通" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">异常掌控</span>
          <span id="异常掌控" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">能量上限</span>
          <span id="能量上限" class="stat-value2">937</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">能量自动回复</span>
          <span id="能量自动回复" class="stat-value2">937</span>
        </div>
      </div>
    </div>
  </div>


</div>


<script>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('DOMContentLoaded', function () {
  const data = {
      const data = {
         "levels": {
         "levels": {
        "1": {
          "1": { "生命值": "617", "攻击力": "135", "防御力": "49", "冲击力": "93", "暴击率": "5%", "暴击伤害": "50%", "穿透率":
            "生命": "617",
            "攻击力": "135",
            "防御力": "49",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "2": {
            "生命": "701",
            "攻击力": "145",
            "防御力": "56",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "3": {
            "生命": "784",
            "攻击力": "154",
            "防御力": "62",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "4": {
            "生命": "868",
            "攻击力": "164",
            "防御力": "69",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "5": {
            "生命": "952",
            "攻击力": "173",
            "防御力": "75",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "6": {
            "生命": "1036",
            "攻击力": "183",
            "防御力": "82",
            "冲击力": "93",
            "暴击率": "5%",
            "暴击伤害": "50%",
            "穿透率": "0%",
            "穿透值": "0",
            "异常精通": "100",
            "异常掌控": "102",
            "能量上限": "120",
            "能量自动回复": "1.2"
        },
        "7": {
            "生命": "1119",
            "攻击力": "192",
            "
         }
         }
    }
      };


  };
      const levelSlider = document.getElementById('levelSlider');
      const currentLevel = document.getElementById('currentLevel');
      const 生命值 = document.getElementById('生命值');
      const 攻击力 = document.getElementById('攻击力');
      const 防御力 = document.getElementById('防御力');
      const 冲击力 = document.getElementById('冲击力');
      const 暴击率 = document.getElementById('暴击率');
      const 暴击伤害 = document.getElementById('暴击伤害');
      const 穿透率 = document.getElementById('穿透率');
      const 穿透值 = document.getElementById('穿透值');
      const 异常精通 = document.getElementById('异常精通');
      const 异常掌控 = document.getElementById('异常掌控');
      const 能量上限 = document.getElementById('能量上限');
      const 能量自动回复 = document.getElementById('能量自动回复');


  const levelSlider = document.getElementById('levelSlider');
      levelSlider.addEventListener('input', function () {
  const currentLevel = document.getElementById('currentLevel');
        const level = levelSlider.value;
  const health = document.getElementById('health');
        currentLevel.textContent = level;
  const attack = document.getElementById('attack');
  const defense = document.getElementById('defense');


  levelSlider.addEventListener('input', function() {
        const attributes = data.levels[level];
    const level = levelSlider.value;
        if (attributes) {
    currentLevel.textContent = level;
          生命值.textContent = attributes.生命值;
          攻击力.textContent = attributes.攻击力;
          防御力.textContent = attributes.防御力;
          冲击力.textContent = attributes.冲击力;
          暴击率.textContent = attributes.暴击率;
          暴击伤害.textContent = attributes.暴击伤害;
          穿透率.textContent = attributes.穿透率;
          穿透值.textContent = attributes.穿透值;
          异常精通.textContent = attributes.异常精通;
          异常掌控.textContent = attributes.异常掌控;
          能量上限.textContent = attributes.能量上限;
          能量自动回复.textContent = attributes.能量自动回复;
        }
      });
 
      levelSlider.addEventListener('input', function () {
        const value = levelSlider.value; // 获取滑条的当前值
        const min = levelSlider.min; // 获取滑条的最小值
        const max = levelSlider.max; // 获取滑条的最大值
        const percentage = ((value - min) / (max - min)) * 100; // 计算滑过部分的百分比
        const offset = 3; // 使用1%作为固定偏移量
 
        // 动态设置滑条的背景颜色,已滑过部分为#Bad700,未滑过部分为#555
        levelSlider.style.background = `linear-gradient(to right, #Bad700 0%, #Bad700 ${percentage - offset}%, #555 ${percentage + offset}%, #555 100%)`;
      });


    const attributes = data.levels[level];
      // 初始化滑条背景颜色
    if (attributes) {
      const initialPercentage = ((levelSlider.value - levelSlider.min) / (levelSlider.max - levelSlider.min)) * 100;
      health.textContent = attributes.health;
       levelSlider.style.background = `linear-gradient(to right, #Bad700 0%, #Bad700 ${initialPercentage - 1}%, #555 ${initialPercentage + 1}%, #555 100%)`;
       attack.textContent = attributes.attack;
    });
      defense.textContent = attributes.defense;
  </script>
    }
</includeonly><noinclude>{{#widget:CharacterAttributes}}
  });
});
</script>
</includeonly>

2024年6月27日 (四) 16:24的最新版本

生命值 7672
攻击力 937
防御力 937
冲击力 937
暴击率 937
暴击伤害 937
穿透率 937
穿透值 937
异常精通 937
异常掌控 937
能量上限 937
能量自动回复 937
{{#widget:CharacterAttributes}}