用户:RedDragon/Test：修订间差异

2025年7月6日 (日) 23:09的版本

EZ 1
4:3

@@ 第1行： / 第1行： @@
-#重定向 [[用户:RedDragon/Test1]]
+<html>
+<table width="100%" style="border:none; border-collapse:collapse;">
+  <tr>
+    <td colspan="2" style="text-align:center; background-color:#A9FBFF;">
+      <div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ 1", "HD 6", "IN 9"]' data-current="0" style="cursor:pointer;">EZ 1</div>
+    </td>
+  </tr>
+  <tr>
+    <td width="15%" height="300px" style="text-align:center; background-color:#ABCDEF;">
+      <div id="ratio" onclick="cycleRatio(this)" data-states='["4:3", "16:9"]' data-current="0" style="cursor:pointer;">4:3</div>
+    </td>
+    <td>
+      <span id="output"></span>
+    </td>
+  </tr>
+</table>
+<script>
+    //自定义部分
+  const difficultyList = ["EZ 1", "HD 6", "IN 9"];
+  const songName = "Abgrund";
+  const difficultyColors = {
+    "EZ": "#57E4C4",
+    "HD": "#FDBA61",
+    "IN": "#FE8661",
+    "AT": "#4C364B"
+  };
+  function cycleDifficulty(element) {
+    const states = difficultyList
+    const current = parseInt(element.getAttribute('data-current'))
+    const next = (current + 1) % states.length
+    element.textContent = states[next]
+    element.setAttribute('data-current', next.toString())
+    const difficultyType = states[next].split(' ')[0]  // 获取难度
+    const color = difficultyColors[difficultyType] || '#A9FBFF'  // 更新背景色
+    element.style.backgroundColor = color
+    element.parentElement.style.backgroundColor = color
+    updateOutput()
+  }
+  function cycleRatio(element) {
+    const states = ["16:9", "4:3"]
+    const current = parseInt(element.getAttribute('data-current'))
+    const next = (current + 1) % states.length
+    element.textContent = states[next]
+    element.setAttribute('data-current', next.toString())
+    updateOutput()
+  }
+  function updateOutput() {
+    const difficultyDiv = document.getElementById('difficulty')
+    const ratioDiv = document.getElementById('ratio')
+    const currentDifficulty = difficultyDiv.textContent.split(' ')[0]  // 获取难度
+    const currentRatio = ratioDiv.textContent === "16:9" ? "16-9" : "4-3"
+    const videoUrl = `https://github.com/Rizline-Chinese-Wiki/rizline-song-preview/blob/main/${currentRatio}/${songName}_${currentDifficulty}.mp4`
+    document.getElementById('output').innerHTML = `
+    <video class="html5media-video" src="${videoUrl}" controls preload="metadata" loading="lazy"></video>
+  `
+  }
+</script>
+</html>