Update index.html

hhhawa · Jan 2, 2025 · 4676978 · 4676978
1 parent 21b4f30
commit 4676978
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>选择数字</title>
+    <style>
+        table {
+            width: 50%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+    </style>
 </head>
 <body>
     <h1>请选择一个数字（1~25）</h1>
@@ -19,6 +34,19 @@ <h1>请选择一个数字（1~25）</h1>
         <button type="submit">提交</button>
     </form>
 
+    <h2>所有用户的选择</h2>
+    <table id="userChoicesTable">
+        <thead>
+            <tr>
+                <th>用户ID</th>
+                <th>选择的数字</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!-- 用户选择将动态插入到这里 -->
+        </tbody>
+    </table>
+
     <script>
         // 生成或获取用户唯一标识
         let userId = localStorage.getItem('userId');
@@ -38,13 +66,33 @@ <h1>请选择一个数字（1~25）</h1>
             localStorage.setItem('userData', JSON.stringify(userData));
 
             alert('选择已保存！');
+            displayUserChoices(); // 更新显示
         });
 
+        // 显示所有用户的选择
+        function displayUserChoices() {
+            const userData = JSON.parse(localStorage.getItem('userData') || '{}');
+            const tableBody = document.querySelector('#userChoicesTable tbody');
+            tableBody.innerHTML = ''; // 清空表格内容
+
+            for (const [userId, selectedNumber] of Object.entries(userData)) {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${userId}</td>
+                    <td>${selectedNumber}</td>
+                `;
+                tableBody.appendChild(row);
+            }
+        }
+
         // 页面加载时显示当前用户的选择（如果有）
         const userData = JSON.parse(localStorage.getItem('userData') || '{}');
         if (userData[userId]) {
             document.getElementById('numberSelect').value = userData[userId];
         }
+
+        // 页面加载时显示所有用户的选择
+        displayUserChoices();
     </script>
 </body>
 </html>