familyld.github.io/DI.html at master · familyld/familyld.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Describe Image</title>
  <style>
    /* 全屏居中 */
    html, body {
      margin: 0; padding: 0;
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: #f7f7f7;
    }
    #container {
      text-align: center;
      padding: 1rem;
      max-width: 100vw;
    }
    /* 进度文字，放大 */
    #counter {
      font-size: 3rem;
      margin-bottom: 0.7rem;
      line-height: 1.2;
    }
    /* 图片自适应，最大占视口宽度/高度 提高 */
    #cardImg {
      max-width: 95vw;
      max-height: 85vh;
      width: auto;
      height: auto;
      border: 2px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    /* 按钮容器 */
    #buttons {
      margin-top: 1.2rem;
    }
    button {
      font-size: 2rem;
      padding: 0.7rem 2rem;
      margin: 0 0.7rem;
      border: none;
      border-radius: 5px;
      background: #007bff;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:disabled {
      background: #aaa;
      cursor: default;
    }
    button:not(:disabled):hover {
      background: #0056b3;
    }
    /* 小屏幕下再调整 */
    @media (max-width: 400px) {
      #counter { font-size: 2.2rem; }
      button { font-size: 1.6rem; padding: 0.5rem 1.5rem; }
      #cardImg {
        max-width: 98vw;
        max-height: 80vh;
      }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="counter">0 / 0</div>
    <img id="cardImg" src="" alt="题目">
    <div id="buttons">
      <button id="prev">Prev</button>
      <button id="next">Next</button>
    </div>
  </div>

  <script>
    // —— 请根据你的题目总数修改下面这个值 ——
    const totalCards = 53;
    // —— 如果你的题目是 .png，请改成 "png" ——
    const imgExt = "png";

    let current = 1;
    const counterEl = document.getElementById("counter");
    const imgEl     = document.getElementById("cardImg");
    const prevBtn   = document.getElementById("prev");
    const nextBtn   = document.getElementById("next");

    // 用两位数格式化：1 → "01"
    function twoDigits(n) {
      return n.toString().padStart(2, "0");
    }

    function updateCard() {
      counterEl.innerText = `${current} / ${totalCards}`;
      imgEl.src = `DI/${twoDigits(current)}.${imgExt}`;
      prevBtn.disabled = (current <= 1);
      nextBtn.disabled = (current >= totalCards);
    }

    prevBtn.addEventListener("click", () => {
      if (current > 1) { current--; updateCard(); }
    });
    nextBtn.addEventListener("click", () => {
      if (current < totalCards) { current++; updateCard(); }
    });

    // 键盘左右键支持
    window.addEventListener("keydown", e => {
      if (e.key === "ArrowLeft" && current > 1) {
        current--; updateCard();
      }
      if (e.key === "ArrowRight" && current < totalCards) {
        current++; updateCard();
      }
    });

    // 初始化
    updateCard();
  </script>
</body>
</html>