当你今天不知道啥的时候，可以用这个
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>今天干什么 · 决策转盘</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: linear-gradient(145deg, #1a2a3a 0%, #0f1a24 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Poppins', 'Roboto', 'Microsoft YaHei', sans-serif;
padding: 20px;
}
.game-layout {
max-width: 1400px;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
align-items: flex-start;
}
.wheel-area {
flex: 2;
min-width: 300px;
background: rgba(255, 245, 215, 0.2);
backdrop-filter: blur(5px);
border-radius: 70px;
padding: 20px 20px 35px;
box-shadow: 0 25px 40px rgba(0,0,0,0.3);
}
.settings-area {
flex: 1.6;
min-width: 300px;
background: #fffcf0;
border-radius: 55px;
padding: 20px;
box-shadow: 0 20px 30px rgba(0,0,0,0.25);
max-height: 90vh;
overflow-y: auto;
}
.settings-area h3 {
font-size: 1.7rem;
color: #c44f1b;
text-align: center;
margin-bottom: 12px;
border-bottom: 3px solid #ffbd87;
display: inline-block;
width: 100%;
font-weight: 800;
}
.todo-list {
list-style: none;
margin: 10px 0;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.todo-item {
background: white;
border-radius: 50px;
margin-bottom: 12px;
padding: 10px 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.todo-info {
flex: 2;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 120px;
}
.todo-name {
font-weight: bold;
font-size: 1rem;
background: #fff0d6;
display: inline-block;
padding: 3px 14px;
border-radius: 40px;
width: fit-content;
color: #b64516;
}
.todo-desc {
font-size: 0.75rem;
color: #a25d2e;
}
.prob-control {
flex: 1;
min-width: 110px;
display: flex;
align-items: center;
gap: 8px;
background: #fff5e8;
padding: 5px 12px;
border-radius: 40px;
}
.prob-control label {
font-size: 0.7rem;
font-weight: bold;
color: #bd6b2f;
}
.prob-input {
width: 70px;
padding: 5px;
border-radius: 30px;
border: 1px solid #e7bc86;
text-align: center;
font-weight: bold;
}
.todo-actions button {
background: #ffe0b5;
border: none;
border-radius: 35px;
padding: 5px 14px;
margin: 0 3px;
cursor: pointer;
font-weight: bold;
font-size: 0.75rem;
}
.delete-btn {
background: #ffc8b3 !important;
color: #853a18;
}
.add-todo-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
background: #ffefdb;
padding: 18px;
border-radius: 50px;
}
.add-todo-form input {
padding: 10px 16px;
border-radius: 60px;
border: none;
font-size: 0.9rem;
outline: none;
background: #fffef7;
border: 1px solid #e9cfaa;
}
.add-todo-form button {
background: #f29c4a;
color: white;
border: none;
padding: 12px;
border-radius: 60px;
font-weight: bold;
cursor: pointer;
font-size: 1rem;
transition: 0.1s;
}
.add-todo-form button:hover {
background: #e07c2c;
}
.color-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.todo-color {
width: 44px;
height: 38px;
border-radius: 40px;
border: 1px solid #c28a55;
cursor: pointer;
}
.prob-stats {
font-size: 0.7rem;
text-align: center;
background: #fbebce;
padding: 8px;
border-radius: 60px;
margin-top: 10px;
font-weight: 600;
}
.wheel-wrapper {
position: relative;
width: min(65vw, 65vh, 400px);
height: min(65vw, 65vh, 400px);
margin: 0 auto;
cursor: pointer;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 50%;
box-shadow: 0 18px 28px rgba(0,0,0,0.45), 0 0 0 12px #ffefc0, 0 0 0 16px #e08e42;
}
.pointer-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 22%;
height: 22%;
background: radial-gradient(circle, #fff0b5, #f5b55a);
border-radius: 50%;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
pointer-events: none;
font-weight: bold;
color: #804e27;
}
.fixed-arrow {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-top: 56px solid #ffd58c;
filter: drop-shadow(0 5px 6px rgba(0,0,0,0.3));
z-index: 15;
}
.fixed-arrow::after {
content: "🤔";
position: absolute;
top: -54px;
left: -18px;
font-size: 32px;
color: #59351c;
text-shadow: 0 1px 2px #ffdd99;
}
.info-panel {
margin-top: 25px;
text-align: center;
background: #fff7e8;
border-radius: 60px;
padding: 18px 20px;
}
.result-area {
background: #3f2a1c;
color: #ffecbf;
padding: 14px 20px;
border-radius: 50px;
font-size: 1.15rem;
font-weight: bold;
margin-bottom: 16px;
}
.btn-spin {
background: linear-gradient(135deg, #ffad42, #ff6f3c);
border: none;
padding: 13px 30px;
font-size: 1.55rem;
font-weight: bold;
color: white;
text-shadow: 0 2px 3px #93451a;
border-radius: 60px;
cursor: pointer;
box-shadow: 0 8px 0 #a54517;
transition: 0.07s linear;
width: 80%;
letter-spacing: 3px;
}
.btn-spin:active {
transform: translateY(4px);
box-shadow: 0 3px 0 #a54517;
}
.btn-spin:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.history {
margin-top: 14px;
font-size: 0.8rem;
background: #4f3422b3;
backdrop-filter: blur(4px);
padding: 9px 14px;
border-radius: 48px;
color: #fff2dc;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
align-items: center;
}
.glow {
animation: bounceGlow 0.4s ease-in-out 2;
}
@keyframes bounceGlow {
0% { text-shadow: 0 0 0 #ffc285; transform: scale(1);}
50% { text-shadow: 0 0 12px #ffb347; transform: scale(1.01);}
100% { text-shadow: 0 0 0 #ffa559; transform: scale(1);}
}
@media (max-width: 780px) {
.game-layout { flex-direction: column; }
}
footer {
font-size: 0.7rem;
text-align: center;
margin-top: 10px;
color: #fbe6b0;
}
</style>
</head>
<body>
<div class="game-layout">
<!-- 左侧转盘区域 -->
<div class="wheel-area">
<div class="wheel-wrapper">
<div class="fixed-arrow"></div>
<canvas id="wheelCanvas" width="600" height="600"></canvas>
<div class="pointer-center">❓</div>
</div>
<div class="info-panel">
<div class="result-area" id="resultMsg">✨ 今天干什么？让转盘帮你决定 ✨</div>
<button class="btn-spin" id="spinBtn">🎲 转一下！今天做什么 🎲</button>
<div class="history">
<span>📝 今日选择记录：</span>
<span id="historyList">—</span>
<button id="resetHistoryBtn" style="background:#7b583d; border:none; color:#ffefb9; border-radius:35px; padding:5px 14px;">🗑️ 清空</button>
</div>
<footer>⚡ 点击转盘或按钮 · 按权重随机决定「今天干什么」</footer>
</div>
</div>
<!-- 右侧管理面板：初始项目与转盘完全一致 -->
<div class="settings-area">
<h3>📋 「今天干什么」清单 📋</h3>
<div class="prob-stats" id="probStats">🎯 每件事的权重 = 被抽中的概率</div>
<ul class="todo-list" id="todoListContainer"></ul>
<div class="add-todo-form">
<input type="text" id="todoName" placeholder="今天想干什么？" maxlength="18">
<input type="text" id="todoDetail" placeholder="具体描述" maxlength="26">
<div class="color-row">
<span>🎨 标记颜色:</span>
<input type="color" id="todoColor" value="#FFE1A0">
<span class="todo-color" id="colorPreview" style="background:#FFE1A0;"></span>
<span style="font-size:0.75rem;">权重🎲:</span>
<input type="number" id="newTodoWeight" value="10" min="1" max="1000" style="width:80px; border-radius:40px; padding:6px;">
</div>
<button id="addTodoBtn">➕ 添加新活动</button>
<div class="warning-msg">💡 点击活动可编辑 · 至少保留2件事</div>
</div>
</div>
</div>
<script>
// ---------- 数据结构 ----------
let todos = []; // { name, detail, color, weight }
let currentRotation = 0;
let isSpinning = false;
let animFrameId = null;
let spinDuration = 1700;
let historyList = [];
// DOM 元素
const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');
const spinBtn = document.getElementById('spinBtn');
const resultMsgDiv = document.getElementById('resultMsg');
const historySpan = document.getElementById('historyList');
const resetHistoryBtn = document.getElementById('resetHistoryBtn');
const todoListContainer = document.getElementById('todoListContainer');
const addTodoBtn = document.getElementById('addTodoBtn');
const todoNameInput = document.getElementById('todoName');
const todoDetailInput = document.getElementById('todoDetail');
const todoColorInput = document.getElementById('todoColor');
const colorPreview = document.getElementById('colorPreview');
const newTodoWeight = document.getElementById('newTodoWeight');
const probStatsDiv = document.getElementById('probStats');
// ========== 初始项目：好好刷题，玩mc，学习新算法，整理blog，比赛，刷视频 ==========
const DEFAULT_TODOS = [
{ name: "📚 好好刷题", detail: "LeetCode / 算法练习", color: "#FFB7B2", weight: 18 },
{ name: "⛏️ 玩mc", detail: "我的世界 休闲建造", color: "#C7E9B0", weight: 12 },
{ name: "🧠 学习新算法", detail: "DP / 图论 / 新技巧", color: "#AAD0F0", weight: 16 },
{ name: "📝 整理blog", detail: "写技术博客 / 记录", color: "#FFD966", weight: 14 },
{ name: "🏆 比赛", detail: "参加线上竞赛 / 模拟赛", color: "#E0BBE4", weight: 15 },
{ name: "📱 刷视频", detail: "B站 / YouTube 放松", color: "#FDFFB6", weight: 10 }
];
// 保存至 localStorage
function saveTodos() {
localStorage.setItem('what_todo_today_v2', JSON.stringify(todos));
}
function loadTodos() {
const saved = localStorage.getItem('what_todo_today_v2');
if (saved) {
try {
const parsed = JSON.parse(saved);
if (Array.isArray(parsed) && parsed.length >= 2 && parsed[0].hasOwnProperty('weight')) {
todos = parsed;
return;
}
} catch(e) {}
}
// 深拷贝默认6项
todos = DEFAULT_TODOS.map(t => ({ ...t, weight: t.weight }));
saveTodos();
}
function getTotalWeight() {
return todos.reduce((sum, t) => sum + (t.weight || 1), 0);
}
function updateProbabilityDisplay() {
const total = getTotalWeight();
if (total === 0 || todos.length === 0) {
probStatsDiv.innerHTML = "✨ 添加一些活动吧 ✨";
return;
}
let text = "🎲 今日活动概率：";
for (let i = 0; i < todos.length; i++) {
const p = ((todos[i].weight / total) * 100).toFixed(1);
text += `${todos[i].name.substring(0,6)} ${p}% `;
if (i < todos.length-1 && i < 4) text += "· ";
if (i === 5 && todos.length > 7) text += "…";
}
probStatsDiv.innerHTML = text;
}
function getRandomTodoByWeight() {
if (todos.length === 0) return 0;
const totalWeight = getTotalWeight();
let random = Math.random() * totalWeight;
let accumulator = 0;
for (let i = 0; i < todos.length; i++) {
accumulator += (todos[i].weight || 1);
if (random < accumulator) return i;
}
return 0;
}
// 渲染右侧列表
function renderTodoListUI() {
todoListContainer.innerHTML = '';
todos.forEach((todo, idx) => {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<div class="todo-info">
<div class="todo-name" style="background:${todo.color}90;">${escapeHtml(todo.name)}</div>
<div class="todo-desc">${escapeHtml(todo.detail)}</div>
</div>
<div class="prob-control">
<label>🎲 权重:</label>
<input type="number" class="prob-input" data-index="${idx}" value="${todo.weight}" min="1" max="1000" step="1">
</div>
<div class="todo-actions">
<button class="edit-todo-btn" data-index="${idx}">✏️ 编辑</button>
<button class="delete-btn" data-index="${idx}">🗑️</button>
</div>
`;
todoListContainer.appendChild(li);
});
document.querySelectorAll('.prob-input').forEach(input => {
input.addEventListener('change', (e) => {
const idx = parseInt(input.dataset.index);
let newWeight = parseInt(input.value);
if (isNaN(newWeight) || newWeight < 1) newWeight = 1;
if (newWeight > 1000) newWeight = 1000;
todos[idx].weight = newWeight;
saveTodos();
updateProbabilityDisplay();
drawWheel();
resultMsgDiv.innerHTML = `⚡ 修改「${todos[idx].name}」权重为 ${newWeight}`;
setTimeout(() => {
if(!isSpinning && resultMsgDiv.innerHTML.includes("权重"))
resultMsgDiv.innerHTML = "🤔 今天干什么？转盘随机选一件吧～";
}, 1800);
});
});
document.querySelectorAll('.edit-todo-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = parseInt(btn.dataset.index);
editTodoFull(idx);
});
});
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = parseInt(btn.dataset.index);
deleteTodoAtIndex(idx);
});
});
updateProbabilityDisplay();
}
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
function editTodoFull(idx) {
const todo = todos[idx];
const newName = prompt("编辑活动名称", todo.name);
if (newName && newName.trim()) todo.name = newName.trim().slice(0, 22);
const newDetail = prompt("具体描述", todo.detail);
if (newDetail !== null) todo.detail = newDetail.trim().slice(0, 28);
const newColor = prompt("颜色代码 (如 #FFaa88)", todo.color);
if (newColor && /^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(newColor.trim())) {
todo.color = newColor.trim();
} else if (newColor) { alert("颜色格式不对，保持原样"); }
saveTodos();
renderTodoListUI();
drawWheel();
resultMsgDiv.innerHTML = `✏️ 活动「${todo.name}」已更新`;
setTimeout(() => { if(!isSpinning) resultMsgDiv.innerHTML = "🎡 点转盘开始选择～"; }, 1400);
}
function deleteTodoAtIndex(idx) {
if (todos.length <= 2) {
alert("至少保留2件事！");
return;
}
todos.splice(idx, 1);
saveTodos();
renderTodoListUI();
drawWheel();
currentRotation = 0;
drawWheel();
}
function addNewTodo() {
let newName = todoNameInput.value.trim();
let newDetail = todoDetailInput.value.trim();
let newColor = todoColorInput.value;
let newWeight = parseInt(newTodoWeight.value);
if (isNaN(newWeight) || newWeight < 1) newWeight = 10;
if (!newName) { alert("写一个今天想做的事吧～"); return; }
if (!newDetail) newDetail = "快乐小事";
if (todos.length >= 14) { alert("最多14项"); return; }
todos.push({
name: newName.slice(0, 22),
detail: newDetail.slice(0, 28),
color: newColor,
weight: Math.min(1000, newWeight)
});
saveTodos();
renderTodoListUI();
drawWheel();
todoNameInput.value = '';
todoDetailInput.value = '';
todoColorInput.value = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');
colorPreview.style.backgroundColor = todoColorInput.value;
newTodoWeight.value = 10;
resultMsgDiv.innerHTML = `✨ 加入「${newName}」✨`;
setTimeout(() => { if(!isSpinning) resultMsgDiv.innerHTML = "🎲 转动转盘吧！"; }, 1600);
}
// ------------------- 转盘绘图 -------------------
let size = 600;
function setCanvasSize() {
const container = document.querySelector('.wheel-wrapper');
const containerSize = container.clientWidth;
const dim = containerSize;
canvas.width = dim;
canvas.height = dim;
size = dim;
drawWheel();
}
function drawWheel() {
if (!ctx || todos.length === 0) return;
const w = size, h = size;
const centerX = w/2, centerY = h/2;
const radius = w/2 * 0.92;
const count = todos.length;
const angleStep = (Math.PI * 2) / count;
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < count; i++) {
const start = i * angleStep + currentRotation;
const end = (i+1) * angleStep + currentRotation;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, start, end);
ctx.closePath();
ctx.fillStyle = todos[i].color;
ctx.fill();
ctx.save();
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, start, end);
ctx.lineTo(centerX, centerY);
ctx.strokeStyle = "#FFF5E1";
ctx.lineWidth = 2.5;
ctx.stroke();
ctx.restore();
// 写文字
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(start + angleStep/2);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
const textRadius = radius * 0.7;
let fontSize = Math.max(11, size * 0.038);
ctx.font = `bold ${fontSize}px "Segoe UI", "Poppins"`;
ctx.fillStyle = "#332211";
let shortName = todos[i].name.length > 8 ? todos[i].name.slice(0,6)+".." : todos[i].name;
ctx.fillText(shortName, textRadius, 4);
ctx.font = `${fontSize-4}px "Segoe UI"`;
ctx.fillStyle = "#874e21";
let shortDesc = todos[i].detail.length > 10 ? todos[i].detail.slice(0,8)+".." : todos[i].detail;
ctx.fillText(shortDesc, textRadius, fontSize+4);
ctx.restore();
}
ctx.beginPath();
ctx.arc(centerX, centerY, radius*0.13, 0, Math.PI*2);
ctx.fillStyle = "#FFE7AA";
ctx.fill();
ctx.beginPath();
ctx.arc(centerX, centerY, radius*0.09, 0, Math.PI*2);
ctx.fillStyle = "#DC9240";
ctx.fill();
}
function getTodoIndexFromRotation(rotationRad) {
if (todos.length === 0) return 0;
const fixedPointerAngle = -Math.PI / 2;
let rawAngle = fixedPointerAngle - rotationRad;
const TAU = Math.PI * 2;
rawAngle = ((rawAngle % TAU) + TAU) % TAU;
const angleStep = TAU / todos.length;
for (let i = 0; i < todos.length; i++) {
const start = i * angleStep;
const end = (i+1) * angleStep;
if (rawAngle >= start && rawAngle < end) return i;
}
return 0;
}
function spinWhatTodo() {
if (isSpinning || todos.length === 0) return;
const targetIdx = getRandomTodoByWeight();
const count = todos.length;
const TAU = Math.PI * 2;
const angleStep = TAU / count;
const minRounds = 6;
const maxRounds = 13;
const extraRounds = minRounds + Math.random() * (maxRounds - minRounds);
const baseDelta = extraRounds * TAU;
let foundOffset = null;
for (let testOffset = 0; testOffset < TAU; testOffset += 0.001) {
const testFinal = currentRotation + baseDelta + testOffset;
if (getTodoIndexFromRotation(testFinal) === targetIdx) {
foundOffset = testOffset;
break;
}
}
if (foundOffset === null) foundOffset = 0;
const deltaRotation = baseDelta + foundOffset;
const targetRotationVal = currentRotation + deltaRotation;
const startRotationVal = currentRotation;
const startTime = performance.now();
isSpinning = true;
spinBtn.disabled = true;
function animate(now) {
const elapsed = now - startTime;
let t = Math.min(1, elapsed / spinDuration);
const easeOut = 1 - Math.pow(1 - t, 3);
const newRot = startRotationVal + deltaRotation * easeOut;
currentRotation = newRot;
drawWheel();
if (t < 1) {
animFrameId = requestAnimationFrame(animate);
} else {
currentRotation = targetRotationVal;
currentRotation = ((currentRotation % TAU) + TAU) % TAU;
drawWheel();
const finalIdx = getTodoIndexFromRotation(currentRotation);
const selected = todos[finalIdx];
const pct = ((selected.weight / getTotalWeight()) * 100).toFixed(1);
resultMsgDiv.innerHTML = `🎉 今天干这个！ ${selected.name} · ${selected.detail} (概率 ${pct}%) 🎉`;
resultMsgDiv.classList.add('glow');
setTimeout(() => resultMsgDiv.classList.remove('glow'), 700);
historyList.unshift(`${selected.name} (${selected.detail})`);
if (historyList.length > 7) historyList.pop();
updateHistoryUI();
if (navigator.vibrate) navigator.vibrate(70);
isSpinning = false;
spinBtn.disabled = false;
cancelAnimationFrame(animFrameId);
animFrameId = null;
}
}
if (animFrameId) cancelAnimationFrame(animFrameId);
animFrameId = requestAnimationFrame(animate);
}
function updateHistoryUI() {
if (historyList.length === 0) historySpan.innerText = "—";
else historySpan.innerHTML = historyList.map(h => `🌟 ${h}`).join(' · ');
}
function resetHistory() {
historyList = [];
updateHistoryUI();
resultMsgDiv.innerHTML = "🗑️ 记录已清空";
setTimeout(() => { if(!isSpinning) resultMsgDiv.innerHTML = "🤘 转起来！今天干什么？"; }, 1500);
}
todoColorInput.addEventListener('input', (e) => {
colorPreview.style.backgroundColor = e.target.value;
});
addTodoBtn.addEventListener('click', addNewTodo);
spinBtn.addEventListener('click', spinWhatTodo);
canvas.addEventListener('click', spinWhatTodo);
resetHistoryBtn.addEventListener('click', resetHistory);
window.addEventListener('resize', () => { setCanvasSize(); drawWheel(); });
function init() {
loadTodos();
renderTodoListUI();
setCanvasSize();
drawWheel();
updateHistoryUI();
}
init();
</script>
</body>
</html>
gf25036
LV 4
@
2026-4-29 13:58:02