更多操作
小无编辑摘要 |
小无编辑摘要 |
||
| 第3行： | 第3行： | ||
<table width="100%" style="border:none; border-collapse:collapse;"> | <table width="100%" style="border:none; border-collapse:collapse;"> | ||
<tr> | <tr> | ||
<td colspan="2" style="text-align:center;"> | <td colspan="2" style="text-align:center; background-color:#57E4C4;"> | ||
<div id="difficulty" onclick="cycleDifficulty(this)" data-current="0" style="cursor:pointer;"></div> | <div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ 1", "HD 6", "IN 9"]' data-current="0" | ||
style="cursor:pointer;">EZ 1</div> | |||
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td width="15%" height="300px" style="text-align:center; background-color:#ABCDEF;"> | <td width="15%" height="300px" style="text-align:center; background-color:#ABCDEF;"> | ||
<div id="ratio" onclick="cycleRatio(this)" data-current="0" style="cursor:pointer;"></div> | <div id="ratio" onclick="cycleRatio(this)" data-states='["16:9", "4:3"]' data-current="0" style="cursor:pointer;"> | ||
16:9</div> | |||
</td> | </td> | ||
<td> | <td> | ||
| 第18行： | 第20行： | ||
<script> | <script> | ||
const songName = "Abgrund"; | const songName = "Abgrund"; | ||
| 第30行： | 第31行： | ||
function cycleDifficulty(element) { | function cycleDifficulty(element) { | ||
const states = | const states = JSON.parse(element.getAttribute('data-states')); | ||
const current = parseInt(element.getAttribute('data-current')) | const current = parseInt(element.getAttribute('data-current')); | ||
const next = (current + 1) % states.length | const next = (current + 1) % states.length; | ||
element.textContent = states[next] | element.textContent = states[next]; | ||
element.setAttribute('data-current', next.toString()) | element.setAttribute('data-current', next.toString()); | ||
const difficultyType = states[next].split(' ')[0] // 获取难度 | const difficultyType = states[next].split(' ')[0]; // 获取难度 | ||
const color = difficultyColors[difficultyType] || '# | const color = difficultyColors[difficultyType] || '#FFFFFF'; // 更新背景色 | ||
element.style.backgroundColor = color | element.style.backgroundColor = color; | ||
element.parentElement.style.backgroundColor = color | element.parentElement.style.backgroundColor = color; | ||
updateOutput() | updateOutput(); | ||
} | } | ||
function cycleRatio(element) { | function cycleRatio(element) { | ||
const states = | const states = JSON.parse(element.getAttribute('data-states')); | ||
const current = parseInt(element.getAttribute('data-current')) | const current = parseInt(element.getAttribute('data-current')); | ||
const next = (current + 1) % states.length | const next = (current + 1) % states.length; | ||
element.textContent = states[next] | element.textContent = states[next]; | ||
element.setAttribute('data-current', next.toString()) | element.setAttribute('data-current', next.toString()); | ||
updateOutput() | updateOutput(); | ||
} | } | ||
function updateOutput() { | function updateOutput() { | ||
const difficultyDiv = document.getElementById('difficulty') | const difficultyDiv = document.getElementById('difficulty'); | ||
const ratioDiv = document.getElementById('ratio') | const ratioDiv = document.getElementById('ratio'); | ||
const currentDifficulty = difficultyDiv.textContent.split(' ')[0] // 获取难度 | const currentDifficulty = difficultyDiv.textContent.split(' ')[0]; // 获取难度 | ||
const currentRatio = ratioDiv.textContent === "16:9" ? "16-9" : "4-3" | const currentRatio = ratioDiv.textContent === "16:9" ? "16-9" : "4-3"; | ||
const videoUrl = `https://raw.githubusercontent.com/Rizline-Chinese-Wiki/rizline-song-preview | const videoUrl = `https://raw.githubusercontent.com/Rizline-Chinese-Wiki/rizline-song-preview/main/${currentRatio}/${songName}_${currentDifficulty}.mp4`; | ||
document.getElementById('output').innerHTML = ` | document.getElementById('output').innerHTML = ` | ||
<video class="html5media-video" src="${videoUrl}" controls preload="metadata" loading="lazy"></video> | |||
`; | |||
} | } | ||
document.addEventListener('DOMContentLoaded', updateOutput); | |||
</script> | </script> | ||
</html> | </html> | ||
2025年7月6日 (日) 23:19的版本
|
EZ 1
|
|
|
16:9
|
|