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

2025年7月6日 (日) 23:34的最新版本

EZ 1
16:9

@@ 第1行： / 第1行： @@
-#重定向 [[用户:RedDragon/Test1]]
+<html>
+<table width="100%" style="border:none; border-collapse:collapse;">
+  <tr>
+    <td colspan="2" style="text-align:center; background-color:#57E4C4;">
+      <div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ 2", "HD 7", "IN 10"]' 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='["16:9", "4:3"]' data-current="0" style="cursor:pointer;">16:9</div>
+    </td>
+    <td>
+      <span id="output"></span>
+    </td>
+  </tr>
+</table>
+<script>
+  const songName = "Abgrund"
+  const difficultyColors = {
+    "EZ": "#57E4C4",
+    "HD": "#FDBA61",
+    "IN": "#FE8661",
+    "AT": "#4C364B"
+  };
+  function cycleDifficulty(element) {
+    const states = JSON.parse(element.getAttribute('data-states'))
+    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] || '#FFFFFF'  // 更新背景色
+    element.style.backgroundColor = color
+    element.parentElement.style.backgroundColor = color
+    updateOutput()
+  }
+  function cycleRatio(element) {
+    const states = JSON.parse(element.getAttribute('data-states'))
+    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 difficulty = difficultyDiv.textContent.split(' ')[0]  // 获取难度
+    const ratio = ratioDiv.textContent.replace(':', '-')
+    const videoUrl = `https://raw.githubusercontent.com/Rizline-Chinese-Wiki/rizline-song-preview/main/${ratio}_${songName}_${difficulty}.mp4`
+    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>
+</html>