微件:CharacterAttributes:修订间差异

无编辑摘要
无编辑摘要
第1行: 第1行:
<link href="微件CharacterAttributesv2.0.css" type="text/css" rel="stylesheet" />
<includeonly>
<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>
     <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>
   
  </div>
    <script>
 
     document.addEventListener('DOMContentLoaded', function() {
 
  <script>
     document.addEventListener('DOMContentLoaded', function () {
       const data = {
       const data = {
         "levels": {
         "levels": {
        "1": {"生命值": "617","攻击力": "135","防御力": "49","冲击力": "93","暴击率": "5%","暴击伤害": "50%","穿透率":
          "1": { "生命值": "617", "攻击力": "135", "防御力": "49", "冲击力": "93", "暴击率": "5%", "暴击伤害": "50%", "穿透率":
         }
         }
       };
       };
   
 
       const levelSlider = document.getElementById('levelSlider');
       const levelSlider = document.getElementById('levelSlider');
       const currentLevel = document.getElementById('currentLevel');
       const currentLevel = document.getElementById('currentLevel');
第100行: 第145行:
       const 能量上限 = document.getElementById('能量上限');
       const 能量上限 = document.getElementById('能量上限');
       const 能量自动回复 = document.getElementById('能量自动回复');
       const 能量自动回复 = document.getElementById('能量自动回复');
     
 
   
       levelSlider.addEventListener('input', function () {
       levelSlider.addEventListener('input', function() {
         const level = levelSlider.value;
         const level = levelSlider.value;
         currentLevel.textContent = level;
         currentLevel.textContent = level;
   
 
         const attributes = data.levels[level];
         const attributes = data.levels[level];
         if (attributes) {
         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>

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

<link href="微件CharacterAttributesv2.0.css" type="text/css" rel="stylesheet" />