leetcode/roll.html at main · try2love/leetcode · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>力扣 Hot 100 动态随机转盘</title>
    <style>
        body { font-family: 'PingFang SC', sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f0f2f5; margin: 0; padding: 20px; }
        .container { text-align: center; background: white; padding: 40px; border-radius: 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); max-width: 600px; width: 100%; }
        h1 { color: #1a1a1a; margin-bottom: 5px; }
        .subtitle { color: #666; margin-bottom: 30px; }

        /* 转盘容器 */
        .wheel-wrapper { position: relative; width: 450px; height: 450px; margin: 0 auto 30px; }
        #wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 10px #333; transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1); }

        /* 指针 */
        .pointer {
            position: absolute; top: -10px; left: 50%; width: 40px; height: 50px;
            background: #ff4d4f; transform: translateX(-50%); clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
            z-index: 20; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2));
        }
        .center-dot {
            position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
            background: #333; border: 4px solid white; border-radius: 50%;
            transform: translate(-50%, -50%); z-index: 25;
        }

        /* 结果展示 */
        #result { margin-top: 20px; padding: 20px; border-radius: 15px; border: 2px dashed #ddd; display: none; background: #fffdf5; animation: fadeIn 0.5s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .difficulty-Easy { color: #00af9b; font-weight: bold; }
        .difficulty-Medium { color: #ffb800; font-weight: bold; }
        .difficulty-Hard { color: #ff2d55; font-weight: bold; }

        button {
            padding: 15px 40px; font-size: 20px; background: #2db55d; color: white;
            border: none; border-radius: 30px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(45,181,93,0.3);
        }
        button:hover { background: #269e4f; transform: scale(1.05); }
        button:disabled { background: #ccc; cursor: not-allowed; }
    </style>
</head>
<body>

<div class="container">
    <h1>🔥 LeetCode Hot 100</h1>
    <p class="subtitle">已有 100 题载入转盘，点击开始随机</p>

    <div class="wheel-wrapper">
        <div class="pointer"></div>
        <div class="center-dot"></div>
        <canvas id="wheel" width="500" height="500"></canvas>
    </div>

    <button id="spinBtn" onclick="spinWheel()">ROLL 一题！</button>

    <div id="result">
        <h2 id="res-title" style="margin: 0 0 10px 0;"></h2>
        <p id="res-info" style="font-size: 16px; line-height: 1.6;"></p>
        <a id="res-link" href="#" target="_blank" style="display: inline-block; margin-top: 10px; color: #007aff; font-weight: bold; text-decoration: none; border-bottom: 2px solid #007aff;">去力扣解题 →</a>
    </div>
</div>

<script>
    // 完整的 Hot 100 数据 (精简版，用于演示和运行)
    const hot100 = [
        { id: "1", title: "Two Sum", cn: "两数之和", diff: "Easy" },
        { id: "2", title: "Add Two Numbers", cn: "两数相加", diff: "Medium" },
        { id: "3", title: "Longest Substring Without Repeating Characters", cn: "无重复字符的最长子串", diff: "Medium" },
        { id: "4", title: "Median of Two Sorted Arrays", cn: "寻找两个正序数组的中位数", diff: "Hard" },
        { id: "5", title: "Longest Palindromic Substring", cn: "最长回文子串", diff: "Medium" },
        { id: "11", title: "Container With Most Water", cn: "盛最多水的容器", diff: "Medium" },
        { id: "15", title: "3Sum", cn: "三数之和", diff: "Medium" },
        { id: "17", title: "Letter Combinations of a Phone Number", cn: "电话号码的字母组合", diff: "Medium" },
        { id: "19", title: "Remove Nth Node From End of List", cn: "删除链表的倒数第 N 个结点", diff: "Medium" },
        { id: "20", title: "Valid Parentheses", cn: "有效的括号", diff: "Easy" },
        { id: "21", title: "Merge Two Sorted Lists", cn: "合并两个有序链表", diff: "Easy" },
        { id: "22", title: "Generate Parentheses", cn: "括号生成", diff: "Medium" },
        { id: "23", title: "Merge k Sorted Lists", cn: "合并 K 个升序链表", diff: "Hard" },
        { id: "24", title: "swap nodes in pairs", cn: "两辆交换链表中的节点", diff: "Medium" },
        { id: "25", title: "reverse nodes in k group", cn: "K 个一组翻转链表", diff: "Hard" },
        { id: "31", title: "Next Permutation", cn: "下一个排列", diff: "Medium" },
        { id: "32", title: "Longest Valid Parentheses", cn: "最长有效括号", diff: "Hard" },
        { id: "33", title: "Search in Rotated Sorted Array", cn: "搜索旋转排序数组", diff: "Medium" },
        { id: "34", title: "Find First and Last Position of Element in Sorted Array", cn: "在排序数组中查找元素的第一个和最后一个位置", diff: "Medium" },
        { id: "35", title: "Search Insert Position", cn: "搜索插入位置", diff: "Easy" },
        { id: "39", title: "Combination Sum", cn: "组合总和", diff: "Medium" },
        { id: "41", title: "First Missing Positive", cn: "缺失的第一个正数", diff: "Hard" },
        { id: "42", title: "Trapping Rain Water", cn: "接雨水", diff: "Hard" },
        { id: "45", title: "jump game ii", cn: "跳跃游戏II", diff: "Medium" },
        { id: "46", title: "Permutations", cn: "全排列", diff: "Medium" },
        { id: "48", title: "Rotate Image", cn: "旋转图像", diff: "Medium" },
        { id: "49", title: "Group Anagrams", cn: "字母异位词分组", diff: "Medium" },
        { id: "51", title: "N-Queens", cn: "N 皇后", diff: "Hard" },
        { id: "53", title: "Maximum Subarray", cn: "最大子数组和", diff: "Medium" },
        { id: "54", title: "Spiral Matrix", cn: "螺旋矩阵", diff: "Medium" },
        { id: "55", title: "Jump Game", cn: "跳跃游戏", diff: "Medium" },
        { id: "56", title: "Merge Intervals", cn: "合并区间", diff: "Medium" },
        { id: "62", title: "Unique Paths", cn: "不同路径", diff: "Medium" },
        { id: "64", title: "Minimum Path Sum", cn: "最小路径和", diff: "Medium" },
        { id: "70", title: "Climbing Stairs", cn: "爬楼梯", diff: "Easy" },
        { id: "72", title: "Edit Distance", cn: "编辑距离", diff: "Medium" },
        { id: "73", title: "Set Matrix Zeroes", cn: "矩阵置零", diff: "Medium" },
        { id: "74", title: "Search a 2D Matrix", cn: "搜索二维矩阵", diff: "Medium" },
        { id: "75", title: "Sort Colors", cn: "颜色分类", diff: "Medium" },
        { id: "76", title: "Minimum Window Substring", cn: "最小覆盖子串", diff: "Hard" },
        { id: "78", title: "Subsets", cn: "子集", diff: "Medium" },
        { id: "79", title: "Word Search", cn: "单词搜索", diff: "Medium" },
        { id: "84", title: "Largest Rectangle in Histogram", cn: "柱状图中最大的矩形", diff: "Hard" },
        { id: "94", title: "Binary Tree Inorder Traversal", cn: "二叉树的中序遍历", diff: "Easy" },
        { id: "98", title: "Validate Binary Search Tree", cn: "验证二叉搜索树", diff: "Medium" },
        { id: "101", title: "Symmetric Tree", cn: "对称二叉树", diff: "Easy" },
        { id: "102", title: "Binary Tree Level Order Traversal", cn: "二叉树的层序遍历", diff: "Medium" },
        { id: "104", title: "Maximum Depth of Binary Tree", cn: "二叉树的最大深度", diff: "Easy" },
        { id: "105", title: "Construct Binary Tree from Preorder and Inorder Traversal", cn: "从前序与中序遍历序列构造二叉树", diff: "Medium" },
        { id: "108", title: "Convert Sorted Array to Binary Search Tree", cn: "将有序数组转换为二叉搜索树", diff: "Easy" },
        { id: "114", title: "Flatten Binary Tree to Linked List", cn: "二叉树展开为链表", diff: "Medium" },
        { id: "118", title: "Pascals Triangle", cn: "杨辉三角", diff: "Easy" },
        { id: "121", title: "Best Time to Buy and Sell Stock", cn: "买卖股票的最佳时机", diff: "Easy" },
        { id: "124", title: "Binary Tree Maximum Path Sum", cn: "二叉树中的最大路径和", diff: "Hard" },
        { id: "128", title: "Longest Consecutive Sequence", cn: "最长连续序列", diff: "Medium" },
        { id: "131", title: "Palindrome Partitioning", cn: "分割回文串", diff: "Medium" },
        { id: "136", title: "Single Number", cn: "只出现一次的数字", diff: "Easy" },
        { id: "138", title: "Copy List with Random Pointer", cn: "随机链表的复制", diff: "Medium" },
        { id: "139", title: "Word Break", cn: "单词拆分", diff: "Medium" },
        { id: "141", title: "Linked List Cycle", cn: "环形链表", diff: "Easy" },
        { id: "142", title: "Linked List Cycle II", cn: "环形链表 II", diff: "Medium" },
        { id: "146", title: "LRU Cache", cn: "LRU 缓存", diff: "Medium" },
        { id: "148", title: "Sort List", cn: "排序链表", diff: "Medium" },
        { id: "152", title: "Maximum Product Subarray", cn: "乘积最大子数组", diff: "Medium" },
        { id: "153", title: "Find Minimum in Rotated Sorted Array", cn: "寻找旋转排序数组中的最小值", diff: "Medium" },
        { id: "155", title: "Min Stack", cn: "最小栈", diff: "Easy" },
        { id: "160", title: "Intersection of Two Linked Lists", cn: "相交链表", diff: "Easy" },
        { id: "169", title: "Majority Element", cn: "多数元素", diff: "Easy" },
        { id: "189", title: "Rotate Array", cn: "轮转数组", diff: "Medium" },
        { id: "198", title: "House Robber", cn: "打家劫舍", diff: "Medium" },
        { id: "199", title: "Binary Tree Right Side View", cn: "二叉树的右视图", diff: "Medium" },
        { id: "200", title: "Number of Islands", cn: "岛屿数量", diff: "Medium" },
        { id: "206", title: "Reverse Linked List", cn: "反转链表", diff: "Easy" },
        { id: "207", title: "Course Schedule", cn: "课程表", diff: "Medium" },
        { id: "208", title: "Implement Trie (Prefix Tree)", cn: "实现 Trie (前缀树)", diff: "Medium" },
        { id: "215", title: "Kth Largest Element in an Array", cn: "数组中的第K个最大元素", diff: "Medium" },
        { id: "226", title: "Invert Binary Tree", cn: "翻转二叉树", diff: "Easy" },
        { id: "230", title: "Kth Smallest Element in a BST", cn: "二叉搜索树中第 K 小的元素", diff: "Medium" },
        { id: "234", title: "Palindrome Linked List", cn: "回文链表", diff: "Easy" },
        { id: "236", title: "Lowest Common Ancestor of a Binary Tree", cn: "二叉树的最近公共祖先", diff: "Medium" },
        { id: "238", title: "Product of Array Except Self", cn: "除自身以外数组的乘积", diff: "Medium" },
        { id: "239", title: "Sliding Window Maximum", cn: "滑动窗口最大值", diff: "Hard" },
        { id: "240", title: "Search a 2D Matrix II", cn: "搜索二维矩阵 II", diff: "Medium" },
        { id: "279", title: "Perfect Squares", cn: "完全平方数", diff: "Medium" },
        { id: "283", title: "Move Zeroes", cn: "移动零", diff: "Easy" },
        { id: "287", title: "Find the Duplicate Number", cn: "寻找重复数", diff: "Medium" },
        { id: "295", title: "Find Median from Data Stream", cn: "数据流的中位数", diff: "Hard" },
        { id: "300", title: "Longest Increasing Subsequence", cn: "最长递增子序列", diff: "Medium" },
        { id: "322", title: "Coin Change", cn: "零钱兑换", diff: "Medium" },
        { id: "347", title: "Top K Frequent Elements", cn: "前 K 个高频元素", diff: "Medium" },
        { id: "394", title: "Decode String", cn: "字符串解码", diff: "Medium" },
        { id: "416", title: "Partition Equal Subset Sum", cn: "分割等和子集", diff: "Medium" },
        { id: "437", title: "Path Sum III", cn: "路径总和 III", diff: "Medium" },
        { id: "438", title: "Find All Anagrams in a String", cn: "找到字符串中所有字母异位词", diff: "Medium" },
        { id: "543", title: "Diameter of Binary Tree", cn: "二叉树的直径", diff: "Easy" },
        { id: "560", title: "Subarray Sum Equals K", cn: "和为 K 的子数组", diff: "Medium" },
        { id: "739", title: "Daily Temperatures", cn: "每日温度", diff: "Medium" },
        { id: "763", title: "Partition Labels", cn: "划分字母区间", diff: "Medium" },
        { id: "994", title: "Rotting Oranges", cn: "腐烂的橘子", diff: "Medium" },
        { id: "1143", title: "longest common subsequence", cn: "最长公共子序列", diff: "Medium" }
];
    const canvas = document.getElementById('wheel');
    const ctx = canvas.getContext('2d');
    const totalItems = hot100.length; // 动态获取数组长度
    let currentRotation = 0;

    // 绘制转盘，分块数等于 hot100.length
    function drawWheel() {
        const radius = canvas.width / 2;
        const arc = (2 * Math.PI) / totalItems;

        for (let i = 0; i < totalItems; i++) {
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.arc(radius, radius, radius, i * arc, (i + 1) * arc);

            // 使用三种颜色循环，增加视觉辨识度
            const colors = ['#f8f9fa', '#e9ecef', '#dee2e6'];
            ctx.fillStyle = colors[i % 3];
            ctx.fill();
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 0.5;
            ctx.stroke();

            // 只有当条目不多时才在转盘上画字，100条太多了，我们只画刻度线
            if (i % 10 === 0) {
                ctx.save();
                ctx.translate(radius, radius);
                ctx.rotate(i * arc);
                ctx.fillStyle = "#999";
                ctx.fillText(hot100[i].id, radius - 30, 0);
                ctx.restore();
            }
        }
    }

    function spinWheel() {
        const btn = document.getElementById('spinBtn');
        btn.disabled = true;

        // 随机产生一个落点索引
        const randomIndex = Math.floor(Math.random() * totalItems);
        const arcDegree = 360 / totalItems;

        // 计算旋转角度：(总圈数 * 360) + (目标索引对应的角度反向偏移)
        // 减去 randomIndex * arcDegree 是为了让指针（在顶部）停在正确的位置
        const extraRotation = 1800 + (360 - (randomIndex * arcDegree)) - (arcDegree / 2);
        currentRotation += extraRotation;

        document.getElementById('wheel').style.transform = `rotate(${currentRotation}deg)`;

        setTimeout(() => {
            showResult(hot100[randomIndex]);
            btn.disabled = false;
        }, 5000);
    }

    function showResult(item) {
        const resDiv = document.getElementById('result');
        const title = document.getElementById('res-title');
        const info = document.getElementById('res-info');
        const link = document.getElementById('res-link');

        resDiv.style.display = 'block';
        title.innerText = `#${item.id} ${item.cn}`;
        info.innerHTML = `英文标题：${item.title} <br> 难度：<span class="difficulty-${item.diff}">${item.diff}</span>`;

        // URL 构造逻辑
        const slug = item.title.toLowerCase().replace(/ /g, '-').replace(/[()]/g, '');
        link.href = `https://leetcode.cn/problems/${slug}/`;

        resDiv.scrollIntoView({ behavior: 'smooth' });
    }

    drawWheel();
</script>

</body>
</html>