微件:CharacterAttributes:修订间差异
无编辑摘要 |
无编辑摘要 标签:手工回退 |
||
(未显示同一用户的8个中间版本) | |||
第1行: | 第1行: | ||
<includeonly> | <includeonly> | ||
<div> | <div class="character-shuju"> | ||
<label for="levelSlider">角色等级: <span id="currentLevel">1</span></label> | <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="生命值" 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> | ||
</div> | |||
<script> | |||
document.addEventListener('DOMContentLoaded', function () { | |||
document.addEventListener('DOMContentLoaded', function() { | |||
const data = { | const data = { | ||
"levels": { | "levels": { | ||
"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行: | 第143行: | ||
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行: | 第164行: | ||
} | } | ||
}); | }); | ||
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> | |||
</includeonly><noinclude>{{#widget:CharacterAttributes}} |
2024年6月27日 (四) 16:24的最新版本
生命值
7672
攻击力
937
防御力
937
冲击力
937
暴击率
937
暴击伤害
937
穿透率
937
穿透值
937
异常精通
937
异常掌控
937
能量上限
937
能量自动回复
937