更多操作
小 已移除至用户:RedDragon/Test1的重定向 标签：移除重定向 |
小无编辑摘要 |
||
| （未显示同一用户的5个中间版本） | |||
| 第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; background-color:# | <td colspan="2" style="text-align:center; background-color:#57E4C4;"> | ||
<div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ | <div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ 2", "HD 7", "IN 10"]' 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-states='[" | <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行： | 第19行： | ||
<script> | <script> | ||
const songName = "Abgrund" | |||
const songName = "Abgrund" | |||
const difficultyColors = { | const difficultyColors = { | ||
| 第30行： | 第29行： | ||
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 | ||
| 第38行： | 第37行： | ||
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 | ||
| 第46行： | 第45行： | ||
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 | ||
| 第60行： | 第59行： | ||
const ratioDiv = document.getElementById('ratio') | const ratioDiv = document.getElementById('ratio') | ||
const | const difficulty = difficultyDiv.textContent.split(' ')[0] // 获取难度 | ||
const | const ratio = ratioDiv.textContent.replace(':', '-') | ||
const videoUrl = `https:// | const videoUrl = `https://raw.githubusercontent.com/Rizline-Chinese-Wiki/rizline-song-preview/main/${ratio}_${songName}_${difficulty}.mp4` | ||
document.getElementById('output').innerHTML = ` | document.getElementById('output').innerHTML = ` | ||
<video class="html5media-video" src="${videoUrl}" controls preload="metadata" loading="lazy"></video> | |||
` | |||
} | } | ||
//初始化 | |||
document.addEventListener('DOMContentLoaded', function () { | |||
const diffDiv = document.getElementById('difficulty') | |||
const firstDiff = JSON.parse(diffDiv.getAttribute('data-states'))[0]; | |||
const diffType = firstDiff.split(' ')[0] | |||
diffDiv.textContent = firstDiff | |||
diffDiv.style.backgroundColor = difficultyColors[diffType] | |||
diffDiv.parentElement.style.backgroundColor = difficultyColors[diffType] | |||
updateOutput(); | |||
}); | |||
</script> | </script> | ||
</html> | </html> | ||
2025年7月6日 (日) 23:34的最新版本
|
EZ 1
|
|
|
16:9
|
|