注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// 动态创建角色属性查看器
$(document).ready(function() {
$('.character-stats-container').each(function() {
createCharacterStatsWidget($(this));
});
});
function createCharacterStatsWidget($container) {
var characterId = $container.data('character');
var widgetId = $container.attr('id');
// 创建 Widget 的 HTML 结构
var widgetHTML = `
<div class="character-stats-widget">
<div class="character-header">
<h2 class="character-name">加载中...</h2>
<p class="character-description"></p>
</div>
<div class="level-selector">
<div class="level-display">当前等级: <span class="current-level">1</span></div>
<div class="slider-container">
<input type="range" min="1" max="90" value="1" class="level-slider">
</div>
<div class="quick-buttons">
<button class="level-btn" data-level="1">1</button>
<button class="level-btn" data-level="10">10</button>
<button class="level-btn" data-level="20">20</button>
<button class="level-btn" data-level="30">30</button>
<button class="level-btn" data-level="40">40</button>
<button class="level-btn" data-level="50">50</button>
<button class="level-btn" data-level="60">60</button>
<button class="level-btn" data-level="70">70</button>
<button class="level-btn" data-level="80">80</button>
<button class="level-btn" data-level="90">90</button>
</div>
</div>
<div class="stats-container">
<div class="stat-card attack">
<div class="stat-title">
<span>攻击力</span>
</div>
<div class="stat-value attack-value">-</div>
<div class="stat-progress">
<div class="stat-bar attack-bar"></div>
</div>
<div class="stat-growth">每级成长: <span class="attack-growth">-</span></div>
</div>
<div class="stat-card health">
<div class="stat-title">
<span>生命值</span>
</div>
<div class="stat-value health-value">-</div>
<div class="stat-progress">
<div class="stat-bar health-bar"></div>
</div>
<div class="stat-growth">每级成长: <span class="health-growth">-</span></div>
</div>
</div>
<div class="loading-message">正在加载角色数据...</div>
<div class="error-message" style="display: none;">加载数据失败，请刷新页面重试</div>
</div>
`;
// 插入 HTML
$container.html(widgetHTML);
// 添加 CSS 样式（如果尚未添加）
if (!$('#character-stats-styles').length) {
$('head').append(`
<style id="character-stats-styles">
.character-stats-widget {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.character-header {
text-align: center;
margin-bottom: 20px;
}
.character-name {
color: #4a6fa5;
margin-bottom: 10px;
}
.character-description {
color: #666;
font-style: italic;
}
.loading-message, .error-message {
text-align: center;
padding: 20px;
color: #666;
}
.error-message {
color: #d32f2f;
background-color: #ffebee;
border-radius: 4px;
}
.level-selector {
margin-bottom: 30px;
}
.level-display {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #4a6fa5;
}
.slider-container {
position: relative;
margin-bottom: 10px;
}
.level-slider {
width: 100%;
height: 10px;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(to right, #e0e0e0, #4a6fa5);
outline: none;
border-radius: 5px;
}
.level-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #4a6fa5;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.level-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #4a6fa5;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.quick-buttons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px;
}
.level-btn {
flex: 1;
min-width: 60px;
padding: 8px 5px;
background-color: #e9ecef;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
}
.level-btn:hover {
background-color: #d0d8e2;
}
.level-btn.active {
background-color: #4a6fa5;
color: white;
}
.stats-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-left: 4px solid #4a6fa5;
}
.stat-card.attack {
border-left-color: #ff6b6b;
}
.stat-card.health {
border-left-color: #4caf50;
}
.stat-title {
font-size: 18px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
margin-bottom: 15px;
}
.stat-progress {
height: 10px;
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
}
.stat-bar {
height: 100%;
border-radius: 5px;
width: 0%;
transition: width 0.3s ease;
}
.attack .stat-bar {
background-color: #ff6b6b;
}
.health .stat-bar {
background-color: #4caf50;
}
.stat-growth {
margin-top: 10px;
font-size: 14px;
color: #666;
}
@media (max-width: 600px) {
.character-stats-widget {
padding: 15px;
}
.stats-container {
grid-template-columns: 1fr;
}
.quick-buttons {
gap: 3px;
}
.level-btn {
min-width: 50px;
padding: 6px 3px;
font-size: 14px;
}
}
</style>
`);
}
// 初始化 Widget
// initCharacterStatsWidget($container.find('.character-stats-widget'));
}