微件:data猫宫又奈:修订间差异

(创建页面,内容为“ <includeonly> <div class="character-shuju"> <div class="character-stats"> <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="生命" cla…”)
 
无编辑摘要
第897行: 第897行:
         }
         }
       });
       });
      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><noinclude>
</includeonly><noinclude>

2024年7月1日 (一) 16:38的版本