打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

用户:Xp00000000/Sandbox:修订间差异

来自Rizline中文维基
Xp00000000留言 | 贡献
无编辑摘要
Xp00000000留言 | 贡献
无编辑摘要
 
(未显示同一用户的25个中间版本)
第1行: 第1行:
<div id="home-nav" class="home-grid" role="navigation">
<html>
<div class="home-card home-card--button" id="home-nav-jizhi">
<script>
<div class="home-card__background">[[File:MainTab-B.png|300px|link=机制]]</div>
// 切换难度(EZ 1 / HD 6 / IN 9)
<div class="home-card__foreground">机制</div>
function cycleDifficulty(element) {
</div>
  const states = JSON.parse(element.dataset.states);
<div class="home-card home-card--button" id="home-nav-qumu">
  const currentIndex = parseInt(element.dataset.current);
<div class="home-card__background">[[File:MainTab-B.png|300px|link=曲目列表]]</div>
  const nextIndex = (currentIndex + 1) % states.length;
<div class="home-card__foreground">曲目列表</div>
 
</div>
  element.textContent = states[nextIndex];
<div class="home-card home-card--button" id="home-nav-kaishi">
  element.dataset.current = nextIndex;
<div class="home-card__background">[[File:MainTab-B.png|300px|link=开始]]</div>
 
<div class="home-card__foreground">开始</div>
  updateOutput(); // 更新输出
</div>
<div class="home-card home-card--button" id="home-nav-chenghao">
<div class="home-card__background">[[File:MainTab-P.png|300px|link=称号列表]]</div>
<div class="home-card__foreground">称号列表</div>
</div>
    <div class="home-card home-card--button" id="home-nav-tansuo">
<div class="home-card__background">[[File:MainTab-O.png|300px|link=活动]]</div>
<div class="home-card__foreground">活动</div>
</div>
    <div class="home-card home-card--button" id="home-nav-chengjiu">
<div class="home-card__background">[[File:MainTab-P.png|300px|link=成就列表]]</div>
<div class="home-card__foreground">成就列表</div>
</div>
    <div class="home-card home-card--button" id="home-nav-shoucang">
<div class="home-card__background">[[File:MainTab-P.png|300px|link=收藏]]</div>
<div class="home-card__foreground">收藏</div>
</div>
<div class="home-card home-card--button" id="home-nav-条目">
<div class="home-card__background">[[File:MainTab-B.png|300px|link=分类:条目]]</div>
<div class="home-card__foreground">所有条目</div>
</div>
</div>
<small><font color=#888888>近期热点页面</font></small>
<div id="home-nav" class="home-grid" role="navigation">
<div class="home-card home-card--button" id="home-nav-redian">
<div class="home-card__background">[[File:圣诞单曲更新条幅20241225.png|300px|link=Frozen Heart]]</div>
<div class="home-card__foreground">Disc EX更新曲目</div>
</div>
</div>
<templatestyles src="Template:首页/shared/styles.css"/>
{{#css:#home-nav {
margin-top: 0.8rem;
}
}
#home-nav .home-card__background:after {
 
position: absolute;
// 切换比例(4:3 / 16:9)
pointer-events: none;
function cycleRatio(element) {
    top: 0;
  const states = JSON.parse(element.dataset.states);
    right: 0;
  const currentIndex = parseInt(element.dataset.current);
    bottom: 0;
  const nextIndex = (currentIndex + 1) % states.length;
    left: 0;
 
    display: block;
  element.textContent = states[nextIndex];
    background: linear-gradient(to right,#000,transparent);
  element.dataset.current = nextIndex;
    content: "";
 
  updateOutput(); // 更新输出
}
}
#home-nav .home-card__foreground {
 
  pointer-events: none;
// 根据当前难度和比例更新输出
height: 100%;
function updateOutput() {
     width: 100%;
  const difficulty = document.getElementById("difficulty").textContent;
     display: flex;
  const ratio = document.getElementById("ratio").textContent;
     align-items: center;
 
    padding: 0 15px;
  // 定义输出规则
    color: #fff;
  const outputRules = {
    font-weight: 500;
     "EZ 1": { "4:3": "111aaa", "16:9": "222aaa" },
     "HD 6": { "4:3": "111bbb", "16:9": "222bbb" },
     "IN 9": { "4:3": "111ccc", "16:9": "222ccc" }
  };
 
  // 获取当前输出
  const output = outputRules[difficulty]?.[ratio] || "Unknown";
  document.getElementById("output").textContent = output;
}
}
}}
</script>
<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">111aaa</span></td>
  </tr>
</table>
</html>

2025年7月5日 (六) 10:45的最新版本

EZ 1
4:3
111aaa