呃，有关html的一个小问题

Animus

接上条

在确认好像挺安全的，不太可能违反什么规则的情况下，我也让豆包尝试给论坛做一个这样的页面
如图所示：


这样，侧边就有一个骰娘了，复制功能是正常的（这是复制出来的内容：[29, 11, 44, 32, 4, 16, 1, 2, 21, 35, 41, 13, 42, 2, 4, 21, 10] 总计: 328（当时只截图忘记复制了，这是再投掷一次的结果），还可以随时把结果直接插入到回复里（但是没有测试过）


可以自定义投掷面数，可以最多投掷20个骰子，可以总数减结果或者每次投掷减结果（方便玩论坛其他大佬的SLG的时候投骰子）
然后因为想到了可能会有的切换页面很麻烦的问题
还做了多网页同时展示（可以同时开两个SLG的页面外加一个编辑页面，稍微方便了一点）


然而，现在我有一个小问题...
html，是不是没办法登陆？我把三个论坛都打开了，都没办法看到验证码（）


如果没有坛友能解决这个办法的话，那是不是意味着......

steve

啊~原来是这个效果
这个功能应该用油猴脚本也能实现吧，直接在原本的网页上加载骰子插件
就是类似于@龙骧大佬的宝可梦插件那种感觉

steve

让deepseek搞了一个，感觉应该能满足需求？

🎲 3d100 : 74 + 100 + 59 = 233  (74, 100, 59)
附上提示词

帮我写一个油猴脚本插件。它的基本功能是投骰子，可以自定义投掷的骰子面数和骰子数量，每个骰子的结果单独显示，同时显示所有骰子结果的总和。还要可以快捷复制骰子结果

和

+ 代码  (点击展开)- 代码  (点击折叠)

1. // ==UserScript==
   
2. // @name         万能骰子投手 · 可拖拽面板
   
3. // @namespace    https://greasyfork.org/users/your-namespace
   
4. // @version      1.5
   
5. // @description  任意骰子面数/数量，单独显示每个点数与总和，支持一键复制。面板可拖拽，位置自由定义。
   
6. // @author       YourName
   
7. // @match        *://*/*
   
8. // @exclude      *://*.taobao.com/*
   
9. // @exclude      *://*.tmall.com/*
   
10. // @grant        GM_setClipboard
    
11. // @grant        GM_addStyle
    
12. // @run-at       document-end
    
13. // @license      MIT
    
14. // ==/UserScript==
    
15. 
    
16. (function() {
    
17.     'use strict';
    
18. 
    
19.     // ---------- 1. 样式注入（含拖拽光标与全局拖拽态）----------
    
20.     GM_addStyle(`
    
21.         #dice-roller-panel {
    
22.             all: initial;
    
23.             position: fixed;
    
24.             bottom: 20px;
    
25.             right: 20px;
    
26.             width: 280px;
    
27.             background: #2d2d2d;
    
28.             color: #f0f0f0;
    
29.             border-radius: 12px;
    
30.             box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    
31.             font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    
32.             z-index: 2147483647;
    
33.             border: 1px solid #555;
    
34.             backdrop-filter: blur(5px);
    
35.             padding: 16px 18px;
    
36.             transition: none; /* 拖拽时禁止动画，避免卡顿 */
    
37.             user-select: none;
    
38.         }
    
39.         #dice-roller-panel * {
    
40.             box-sizing: border-box;
    
41.             margin: 0;
    
42.             padding: 0;
    
43.             line-height: 1.4;
    
44.         }
    
45.         #dice-roller-header {
    
46.             font-size: 18px;
    
47.             font-weight: 600;
    
48.             margin-bottom: 16px;
    
49.             color: #ffd966;
    
50.             display: flex;
    
51.             align-items: center;
    
52.             gap: 8px;
    
53.             border-bottom: 1px solid #555;
    
54.             padding-bottom: 8px;
    
55.             cursor: move; /* 拖拽提示 */
    
56.         }
    
57.         /* 全局拖拽态：禁止选中，手型变抓取 */
    
58.         body.dice-dragging {
    
59.             user-select: none !important;
    
60.             cursor: grabbing !important;
    
61.         }
    
62.         .dice-input-row {
    
63.             display: flex;
    
64.             justify-content: space-between;
    
65.             align-items: center;
    
66.             margin-bottom: 12px;
    
67.             gap: 10px;
    
68.         }
    
69.         .dice-input-row label {
    
70.             display: flex;
    
71.             align-items: center;
    
72.             gap: 6px;
    
73.             font-size: 14px;
    
74.             color: #ccc;
    
75.             background: #3a3a3a;
    
76.             padding: 5px 10px;
    
77.             border-radius: 20px;
    
78.             flex: 1;
    
79.         }
    
80.         .dice-input-row input {
    
81.             width: 70px;
    
82.             padding: 6px 8px;
    
83.             border-radius: 20px;
    
84.             border: 1px solid #666;
    
85.             background: #1e1e1e;
    
86.             color: #fff;
    
87.             font-weight: 500;
    
88.             text-align: center;
    
89.             outline: none;
    
90.             transition: 0.15s;
    
91.         }
    
92.         .dice-input-row input:focus {
    
93.             border-color: #ffb86b;
    
94.             background: #2a2a2a;
    
95.         }
    
96.         #roll-button {
    
97.             width: 100%;
    
98.             background: #e67e22;
    
99.             border: none;
    
100.             color: white;
     
101.             font-weight: bold;
     
102.             padding: 10px 0;
     
103.             border-radius: 40px;
     
104.             font-size: 18px;
     
105.             display: flex;
     
106.             align-items: center;
     
107.             justify-content: center;
     
108.             gap: 8px;
     
109.             cursor: pointer;
     
110.             border-bottom: 3px solid #b85e0a;
     
111.             transition: all 0.08s;
     
112.             margin: 12px 0 16px 0;
     
113.             letter-spacing: 2px;
     
114.         }
     
115.         #roll-button:hover {
     
116.             background: #f39c12;
     
117.             border-bottom-width: 2px;
     
118.             transform: translateY(1px);
     
119.         }
     
120.         #roll-button:active {
     
121.             transform: translateY(4px);
     
122.             border-bottom-width: 1px;
     
123.         }
     
124.         .results-area {
     
125.             background: #252525;
     
126.             border-radius: 16px;
     
127.             padding: 14px;
     
128.             margin-bottom: 14px;
     
129.             border: 1px solid #484848;
     
130.         }
     
131.         .dice-list {
     
132.             display: flex;
     
133.             flex-wrap: wrap;
     
134.             gap: 8px;
     
135.             margin-bottom: 10px;
     
136.             max-height: 160px;
     
137.             overflow-y: auto;
     
138.             padding: 4px 2px;
     
139.         }
     
140.         .die-item {
     
141.             background: #4a4a4a;
     
142.             padding: 6px 12px;
     
143.             border-radius: 24px;
     
144.             font-size: 16px;
     
145.             font-weight: 600;
     
146.             color: #ffe083;
     
147.             box-shadow: inset 0 -2px 0 #2a2a2a;
     
148.             border: 1px solid #6a6a6a;
     
149.             min-width: 46px;
     
150.             text-align: center;
     
151.         }
     
152.         .sum-line {
     
153.             display: flex;
     
154.             justify-content: space-between;
     
155.             align-items: baseline;
     
156.             font-size: 17px;
     
157.             background: #333;
     
158.             padding: 8px 14px;
     
159.             border-radius: 30px;
     
160.             color: #ddd;
     
161.             margin-top: 6px;
     
162.         }
     
163.         .sum-number {
     
164.             font-size: 26px;
     
165.             font-weight: 800;
     
166.             color: #ffd966;
     
167.             margin-left: 8px;
     
168.         }
     
169.         .copy-section {
     
170.             display: flex;
     
171.             align-items: center;
     
172.             gap: 10px;
     
173.             margin-top: 8px;
     
174.         }
     
175.         #copy-result-btn {
     
176.             background: #3a6ea5;
     
177.             border: none;
     
178.             color: white;
     
179.             padding: 10px 18px;
     
180.             border-radius: 40px;
     
181.             font-size: 15px;
     
182.             font-weight: 600;
     
183.             display: flex;
     
184.             align-items: center;
     
185.             gap: 8px;
     
186.             cursor: pointer;
     
187.             border-bottom: 3px solid #1f3f66;
     
188.             transition: 0.1s;
     
189.             flex: 2;
     
190.             justify-content: center;
     
191.         }
     
192.         #copy-result-btn:hover {
     
193.             background: #4d8cd4;
     
194.             border-bottom-width: 2px;
     
195.             transform: translateY(1px);
     
196.         }
     
197.         #copy-result-btn:active {
     
198.             transform: translateY(3px);
     
199.             border-bottom-width: 1px;
     
200.         }
     
201.         #copy-status {
     
202.             font-size: 13px;
     
203.             color: #a5d6a5;
     
204.             flex: 1;
     
205.             white-space: nowrap;
     
206.         }
     
207.         /* 滚动条美化 */
     
208.         .dice-list::-webkit-scrollbar {
     
209.             width: 6px;
     
210.         }
     
211.         .dice-list::-webkit-scrollbar-track {
     
212.             background: #2a2a2a;
     
213.             border-radius: 10px;
     
214.         }
     
215.         .dice-list::-webkit-scrollbar-thumb {
     
216.             background: #777;
     
217.             border-radius: 10px;
     
218.         }
     
219.     `);
     
220. 
     
221.     // ---------- 2. 防止重复注入 ----------
     
222.     if (document.getElementById('dice-roller-panel')) return;
     
223. 
     
224.     // ---------- 3. 创建面板DOM ----------
     
225.     const panel = document.createElement('div');
     
226.     panel.id = 'dice-roller-panel';
     
227. 
     
228.     panel.innerHTML = `
     
229.         <div id="dice-roller-header">
     
230.             <span>🎲</span> 极简骰子
     
231.         </div>
     
232.         <div class="dice-input-row">
     
233.             <label>📦 数量 <input type="number" id="dice-count" min="1" max="99" value="1" step="1"></label>
     
234.             <label>🎯 面数 <input type="number" id="dice-sides" min="2" max="999" value="6" step="1"></label>
     
235.         </div>
     
236.         <button id="roll-button">⚡ 投掷</button>
     
237. 
     
238.         <div class="results-area">
     
239.             <div id="dice-results-container">
     
240.                 <div id="individual-results" class="dice-list">
     
241.                     <!-- 动态填充骰子结果 -->
     
242.                 </div>
     
243.                 <div id="sum-result" class="sum-line">
     
244.                     <span>🔢 总和</span>
     
245.                     <span class="sum-number" id="sum-value">0</span>
     
246.                 </div>
     
247.             </div>
     
248.         </div>
     
249. 
     
250.         <div class="copy-section">
     
251.             <button id="copy-result-btn">📋 复制结果</button>
     
252.             <span id="copy-status"></span>
     
253.         </div>
     
254.     `;
     
255. 
     
256.     document.body.appendChild(panel);
     
257. 
     
258.     // ---------- 4. 获取常用元素引用 ----------
     
259.     const countInput = document.getElementById('dice-count');
     
260.     const sidesInput = document.getElementById('dice-sides');
     
261.     const rollBtn = document.getElementById('roll-button');
     
262.     const individualDiv = document.getElementById('individual-results');
     
263.     const sumSpan = document.getElementById('sum-value');
     
264.     const copyBtn = document.getElementById('copy-result-btn');
     
265.     const copyStatus = document.getElementById('copy-status');
     
266. 
     
267.     // 存储当前骰子结果数据
     
268.     let currentRoll = {
     
269.         count: 1,
     
270.         sides: 6,
     
271.         results: [],
     
272.         sum: 0
     
273.     };
     
274. 
     
275.     // ---------- 5. 核心：投骰子函数 ----------
     
276.     function rollDice() {
     
277.         let count = parseInt(countInput.value, 10);
     
278.         let sides = parseInt(sidesInput.value, 10);
     
279. 
     
280.         if (isNaN(count) || count < 1) {
     
281.             count = 1;
     
282.             countInput.value = 1;
     
283.         }
     
284.         if (isNaN(sides) || sides < 2) {
     
285.             sides = 6;
     
286.             sidesInput.value = 6;
     
287.         }
     
288.         if (count > 99) {
     
289.             count = 99;
     
290.             countInput.value = 99;
     
291.         }
     
292.         if (sides > 999) {
     
293.             sides = 999;
     
294.             sidesInput.value = 999;
     
295.         }
     
296. 
     
297.         const results = [];
     
298.         for (let i = 0; i < count; i++) {
     
299.             results.push(Math.floor(Math.random() * sides) + 1);
     
300.         }
     
301.         const sum = results.reduce((acc, val) => acc + val, 0);
     
302. 
     
303.         currentRoll = { count, sides, results, sum };
     
304. 
     
305.         // 渲染骰子
     
306.         individualDiv.innerHTML = '';
     
307.         results.forEach(val => {
     
308.             const dieSpan = document.createElement('span');
     
309.             dieSpan.className = 'die-item';
     
310.             dieSpan.textContent = val;
     
311.             individualDiv.appendChild(dieSpan);
     
312.         });
     
313. 
     
314.         sumSpan.textContent = sum;
     
315.         copyStatus.textContent = '';
     
316.     }
     
317. 
     
318.     // ---------- 6. 复制结果 ----------
     
319.     function copyRollResult() {
     
320.         const { count, sides, results, sum } = currentRoll;
     
321.         if (!results || results.length === 0) {
     
322.             copyStatus.textContent = '⚠️ 没有可复制的结果';
     
323.             return;
     
324.         }
     
325. 
     
326.         const diceExpr = `${count}d${sides}`;
     
327.         const resultsStr = results.join(' + ');
     
328.         const copyText = `🎲 ${diceExpr} : ${resultsStr} = ${sum}  (${results.join(', ')})`;
     
329. 
     
330.         GM_setClipboard(copyText, 'text/plain');
     
331.         copyStatus.textContent = '✅ 已复制!';
     
332.         setTimeout(() => {
     
333.             copyStatus.textContent = '';
     
334.         }, 2000);
     
335.     }
     
336. 
     
337.     // ---------- 7. 绑定基础事件 ----------
     
338.     rollBtn.addEventListener('click', (e) => {
     
339.         e.preventDefault();
     
340.         rollDice();
     
341.     });
     
342. 
     
343.     copyBtn.addEventListener('click', (e) => {
     
344.         e.preventDefault();
     
345.         copyRollResult();
     
346.     });
     
347. 
     
348.     countInput.addEventListener('change', function() {
     
349.         let v = parseInt(this.value, 10);
     
350.         if (isNaN(v) || v < 1) this.value = 1;
     
351.         if (v > 99) this.value = 99;
     
352.     });
     
353.     sidesInput.addEventListener('change', function() {
     
354.         let v = parseInt(this.value, 10);
     
355.         if (isNaN(v) || v < 2) this.value = 6;
     
356.         if (v > 999) this.value = 999;
     
357.     });
     
358. 
     
359.     // ---------- 8. 拖拽功能（面板可移动）----------
     
360.     function makeDraggable() {
     
361.         const header = document.getElementById('dice-roller-header');
     
362.         let isDragging = false;
     
363.         let startX, startY, startLeft, startTop;
     
364. 
     
365.         function onMouseDown(e) {
     
366.             // 仅当点击在header或子元素时才启动拖拽
     
367.             if (!e.target.closest('#dice-roller-header')) return;
     
368. 
     
369.             e.preventDefault(); // 防止拖拽时选中文本或触发默认拖拽行为
     
370. 
     
371.             // 获取面板当前相对于视口的位置
     
372.             const rect = panel.getBoundingClientRect();
     
373.             const style = window.getComputedStyle(panel);
     
374. 
     
375.             // 若面板仍使用bottom/right定位，则切换为top/left以支持自由移动
     
376.             if (style.bottom !== 'auto' && style.bottom !== '0px' && style.right !== 'auto') {
     
377.                 panel.style.top = rect.top + 'px';
     
378.                 panel.style.left = rect.left + 'px';
     
379.                 panel.style.bottom = 'auto';
     
380.                 panel.style.right = 'auto';
     
381.             } else {
     
382.                 // 如果已经是top/left定位，确保数值与当前渲染一致（防止某些情况不同步）
     
383.                 panel.style.top = rect.top + 'px';
     
384.                 panel.style.left = rect.left + 'px';
     
385.             }
     
386. 
     
387.             startX = e.clientX;
     
388.             startY = e.clientY;
     
389.             startLeft = parseFloat(panel.style.left) || rect.left;
     
390.             startTop = parseFloat(panel.style.top) || rect.top;
     
391. 
     
392.             isDragging = true;
     
393.             document.body.classList.add('dice-dragging'); // 全局拖拽态，禁用选中
     
394. 
     
395.             window.addEventListener('mousemove', onMouseMove);
     
396.             window.addEventListener('mouseup', onMouseUp);
     
397.         }
     
398. 
     
399.         function onMouseMove(e) {
     
400.             if (!isDragging) return;
     
401.             e.preventDefault();
     
402. 
     
403.             const dx = e.clientX - startX;
     
404.             const dy = e.clientY - startY;
     
405.             let newLeft = startLeft + dx;
     
406.             let newTop = startTop + dy;
     
407. 
     
408.             // 边界限制，避免面板完全移出可视区
     
409.             const winW = window.innerWidth;
     
410.             const winH = window.innerHeight;
     
411.             const panelW = panel.offsetWidth;
     
412.             const panelH = panel.offsetHeight;
     
413.             newLeft = Math.max(0, Math.min(winW - panelW, newLeft));
     
414.             newTop = Math.max(0, Math.min(winH - panelH, newTop));
     
415. 
     
416.             panel.style.left = newLeft + 'px';
     
417.             panel.style.top = newTop + 'px';
     
418.         }
     
419. 
     
420.         function onMouseUp(e) {
     
421.             if (isDragging) {
     
422.                 isDragging = false;
     
423.                 document.body.classList.remove('dice-dragging');
     
424.                 window.removeEventListener('mousemove', onMouseMove);
     
425.                 window.removeEventListener('mouseup', onMouseUp);
     
426.             }
     
427.         }
     
428. 
     
429.         header.addEventListener('mousedown', onMouseDown);
     
430.     }
     
431. 
     
432.     // 初始化拖拽
     
433.     makeDraggable();
     
434. 
     
435.     // ---------- 9. 初始化投掷一次（默认1d6）----------
     
436.     rollDice();
     
437. 
     
438. })();

复制代码