微件:CharacterAttributes：修订间差异

2024年6月27日 (四) 15:37的版本

@@ 第1行： / 第1行： @@
+<link href="微件CharacterAttributesv2.0.css" type="text/css" rel="stylesheet" />
 <includeonly>
-     <div>
-       <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 class="custom-slider-thumb" role="slider" tabindex="0" aria-valuemin="1" aria-valuemax="60"
+          aria-valuenow="60" aria-disabled="false" style="left: 100%;"></div>
+      </div>
      </div>
-     <div id="attributes">
+     <div class="stats-grid">
-       <p>生命值: <span id="生命值"> </span></p>
+       <div class="stat-item">
-       <p>攻击力: <span id="攻击力"> </span></p>
+        <span class="stat-label">生命值</span>
-       <p>防御力: <span id="防御力"> </span></p>
+        <span id="生命值" class="stat-value">7672</span>
-       <p>冲击力: <span id="冲击力"> </span></p>
+      </div>
-       <p>暴击率: <span id="暴击率"> </span></p>
+       <div class="stat-item">
-       <p>暴击伤害: <span id="暴击伤害"> </span></p>
+        <span class="stat-label">攻击力</span>
-       <p>穿透率: <span id="穿透率"> </span></p>
+        <span id="攻击力" class="stat-value">937</span>
-       <p>穿透值: <span id="穿透值"> </span></p>
+      </div>
-       <p>异常精通: <span id="异常精通"> </span></p>
+       <div class="stat-item">
-       <p>异常掌控: <span id="异常掌控"> </span></p>
+        <span class="stat-label">防御力</span>
-       <p>能量上限: <span id="能量上限"> </span></p>
+        <span id="防御力" class="stat-value">937</span>
-       <p>能量自动回复: <span id="能量自动回复"> </span></p>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">冲击力</span>
+        <span id="冲击力" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label stat-label2">暴击率</span>
+        <span id="暴击率" class="stat-value stat-label2">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">暴击伤害</span>
+        <span id="暴击伤害" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">穿透率</span>
+        <span id="穿透率" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">穿透值</span>
+        <span id="穿透值" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">异常精通</span>
+        <span id="异常精通" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">异常掌控</span>
+        <span id="异常掌控" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">能量上限</span>
+        <span id="能量上限" class="stat-value">937</span>
+      </div>
+       <div class="stat-item">
+        <span class="stat-label">能量自动回复</span>
+        <span id="能量自动回复" class="stat-value">937</span>
+      </div>
      </div>
+  </div>
-    <script>
-     document.addEventListener('DOMContentLoaded', function() {
+  <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');
@@ 第100行： / 第145行： @@
        const 能量上限 = document.getElementById('能量上限');
        const 能量自动回复 = document.getElementById('能量自动回复');
+       levelSlider.addEventListener('input', function () {
-       levelSlider.addEventListener('input', function() {
          const level = levelSlider.value;
          currentLevel.textContent = level;
          const attributes = data.levels[level];
          if (attributes) {
@@ 第122行： / 第166行： @@
          }
        });
+      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>