微件: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的版本