用户:RedDragon/Test2：修订间差异
来自Rizline中文维基
更多操作
小 |
小 |
||
| 第1行： | 第1行： | ||
<html> | |||
<table class="infobox" cellspacing="3" style="border-collapse:separate;border-spacing:2px;float:right;"> | |||
<tbody> | |||
<tr class="infobox-title"><th colspan="2" style="padding:8px;background:#ccc;">曲目</th></tr> | |||
<tr><td colspan="2" style="text-align:center;"> | |||
<img id="song-image" src="/images/thumb/4/41/%E6%8F%92%E7%94%BB%E5%9B%BE%E6%A0%87.png/200px-%E6%8F%92%E7%94%BB%E5%9B%BE%E6%A0%87.png" width="200" height="200"> | |||
</td></tr> | |||
<tr class="infobox-header"><th colspan="2" style="padding:8px;background:#ccf;">限制</th></tr> | |||
<tr><th scope="row" class="infobox-label" style="width:90px;background:#ddf;">难度</th><td class="infobox-data" id="difficulty-data">a</td></tr> | |||
<tr><th scope="row" class="infobox-label" style="width:90px;background:#ddf;">流速</th><td class="infobox-data" id="speed-data">b</td></tr> | |||
<tr><th scope="row" class="infobox-label" style="width:90px;background:#ddf;">MOD</th><td class="infobox-data" id="mod-data">c</td></tr> | |||
<tr><th scope="row" class="infobox-label" style="width:90px;background:#ddf;">其他</th><td class="infobox-data" id="other-data">d</td></tr> | |||
</tbody></table> | |||
< | <div id="debug-output" style="border:1px solid #ccc; padding:10px; margin-top:20px;"></div> | ||
<script> | <script> | ||
$(document).ready(function() { | |||
// 调试输出 | |||
function debug(msg) { | |||
$('#debug-output').append('<div>' + msg + '</div>'); | |||
console.log(msg); | |||
} | |||
debug('脚本开始执行...'); | |||
// 首先测试默认颜色是否工作 | |||
setTimeout(function() { | |||
debug('测试默认颜色...'); | |||
$('.infobox-title th').css('background', '#94E1FF'); | |||
$('.infobox-header th').css('background', '#A3E5FF'); | |||
$('.infobox-label').css('background', '#B2E9FE'); | |||
debug('默认颜色已应用'); | |||
}, 1000); | |||
// 获取曲目列表 | |||
debug('开始获取曲目列表...'); | |||
$.ajax({ | |||
url: mw.util.wikiScript('api'), | |||
data: { | |||
action: 'parse', | |||
page: '曲目列表', | |||
prop: 'text', | |||
format: 'json' | |||
}, | |||
success: function(data) { | |||
debug('成功获取曲目列表API响应'); | |||
console.log('API响应:', data); | |||
if (!data.parse || !data.parse.text) { | |||
debug('错误：API响应格式不正确'); | |||
return; | |||
} | |||
var content = data.parse.text['*']; | |||
var $content = $('<div>').html(content); | |||
var songs = []; | |||
debug('开始解析表格...'); | |||
// 尝试多种选择器 | |||
var $tables = $content.find('table.wikitable, table, .wikitable'); | |||
debug('找到表格数量: ' + $tables.length); | |||
if ($tables.length === 0) { | |||
debug('错误：未找到表格，尝试直接查找行...'); | |||
$content.find('tr').each(function(index) { | |||
if (index < 5) debug('行 ' + index + ' HTML: ' + $(this).html().substring(0, 100)); | |||
}); | |||
} | |||
$tables.first().find('tr').each(function(index) { | |||
if (index === 0) { | |||
debug('表头: ' + $(this).text()); | |||
return; | |||
} | |||
var $cells = $(this).find('td, th'); | |||
debug('行 ' + index + ' 单元格数量: ' + $cells.length); | |||
if ($cells.length >= 3) { | |||
var song = { | |||
image: extractImageUrl($cells.eq(0)), | |||
title: $cells.eq(1).text().trim(), | |||
ez: $cells.eq(4) ? $cells.eq(4).text().trim() : '?', | |||
hd: $cells.eq(5) ? $cells.eq(5).text().trim() : '?', | |||
in: $cells.eq(6) ? $cells.eq(6).text().trim() : '?' | |||
}; | |||
if (song.title && song.title !== '') { | |||
songs.push(song); | |||
debug('找到曲目: ' + song.title); | |||
} | |||
} | |||
}); | |||
debug('总共找到曲目: ' + songs.length); | |||
if (songs.length > 0) { | |||
var randomSong = songs[Math.floor(Math.random() * songs.length)]; | |||
debug('随机选择曲目: ' + randomSong.title); | |||
loadSongDetails(randomSong); | |||
} else { | |||
debug('错误：未找到任何曲目，使用备用方案...'); | |||
useFallbackData(); | |||
} | |||
}, | |||
error: function(xhr, status, error) { | |||
debug('获取曲目列表失败: ' + error); | |||
useFallbackData(); | |||
} | |||
}); | |||
function extractImageUrl($cell) { | |||
var $img = $cell.find('img'); | |||
if ($img.length > 0) { | |||
var src = $img.attr('src') || $img.attr('data-src'); | |||
debug('找到图片: ' + src); | |||
return src; | |||
} | |||
return $cell.text().trim(); | |||
} | |||
function useFallbackData() { | |||
debug('使用备用数据...'); | |||
var fallbackSong = { | |||
title: '测试曲目', | |||
image: '/images/thumb/4/41/%E6%8F%92%E7%94%BB%E5%9B%BE%E6%A0%87.png/200px-%E6%8F%92%E7%94%BB%E5%9B%BE%E6%A0%87.png', | |||
ez: '1', | |||
hd: '6', | |||
in: '11' | |||
}; | |||
updateSongInfo(fallbackSong); | |||
updateStyles({ | |||
titleStyle: '#94E1FF', | |||
headerStyle: '#A3E5FF', | |||
labelStyle: '#B2E9FE' | |||
}); | |||
} | |||
function loadSongDetails(song) { | |||
debug('加载曲目详情: ' + song.title); | |||
updateSongInfo(song); | |||
$.ajax({ | $.ajax({ | ||
url: mw.util.wikiScript('api'), | url: mw.util.wikiScript('api'), | ||
data: { | data: { | ||
action: 'parse', | action: 'parse', | ||
page: | page: song.title, | ||
prop: 'text', | prop: 'text', | ||
format: 'json' | format: 'json' | ||
}, | }, | ||
success: function (data) { | success: function(data) { | ||
var content = data.parse.text['*'] | debug('成功获取曲目详情'); | ||
var $content = $('<div>').html(content) | var content = data.parse.text['*']; | ||
var | var $content = $('<div>').html(content); | ||
var titleStyle = getBackgroundColor($content.find('.infobox-title')) || '#94E1FF'; | |||
var headerStyle = getBackgroundColor($content.find('.infobox-header')) || '#A3E5FF'; | |||
var labelStyle = getBackgroundColor($content.find('.infobox-label')) || '#B2E9FE'; | |||
debug('提取的颜色 - 标题: ' + titleStyle + ', 头部: ' + headerStyle + ', 标签: ' + labelStyle); | |||
updateStyles({ titleStyle: titleStyle, headerStyle: headerStyle, labelStyle: labelStyle }); | |||
}, | |||
error: function() { | |||
debug('获取曲目详情失败，使用默认颜色'); | |||
updateStyles({ | |||
titleStyle: '#94E1FF', | |||
headerStyle: '#A3E5FF', | |||
labelStyle: '#B2E9FE' | |||
}); | |||
} | |||
} | } | ||
}) | }); | ||
} | |||
function getBackgroundColor($element) { | |||
if ($element.length === 0) { | |||
return | debug('未找到样式元素'); | ||
return null; | |||
} | } | ||
var bgColor = $element.css('background-color'); | |||
debug('原始背景色: ' + bgColor); | |||
if (bgColor && bgColor.startsWith('rgb')) { | |||
var rgb = bgColor.match(/\d+/g); | |||
if (rgb && rgb.length === 3) { | |||
var hex = '#' + | |||
('0' + parseInt(rgb[0]).toString(16)).slice(-2) + | |||
('0' + parseInt(rgb[1]).toString(16)).slice(-2) + | |||
('0' + parseInt(rgb[2]).toString(16)).slice(-2); | |||
debug('转换后的HEX: ' + hex); | |||
return hex; | |||
} | } | ||
} | } | ||
return bgColor; | |||
} | |||
function updateSongInfo(song) { | |||
debug('更新曲目信息: ' + song.title); | |||
$('.infobox-title th').text(song.title); | |||
$('# | |||
if (song.image) { | |||
$('#song-image').attr('src', song.image); | |||
debug('更新图片: ' + song.image); | |||
} | } | ||
}) | |||
window.difficultyArray = [ | |||
createDiffSpan("EZ", song.ez), | |||
createDiffSpan("HD", song.hd), | |||
createDiffSpan("IN", song.in), | |||
'<span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#53D6FF;padding:0 0.80em;margin:0.1em 0.50em;">无限制</span>' | |||
]; | |||
debug('难度数组创建完成'); | |||
generateRandomRestrictions(); | |||
} | |||
function createDiffSpan(diff, level) { | |||
var colors = { EZ: '#57E4C4', HD: '#FDBA61', IN: '#FE8661' }; | |||
return '<span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:' + colors[diff] + ';padding:0 0.80em;margin:0.1em 0.50em;">' + diff + ' ' + level + '</span>'; | |||
} | |||
function updateStyles(styles) { | |||
debug('更新样式...'); | |||
$('.infobox-title th').css('background', styles.titleStyle); | |||
$('.infobox-header th').css('background', styles.headerStyle); | |||
$('.infobox-label').css('background', styles.labelStyle); | |||
debug('样式更新完成'); | |||
} | |||
function generateRandomRestrictions() { | |||
debug('生成随机限制...'); | |||
var randomDifficulty = window.difficultyArray[Math.floor(Math.random() * window.difficultyArray.length)]; | |||
$('#difficulty-data').html(randomDifficulty); | |||
var speedOptions = ["无限制", "无限制", "无限制"].concat(Array.from({ length: 91 }, (_, i) => (i + 10) / 10.0)); | |||
$('#speed-data').text(speedOptions[Math.floor(Math.random() * speedOptions.length)]); | |||
var modOptions = ["无MOD"]; | |||
var otherOptions = ["无限制"]; | |||
$('#mod-data').text(modOptions[Math.floor(Math.random() * modOptions.length)]); | |||
$('#other-data').text(otherOptions[Math.floor(Math.random() * otherOptions.length)]); | |||
debug('随机限制生成完成'); | |||
} | |||
}); | |||
</script> | </script> | ||
</html> | </html> | ||
