微件:CharacterAttributes：修订间差异

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

角色等级:1

生命值 7672

攻击力 937

防御力 937

冲击力 937

暴击率 937

暴击伤害 937

穿透率 937

穿透值 937

异常精通 937

异常掌控 937

能量上限 937

能量自动回复 937

@@ 第1行： / 第1行： @@
 <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="60" value="1">
+       <div class="level-display">
+        <div class="slider-container">
+          <label for="levelSlider">角色等级:<span id="currentLevel">1</span></label>
+          <input type="range" id="levelSlider" min="1" max="60" value="1">
+        </div>
+      </div>
+      <div class="stats-grid">
+        <div class="stat-item">
+          <span class="stat-label">生命值</span>
+          <span id="生命值" class="stat-value2">7672</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 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 id="attributes">
+  </div>
-      <p>生命值: <span id="生命值">100</span></p>
-      <p>攻击力: <span id="攻击力">10</span></p>
-      <p>防御力: <span id="防御力">5</span></p>
+  <script>
-      <p>冲击力: <span id="冲击力">5</span></p>
+     document.addEventListener('DOMContentLoaded', function () {
-    </div>
-    <script>
-     document.addEventListener('DOMContentLoaded', function() {
        const data = {
          "levels": {
-        "1": {"生命值": "617","攻击力": "135","防御力": "49","冲击力": "93","暴击率": "5%","暴击伤害": "50%","穿透率":
+          "1": { "生命值": "617", "攻击力": "135", "防御力": "49", "冲击力": "93", "暴击率": "5%", "暴击伤害": "50%", "穿透率":
          }
        };
        const levelSlider = document.getElementById('levelSlider');
        const currentLevel = document.getElementById('currentLevel');
@@ 第84行： / 第135行： @@
        const 防御力 = document.getElementById('防御力');
        const 冲击力 = document.getElementById('冲击力');
+       const 暴击率 = document.getElementById('暴击率');
+      const 暴击伤害 = document.getElementById('暴击伤害');
-       levelSlider.addEventListener('input', function() {
+      const 穿透率 = document.getElementById('穿透率');
+      const 穿透值 = document.getElementById('穿透值');
+      const 异常精通 = document.getElementById('异常精通');
+      const 异常掌控 = document.getElementById('异常掌控');
+      const 能量上限 = document.getElementById('能量上限');
+      const 能量自动回复 = document.getElementById('能量自动回复');
+       levelSlider.addEventListener('input', function () {
          const level = levelSlider.value;
          currentLevel.textContent = level;
          const attributes = data.levels[level];
          if (attributes) {
@@ 第96行： / 第154行： @@
            防御力.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 initialPercentage = ((levelSlider.value - levelSlider.min) / (levelSlider.max - levelSlider.min)) * 100;
+      levelSlider.style.background = `linear-gradient(to right, #Bad700 0%, #Bad700 ${initialPercentage - 1}%, #555 ${initialPercentage + 1}%, #555 100%)`;
      });
-    </script>
+  </script>
-    </includeonly>
+</includeonly><noinclude>{{#widget:CharacterAttributes}}