1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>随机决定器 - η空间</class="tag">title>
4<class="tag">meta name="description" content="选择困难症福音！转盘帮你做决定。预设选项+自定义选项。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh}
9.container{max-width:500px;margin:class="number">0 auto;padding:40px 16px;text-align:center}
10h1{font-size:24px;margin-bottom:8px}
11h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
12.desc{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin-bottom:24px}
13.wheel-wrapper{position:relative;width:280px;height:280px;margin:class="number">0 auto 20px}
14canvas{width:class="number">100%;height:class="number">100%;border-radius:class="number">50%;box-shadow:class="number">0 class="number">0 30px rgba(class="number">255,class="number">107,class="number">53,.class="number">15)}
15.pointer{position:absolute;top:-12px;left:class="number">50%;transform:translateX(-class="number">50%);width:class="number">0;height:class="number">0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:16px solid class=class="string">"keyword">class=class="string">"comment">#FF6B35;z-index:class="number">2;filter:drop-shadow(class="number">0 2px 4px rgba(class="number">0,class="number">0,class="number">0,.class="number">5))}
16.center-dot{position:absolute;top:class="number">50%;left:class="number">50%;transform:translate(-class="number">50%,-class="number">50%);width:24px;height:24px;background:class=class="string">"keyword">class=class="string">"comment">#class="number">161616;border:3px solid #FF6B35;border-radius:class="number">50%;z-index:class="number">2}
17.result-text{font-size:18px;font-weight:class="number">600;margin:12px class="number">0 20px;min-height:28px;color:class=class="string">"keyword">class=class="string">"comment">#4ade80;transition:all .3s}
18.btn-group{display:flex;gap:8px;margin-bottom:20px}
19.btn{flex:class="number">1;padding:10px;border:none;border-radius:10px;font-size:14px;font-weight:class="number">600;cursor:pointer;transition:all .3s}
20.btn-spin{background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#fff}
21.btn-spin:hover{background:class=class="string">"keyword">class=class="string">"comment">#e85a2a}
22.btn-reset{background:transparent;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;color:#ccc}
23.btn-reset:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#FF6B35}
24.custom-area{text-align:left}
25.custom-area label{display:block;font-size:13px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;margin-bottom:4px}
26.custom-area textarea{width:class="number">100%;padding:10px;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;border:1px solid #class="number">222;border-radius:8px;color:#ccc;font-size:13px;resize:vertical;min-height:60px;font-family:inherit}
27.custom-area textarea:focus{outline:none;border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
28.custom-area .note{font-size:11px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-top:4px}
29</class="tag">style></class="tag">head><class="tag">body>
30<class="tag">div class=class="string">"keyword">class="container">
31<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">🎯</class="tag">span> 随机决定器</class="tag">h1>
32<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🎯 点击"转一下" · 下方文本框可自定义选项（每行一个）</class="tag">p>
33<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🎯 点击"转一下" · 下方文本框可自定义选项（每行一个）</class="tag">p>
34<class="tag">p class=class="string">"keyword">class="desc">选择困难？让转盘帮你做决定</class="tag">p>
35<class="tag">div class=class="string">"keyword">class="wheel-wrapper">
36<class="tag">div class=class="string">"keyword">class="pointer"></class="tag">div>
37<class="tag">div class=class="string">"keyword">class="center-dot"></class="tag">div>
38<class="tag">canvas id="wheel" width="class="number">280" height="class="number">280"></class="tag">canvas>
39</class="tag">div>
40<class="tag">div class=class="string">"keyword">class="result-text" id="result">等你的选择</class="tag">div>
41<class="tag">div class=class="string">"keyword">class="btn-group">
42<class="tag">button class=class="string">"keyword">class="btn btn-spin" onclick="spin()">🎡 转一下</class="tag">button>
43<class="tag">button class=class="string">"keyword">class="btn btn-reset" onclick="initWheel()">🔄 重置</class="tag">button>
44</class="tag">div>
45<class="tag">div class=class="string">"keyword">class="custom-area">
46<class="tag">label>自定义选项（每行一个，或逗号分隔）</class="tag">label>
47<class="tag">textarea id="optionsInput" oninput="initWheel()">吃饭&class=class="string">"keyword">class=class="string">"comment">#class="number">10;睡觉&#class="number">10;写代码&#class="number">10;摸鱼&#class="number">10;学新东西&#class="number">10;打游戏&#class="number">10;刷剧&#class="number">10;运动</class="tag">textarea>
48<class="tag">div class=class="string">"keyword">class="note">💡 改完自动更新转盘</class="tag">div>
49</class="tag">div>
50</class="tag">div>
51<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
52<class="tag">script>
53class=class="string">"keyword">var colors=[class="string">'class="keyword">class="comment">#FF6B35',class="string">'#4ade80',class="string">'#60a5fa',class="string">'#f472b6',class="string">'#facc15',class="string">'#a78bfa',class="string">'#34d399',class="string">'#fb923c',class="string">'#ef4444',class="string">'#818cf8'];
54class=class="string">"keyword">var currentAngle=class="number">0;
55class=class="string">"keyword">function getOptions(){
56 class=class="string">"keyword">var t=document.class="func">getElementById(class="string">'optionsInput').value;
57 class=class="string">"keyword">var arr=t.split(/[,，\n]/).map(class=class="string">"keyword">function(s){class=class="string">"keyword">return s.trim()}).filter(class=class="string">"keyword">function(s){class=class="string">"keyword">return s.length>class="number">0});
58 class=class="string">"keyword">return arr.length>class="number">0?arr:[class="string">'吃饭',class="string">'睡觉',class="string">'写代码'];
59}
60class=class="string">"keyword">function initWheel(){
61 class=class="string">"keyword">var opts=getOptions();
62 class=class="string">"keyword">var canvas=document.class="func">getElementById(class="string">'wheel');
63 class=class="string">"keyword">var ctx=canvas.getContext(class="string">'2d');
64 class=class="string">"keyword">var cx=class="number">140,cy=class="number">140,r=class="number">135;
65 class=class="string">"keyword">var arc=class="number">2*Math.PI/opts.length;
66 ctx.clearRect(class="number">0,class="number">0,class="number">280,class="number">280);
67 class=class="string">"keyword">for(class=class="string">"keyword">var i=class="number">0;i<class="tag">opts.length;i++){
68 class=class="string">"keyword">var start=i*arc+currentAngle;
69 ctx.beginPath();
70 ctx.moveTo(cx,cy);
71 ctx.arc(cx,cy,r,start,start+arc);
72 ctx.closePath();
73 ctx.fillStyle=colors[i%colors.length];
74 ctx.fill();
75 ctx.strokeStyle=class="string">'class="keyword">class="comment">#0C0C0C';
76 ctx.lineWidth=class="number">2;
77 ctx.stroke();
78 ctx.save();
79 ctx.translate(cx,cy);
80 ctx.rotate(start+arc/class="number">2);
81 ctx.fillStyle=class="string">'class="keyword">class="comment">#fff';
82 ctx.font=class="string">'12px Outfit,sans-serif';
83 ctx.textAlign=class="string">'center';
84 ctx.textBaseline=class="string">'middle';
85 ctx.fillText(opts[i].length>class="number">6?opts[i].substring(class="number">0,class="number">5)+class="string">'…':opts[i],r*class="number">0.6,class="number">0);
86 ctx.restore();
87 }
88 document.class="func">getElementById(class="string">'result').textContent=class="string">'ready to go';
89}
90class=class="string">"keyword">function spin(){
91 class=class="string">"keyword">var opts=getOptions();
92 class=class="string">"keyword">if(opts.length<class="number">2){document.class="func">getElementById(class="string">'result').textContent=class="string">'至少需要class="number">2个选项!';class=class="string">"keyword">return}
93 class=class="string">"keyword">var spins=class="number">5+Math.random()*class="number">5;
94 class=class="string">"keyword">var targetAngle=currentAngle+spins*class="number">2*Math.PI+Math.random()*class="number">2*Math.PI;
95 class=class="string">"keyword">var duration=class="number">3000;
96 class=class="string">"keyword">var start=performance.now();
97 class=class="string">"keyword">var startAngle=currentAngle;
98 class=class="string">"keyword">function animate(now){
99 class=class="string">"keyword">var elapsed=now-start;
100 class=class="string">"keyword">var progress=Math.min(class="number">1,elapsed/duration);
101 class=class="string">"keyword">var eased=class="number">1-Math.pow(class="number">1-progress,class="number">3);
102 currentAngle=startAngle+(targetAngle-startAngle)*eased;
103 initWheel();
104 class=class="string">"keyword">if(progress<class="number">1){requestAnimationFrame(animate);}
105 class=class="string">"keyword">else{
106 class=class="string">"keyword">var totalArc=class="number">2*Math.PI;
107 class=class="string">"keyword">var normalizedAngle=((currentAngle%totalArc)+totalArc)%totalArc;
108 class=class="string">"keyword">var arc=totalArc/opts.length;
109 class=class="string">"keyword">var idx=opts.length-class="number">1-Math.floor(normalizedAngle/arc);
110 idx=((idx%opts.length)+opts.length)%opts.length;
111 document.class="func">getElementById(class="string">'result').innerHTML=class="string">'🎉 <class="tag">strong>'+opts[idx]+class="string">'</class="tag">strong>';
112 }
113 }
114 requestAnimationFrame(animate);
115}
116initWheel();
117</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=decision-wheel.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
118</class="tag">body></class="tag">html>
119