<think>嗯，用户需要前端代码示例，包含四个功能：任务管理、时间统计、提醒设置和数据分析。这些功能要整合到一个专注力学习辅助系统里，设计要简洁、用户友好。首先，我得考虑如何用HTML结构布局这四个模块，可能需要分区域，比如侧边栏放任务和提醒，主区域放统计和
图表。然后CSS方面，要采用响应式设计，确保在不同设备上都能良好显示，使用Flexbox或者Grid布局。颜色搭配要柔和，减少视觉疲劳，适合学习环境。
JavaScript部分需要处理任务添加、删除，时间数据的更新，提醒的设置以及
图表的渲染。任务管理可以用localStorage保存数据，这样页面刷新后数据不丢失。时间统计可能需要定时器，但用户示例里用了动态更新，可能用随机数据模拟。提醒设置需要定时检查时间，到达设定时间触发通知，这里用setInterval轮询当前时间。数据分析部分用Chart.js来绘制柱状
图和折线
图，展示每周的学习时间和专注度。
还要注意用户体验，比如输入任务后按回车即可添加，删除按钮直观，
图表响应式调整大小。测试各个功能之间的交互，确保没有冲突。代码结构要清晰，方便后续扩展和维护。可能遇到的问题包括localStorage的处理，
图表初始化和数据更新，以及定时提醒的准确性。需要确保代码注释清晰，用户能理解各部分的作用。最后，检查代码是否符合最佳实践，是否有兼容性问题，比如Chart.js的引入是否正确，CSS变量使用是否恰当等。</think>根据专注力学习系统的需求，以下提供一个包含四个核心功能的前端原型实现，采用模块化设计和响应式布局：
```html
<
!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>FocusMaster 专注力分析系统</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary-color: #4CAF
50;
--secondary-color: #2196F3;
}
/* 响应式布局 */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* 数据卡片特效 */
.card {
transition: transform 0.3s;
background: rgba(2
55,2
55,2
55,0.9);
border-radius: 10px;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card:hover {
transform: translateY(-
5px);
}
/* 时间轴样式 */
.timeline {
border-left: 3px solid var(--primary-color);
padding-left: 1rem;
}
</style>
</head>
<body>
<m
ain class="cont
ainer">
<
!-- 任务管理 -->
<section class="card">
<h2>任务列表</h2>
<div id="taskInput">
<input type="text" placeholder="新学习任务" id="newTask">
<button onclick="addTask()">添加</button>
</div>
<ul id="taskList"></ul>
</section>
<
!-- 时间统计 -->
<section class="card">
<h2>学习时间分布</h2>
<canvas id="timeChart"></canvas>
<div id="timeStats">
<p>今日专注: <span id="todayFocus">0</span>
分钟</p>
<p>本周平均: <span id="weekAvg">0</span>
分钟/天</p>
</div>
</section>
<
!-- 提醒设置 -->
<section class="card">
<h2>智能提醒</h2>
<div class="grid">
<div>
<label>提醒间隔（
分钟）</label>
<input type="number" id="reminderInterval" min="1
5" value="4
5">
</div>
<div>
<label>每日目标（
分钟）</label>
<input type="number" id="d
ailyGoal" min="30" value="120">
</div>
</div>
<button onclick="saveSettings()">保存设置</button>
</section>
<
!-- 数据分析 -->
<section class="card">
<h2>专注度趋势</h2>
<canvas id="analyticsChart"></canvas>
<div class="timeline">
<h3>最佳专注时段</h3>
<p id="peakTime">分析中...</p>
</div>
</section>
</m
ain>
<script>
// 任务管理模块
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
function addTask() {
const taskInput = document.getElementById('newTask');
if (taskInput.value.trim()) {
tasks.push({
id: Date.now(),
text: taskInput.value.trim(),
completed: false
});
updateTaskList();
taskInput.value = '';
}
}
function updateTaskList() {
const list = document.getElementById('taskList');
list.innerHTML = tasks.map(task => `
<li class="${task.completed ? 'completed' : ''}">
${task.text}
<button onclick="toggleTask(${task.id})">✓</button>
<button onclick="deleteTask(${task.id})">×</button>
</li>
`).join('');
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// 时间统计模块
const timeCtx = document.getElementById('timeChart').getContext('2d');
new Chart(timeCtx, {
type: 'doughnut',
data: {
labels: ['专注时间', '休息时间'],
datasets: [{
data: [6
5, 3
5],
backgroundColor: [var(--primary-color), var(--secondary-color)]
}]
}
});
// 数据分析模块
const analyticsCtx = document.getElementById('analyticsChart').getContext('2d');
new Chart(analyticsCtx, {
type: 'line',
data: {
labels: ['周一','周二','周三','周四','周五','周六','周日'],
datasets: [{
label: '每日专注时间',
data: [4
5, 60, 7
5,
55, 80, 6
5, 70],
borderColor: var(--primary-color)
}]
}
});
// 提醒设置模块
function saveSettings() {
const settings = {
interval: document.getElementById('reminderInterval').value,
goal: document.getElementById('d
ailyGoal').value
};
localStorage.setItem('settings', JSON.stringify(settings));
initReminders();
}
function initReminders() {
const interval = parseInt(document.getElementById('reminderInterval').value) * 60000;
setInterval(() => {
new Notification('休息提醒', {
body: '该站起来活动一下了！'
});
}, interval);
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {
updateTaskList();
if (Notification.permission
!== 'granted') {
Notification.requestPermission();
}
});
</script>
</body>
</html>
```
1
扫一扫
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
