儿童屏幕时间管控学习引导系统
下面是一个基于JavaScript的儿童屏幕时间管控系统，帮助家长管理孩子电子设备使用，平衡学习与娱乐时间。
儿童屏幕时间管控学习引导系统 :root { --primary: #4a6fa5; --secondary: #6b8cbc; --success: #5cb85c; --warning: #f0ad4e; --danger: #d9534f; --light: #f8f9fa; --dark: #343a40; --gray: #6c757d; --light-gray: #e9ecef; --child-blue: #5bc0de; --parent-green: #5cb85c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); color: var(--dark); line-height: 1.6; min-height: 100vh; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 1.5rem 0; text-align: center; border-radius: 0 0 20px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } h1 { font-size: 2.2rem; margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; opacity: 0.9; max-width: 800px; margin: 0 auto; } .tabs { display: flex; background: white; border-radius: 50px; padding: 5px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .tab { flex: 1; text-align: center; padding: 12px 0; border-radius: 50px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .tab.active { background: var(--primary); color: white; } .tab-content { display: none; } .tab-content.active { display: block; } .card { background: white; border-radius: 15px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); padding: 25px; margin-bottom: 25px; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } .card-header { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--light-gray); } .card-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .card-icon i { font-size: 24px; color: white; } .card-title { font-size: 1.4rem; font-weight: 600; color: var(--dark); } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark); } input, select, button { width: 100%; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 8px; font-size: 1rem; transition: all 0.3s; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2); } button { background: var(--primary); color: white; border: none; cursor: pointer; font-weight: 600; margin-top: 10px; } button:hover { background: var(--secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 111, 165, 0.3); } .btn-success { background: var(--success); } .btn-success:hover { background: #449d44; } .btn-warning { background: var(--warning); } .btn-warning:hover { background: #ec971f; } .time-display { font-size: 3rem; font-weight: 700; text-align: center; color: var(--primary); margin: 20px 0; } .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .app-item { background: var(--light-gray); border-radius: 10px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.3s; } .app-item:hover { background: var(--primary); color: white; transform: translateY(-3px); } .app-item i { font-size: 2rem; margin-bottom: 10px; } .app-item.learning { border-left: 4px solid var(--success); } .app-item.entertainment { border-left: 4px solid var(--danger); } .app-item.blocked { opacity: 0.5; cursor: not-allowed; } .chart-container { height: 300px; margin-top: 20px; } .lock-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 1000; display: none; } .lock-screen h2 { font-size: 2rem; margin-bottom: 20px; } .lock-screen p { font-size: 1.2rem; margin-bottom: 30px; text-align: center; max-width: 500px; } .progress-bar { height: 20px; background: var(--light-gray); border-radius: 10px; margin: 20px 0; overflow: hidden; } .progress { height: 100%; background: var(--success); border-radius: 10px; transition: width 0.5s ease; } .notification { position: fixed; top: 20px; right: 20px; background: white; border-left: 4px solid var(--warning); border-radius: 8px; padding: 15px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; z-index: 1000; transform: translateX(120%); transition: transform 0.5s ease; } .notification.show { transform: translateX(0); } .notification i { font-size: 1.5rem; margin-right: 15px; color: var(--warning); } .reward-badge { display: inline-block; background: gold; color: var(--dark); padding: 5px 10px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; margin-left: 10px; } @media (max-width: 768px) { .app-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } h1 { font-size: 1.8rem; } } </style>儿童屏幕时间管控学习引导系统
科学管理屏幕时间，平衡学习与娱乐，培养孩子健康数字生活习惯
<div class="container">
<div class="tabs">
<div class="tab active" data-tab="parent">家长控制面板</div>
<div class="tab" data-tab="child">孩子使用界面</div>
<div class="tab" data-tab="report">使用报告</div>
</div>
<!-- 家长控制面板 -->
<div class="tab-content active" id="parentTab">
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-cog"></i>
</div>
<div>
<h2 class="card-title">系统设置</h2>
<p>配置设备绑定与时间规则</p>
</div>
</div>
<div class="form-group">
<label for="deviceName">设备名称</label>
<input type="text" id="deviceName" placeholder="例如：小明的平板电脑">
</div>
<div class="form-group">
<label for="deviceId">设备ID (模拟)</label>
<input type="text" id="deviceId" value="DEV-2023-001" readonly>
</div>
<button id="bindDeviceBtn" class="btn-success">绑定设备</button>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-clock"></i>
</div>
<div>
<h2 class="card-title">时间规则设置</h2>
<p>设置每日使用时长与允许时段</p>
</div>
</div>
<div class="form-group">
<label for="dailyLimit">每日总时长 (分钟)</label>
<input type="number" id="dailyLimit" min="30" max="180" value="90">
</div>
<div class="form-group">
<label for="learningTime">每日最低学习时间 (分钟)</label>
<input type="number" id="learningTime" min="15" max="120" value="30">
</div>
<div class="form-group">
<label for="startTime">允许开始时间</label>
<input type="time" id="startTime" value="16:00">
</div>
<div class="form-group">
<label for="endTime">允许结束时间</label>
<input type="time" id="endTime" value="20:00">
</div>
<button id="saveSettingsBtn">保存设置</button>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div>
<h2 class="card-title">应用分类管理</h2>
<p>标记应用类型，系统将自动识别</p>
</div>
</div>
<div class="app-grid">
<div class="app-item learning" data-type="learning">
<i class="fas fa-book"></i>
<div>学习强国</div>
</div>
<div class="app-item learning" data-type="learning">
<i class="fas fa-calculator"></i>
<div>数学思维</div>
</div>
<div class="app-item learning" data-type="learning">
<i class="fas fa-globe"></i>
<div>科普百科</div>
</div>
<div class="app-item entertainment" data-type="entertainment">
<i class="fas fa-gamepad"></i>
<div>益智游戏</div>
</div>
<div class="app-item entertainment" data-type="entertainment">
<i class="fas fa-film"></i>
<div>动画视频</div>
</div>
<div class="app-item entertainment" data-type="entertainment">
<i class="fas fa-music"></i>
<div>音乐播放</div>
</div>
</div>
<div class="form-group" style="margin-top: 20px;">
<label for="newAppName">添加新应用</label>
<div style="display: flex; gap: 10px;">
<input type="text" id="newAppName" placeholder="应用名称">
<select id="newAppType">
<option value="learning">学习类</option>
<option value="entertainment">娱乐类</option>
</select>
<button id="addAppBtn" style="width: auto;">添加</button>
</div>
</div>
</div>
</div>
<!-- 孩子使用界面 -->
<div class="tab-content" id="childTab">
<div class="card">
<div class="card-header">
<div class="card-icon" style="background: linear-gradient(135deg, var(--child-blue), #31b0d5);">
<i class="fas fa-user"></i>
</div>
<div>
<h2 class="card-title">欢迎使用学习系统</h2>
<p>合理安排时间，快乐学习成长</p>
</div>
</div>
<div class="time-display" id="remainingTime">90:00</div>
<div style="text-align: center; margin-bottom: 20px;">
今日剩余屏幕时间 (<span id="usedTime">0</span>分钟已用)
</div>
<div class="progress-bar">
<div class="progress" id="timeProgress" style="width: 0%"></div>
</div>
<div style="text-align: center; margin: 15px 0;">
<span>学习进度: <span id="learningProgress">0</span>/<span id="requiredLearningTime">30</span> 分钟</span>
<span id="rewardBadge" class="reward-badge" style="display: none;">达成奖励!</span>
</div>
<div class="app-grid">
<div class="app-item learning" data-app="math">
<i class="fas fa-calculator"></i>
<div>数学思维</div>
</div>
<div class="app-item learning" data-app="science">
<i class="fas fa-flask"></i>
<div>科学实验</div>
</div>
<div class="app-item learning" data-app="reading">
<i class="fas fa-book-open"></i>
<div>趣味阅读</div>
</div>
<div class="app-item entertainment" data-app="puzzle">
<i class="fas fa-puzzle-piece"></i>
<div>益智拼图</div>
</div>
<div class="app-item entertainment" data-app="cartoon">
<i class="fas fa-film"></i>
<div>教育动画</div>
</div>
<div class="app-item entertainment" data-app="music">
<i class="fas fa-music"></i>
<div>古典音乐</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon" style="background: linear-gradient(135deg, var(--success), #449d44);">
<i class="fas fa-star"></i>
</div>
<div>
<h2 class="card-title">今日推荐学习内容</h2>
<p>根据你的兴趣和学习进度推荐</p>
</div>
</div>
<div id="recommendedContent">
<div style="padding: 15px; background: var(--light-gray); border-radius: 10px; margin-bottom: 15px;">
<h3><i class="fas fa-atom"></i> 趣味物理小实验</h3>
<p>通过简单实验了解重力与浮力的奥秘，适合8岁以上儿童</p>
<button class="btn" style="width: auto; padding: 8px 15px;">开始学习</button>
</div>
<div style="padding: 15px; background: var(--light-gray); border-radius: 10px; margin-bottom: 15px;">
<h3><i class="fas fa-language"></i> 英语单词闯关</h3>
<p>通过游戏方式记忆常用英语单词，共5个关卡</p>
<button class="btn" style="width: auto; padding: 8px 15px;">开始学习</button>
</div>
<div style="padding: 15px; background: var(--light-gray); border-radius: 10px;">
<h3><i class="fas fa-paint-brush"></i> 创意美术课</h3>
<p>学习简单绘画技巧，创作属于自己的艺术作品</p>
<button class="btn" style="width: auto; padding: 8px 15px;">开始学习</button>
</div>
</div>
</div>
</div>
<!-- 使用报告 -->
<div class="tab-content" id="reportTab">
<div class="card">
<div class="card-header">
<div class="card-icon" style="background: linear-gradient(135deg, var(--warning), #ec971f);">
<i class="fas fa-chart-line"></i>
</div>
<div>
<h2 class="card-title">本周使用报告</h2>
<p>可视化展示屏幕时间与学习情况</p>
</div>
</div>
<div class="chart-container">
<canvas id="usageChart"></canvas>
</div>
<div class="chart-container">
<canvas id="categoryChart"></canvas>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon" style="background: linear-gradient(135deg, var(--success), #449d44);">
<i class="fas fa-trophy"></i>
</div>
<div>
<h2 class="card-title">学习成就</h2>
<p>达成目标的奖励与进步记录</p>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;">
<div style="text-align: center; padding: 15px; background: var(--light); border-radius: 10px;">
<i class="fas fa-medal" style="font-size: 2.5rem; color: gold; margin-bottom: 10px;"></i>
<h3>连续学习达人</h3>
<p>已连续5天完成学习任务</p>
</div>
<div style="text-align: center; padding: 15px; background: var(--light); border-radius: 10px;">
<i class="fas fa-book" style="font-size: 2.5rem; color: var(--primary); margin-bottom: 10px;"></i>
<h3>阅读之星</h3>
<p>本周累计阅读120分钟</p>
</div>
<div style="text-align: center; padding: 15px; background: var(--light); border-radius: 10px;">
<i class="fas fa-brain" style="font-size: 2.5rem; color: var(--success); margin-bottom: 10px;"></i>
<h3>数学小天才</h3>
<p>完成所有数学思维挑战</p>
</div>
</div>
</div>
</div>
</div>
<!-- 锁屏界面 -->
<div class="lock-screen" id="lockScreen">
<h2><i class="fas fa-lock"></i> 屏幕时间已用完</h2>
<p>今日娱乐时间已达上限，请先完成学习任务或明天再使用</p>
<div class="time-display" id="lockTimeDisplay">00:00</div>
<p>学习时间: <span id="lockLearningTime">0</span>分钟 (还需<span id="remainingLearningTime">30</span>分钟)</p>
<button id="unlockBtn" class="btn-warning">我知道了</button>
</div>
<!-- 通知 -->
<div class="notification" id="notification">
<i class="fas fa-bell"></i>
<div class="notification-content">
<h4>系统通知</h4>
<p id="notificationText">欢迎使用儿童屏幕时间管控系统</p>
</div>
</div>
<script>
// 系统状态管理
const systemState = {
deviceBound: false,
dailyLimit: 90, // 分钟
learningTime: 30, // 分钟
startTime: "16:00",
endTime: "20:00",
usedTime: 0,
learningUsed: 0,
remainingTime: 90,
apps: [
{ name: "数学思维", type: "learning", icon: "calculator" },
{ name: "科学实验", type: "learning", icon: "flask" },
{ name: "趣味阅读", type: "learning", icon: "book-open" },
{ name: "益智拼图", type: "entertainment", icon: "puzzle-piece" },
{ name: "教育动画", type: "entertainment", icon: "film" },
{ name: "古典音乐", type: "entertainment", icon: "music" }
],
recommendedContent: [
{ title: "趣味物理小实验", desc: "通过简单实验了解重力与浮力的奥秘", icon: "atom" },
{ title: "英语单词闯关", desc: "通过游戏方式记忆常用英语单词", icon: "language" },
{ title: "创意美术课", desc: "学习简单绘画技巧，创作艺术作品", icon: "paint-brush" }
]
};
// DOM元素
const elements = {
tabs: document.querySelectorAll('.tab'),
tabContents: document.querySelectorAll('.tab-content'),
bindDeviceBtn: document.getElementById('bindDeviceBtn'),
saveSettingsBtn: document.getElementById('saveSettingsBtn'),
remainingTime: document.getElementById('remainingTime'),
usedTime: document.getElementById('usedTime'),
timeProgress: document.getElementById('timeProgress'),
learningProgress: document.getElementById('learningProgress'),
requiredLearningTime: document.getElementById('requiredLearningTime'),
rewardBadge: document.getElementById('rewardBadge'),
lockScreen: document.getElementById('lockScreen'),
unlockBtn: document.getElementById('unlockBtn'),
notification: document.getElementById('notification'),
notificationText: document.getElementById('notificationText')
};
// 初始化
function initSystem() {
// 加载保存的设置
loadSettings();
// 绑定事件监听器
bindEvents();
// 初始化图表
initCharts();
// 更新UI
updateUI();
// 显示欢迎通知
showNotification("欢迎使用儿童屏幕时间管控系统，让我们一起培养健康的数字生活习惯！");
}
// 加载设置
function loadSettings() {
const savedSettings = localStorage.getItem('screenTimeSettings');
if (savedSettings) {
const settings = JSON.parse(savedSettings);
Object.assign(systemState, settings);
}
// 更新表单值
document.getElementById('dailyLimit').value = systemState.dailyLimit;
document.getElementById('learningTime').value = systemState.learningTime;
document.getElementById('startTime').value = systemState.startTime;
document.getElementById('endTime').value = systemState.endTime;
}
// 保存设置
function saveSettings() {
systemState.dailyLimit = parseInt(document.getElementById('dailyLimit').value);
systemState.learningTime = parseInt(document.getElementById('learningTime').value);
systemState.startTime = document.getElementById('startTime').value;
systemState.endTime = document.getElementById('endTime').value;
// 保存到localStorage
localStorage.setItem('screenTimeSettings', JSON.stringify({
dailyLimit: systemState.dailyLimit,
learningTime: systemState.learningTime,
startTime: systemState.startTime,
endTime: systemState.endTime
}));
// 重置使用时间
systemState.usedTime = 0;
systemState.learningUsed = 0;
systemState.remainingTime = systemState.dailyLimit;
updateUI();
showNotification("设置已保存成功！");
}
// 绑定设备
function bindDevice() {
const deviceName = document.getElementById('deviceName').value;
if (!deviceName) {
showNotification("请输入设备名称");
return;
}
systemState.deviceBound = true;
showNotification(`设备 "${deviceName}" 绑定成功！`);
}
// 绑定事件监听器
function bindEvents() {
// 标签切换
elements.tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-tab');
// 更新标签状态
elements.tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// 更新内容显示
elements.tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === `${tabId}Tab`) {
content.classList.add('active');
}
});
});
});
// 绑定设备按钮
elements.bindDeviceBtn.addEventListener('click', bindDevice);
// 保存设置按钮
elements.saveSettingsBtn.addEventListener('click', saveSettings);
// 解锁按钮
elements.unlockBtn.addEventListener('click', () => {
elements.lockScreen.style.display = 'none';
});
// 应用点击事件
document.querySelectorAll('.app-item').forEach(app => {
app.addEventListener('click', function() {
if (this.classList.contains('blocked')) return;
const appType = this.getAttribute('data-type') || this.getAttribute('data-app');
const isLearning = this.classList.contains('learning') ||
(appType && systemState.apps.find(a => a.icon === appType)?.type === 'learning');
handleAppUsage(isLearning);
});
});
// 添加应用按钮
document.getElementById('addAppBtn').addEventListener('click', addNewApp);
}
// 处理应用使用
function handleAppUsage(isLearning) {
if (systemState.remainingTime <= 0) {
showLockScreen();
return;
}
// 模拟使用5分钟
const usageTime = 5;
if (isLearning) {
systemState.learningUsed += usageTime;
showNotification(`开始学习，已累计学习 ${systemState.learningUsed} 分钟`);
} else {
systemState.usedTime += usageTime;
systemState.remainingTime -= usageTime;
showNotification(`开始娱乐，剩余时间 ${formatTime(systemState.remainingTime)}`);
}
// 检查学习进度
checkLearningProgress();
// 更新UI
updateUI();
// 随机触发锁屏（演示用）
if (!isLearning && Math.random() < 0.3 && systemState.remainingTime < 15) {
setTimeout(showLockScreen, 2000);
}
}
// 检查学习进度
function checkLearningProgress() {
if (systemState.learningUsed >= systemState.learningTime) {
// 学习达标，奖励娱乐时间
const bonusTime = 15;
systemState.remainingTime += bonusTime;
systemState.learningUsed = 0; // 重置学习计时
elements.rewardBadge.style.display = 'inline-block';
showNotification(`恭喜！学习达标，获得 ${bonusTime} 分钟额外娱乐时间`);
setTimeout(() => {
elements.rewardBadge.style.display = 'none';
}, 5000);
}
}
// 显示锁屏
function showLockScreen() {
const remainingLearning = Math.max(0, systemState.learningTime - systemState.learningUsed);
document.getElementById('lockLearningTime').textContent = systemState.learningUsed;
document.getElementById('remainingLearningTime').textContent = remainingLearning;
document.getElementById('lockTimeDisplay').textContent = formatTime(systemState.remainingTime);
elements.lockScreen.style.display = 'flex';
}
// 添加新应用
function addNewApp() {
const appName = document.getElementById('newAppName').value;
const appType = document.getElementById('newAppType').value;
if (!appName) {
showNotification("请输入应用名称");
return;
}
// 添加到应用列表
const iconMap = {
'learning': 'book',
'entertainment': 'gamepad'
};
systemState.apps.push({
name: appName,
type: appType,
icon: iconMap[appType] || 'mobile-alt'
});
// 添加到UI
const appGrid = document.querySelector('#parentTab .app-grid');
const appItem = document.createElement('div');
appItem.className = `app-item ${appType}`;
appItem.setAttribute('data-type', appType);
appItem.innerHTML = `
<i class="fas fa-${iconMap[appType] || 'mobile-alt'}"></i>
<div>${appName}</div>
`;
appGrid.appendChild(appItem);
// 清空输入
document.getElementById('newAppName').value = '';
showNotification(`应用 "${appName}" 添加成功！`);
}
// 更新UI
function updateUI() {
// 更新剩余时间显示
elements.remainingTime.textContent = formatTime(systemState.remainingTime);
elements.usedTime.textContent = systemState.usedTime;
// 更新进度条
const progressPercent = (systemState.usedTime / systemState.dailyLimit) * 100;
elements.timeProgress.style.width = `${Math.min(progressPercent, 100)}%`;
// 更新学习进度
elements.learningProgress.textContent = systemState.learningUsed;
elements.requiredLearningTime.textContent = systemState.learningTime;
}
// 显示通知
function showNotification(message) {
elements.notificationText.textContent = message;
elements.notification.classList.add('show');
setTimeout(() => {
elements.notification.classList.remove('show');
}, 5000);
}
// 格式化时间（分钟转HH:MM）
function formatTime(minutes) {
const hrs = Math.floor(minutes / 60);
const mins = minutes % 60;
return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
}
// 初始化图表
function initCharts() {
// 使用报告图表
const usageCtx = document.getElementById('usageChart').getContext('2d');
new Chart(usageCtx, {
type: 'bar',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [{
label: '学习时间 (分钟)',
data: [25, 30, 28, 35, 40, 20, 15],
backgroundColor: 'rgba(92, 184, 92, 0.7)',
borderColor: 'rgba(92, 184, 92, 1)',
borderWidth: 1
}, {
label: '娱乐时间 (分钟)',
data: [60, 55, 65, 50, 45, 80, 70],
backgroundColor: 'rgba(217, 83, 79, 0.7)',
borderColor: 'rgba(217, 83, 79, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
// 分类图表
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
new Chart(categoryCtx, {
type: 'doughnut',
data: {
labels: ['学习类', '益智游戏', '动画视频', '音乐音频', '其他'],
datasets: [{
data: [35, 25, 20, 15, 5],
backgroundColor: [
'rgba(92, 184, 92, 0.7)',
'rgba(74, 111, 165, 0.7)',
'rgba(240, 173, 78, 0.7)',
'rgba(155, 89, 182, 0.7)',
'rgba(108, 117, 125, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initSystem);
</script>
系统功能说明
核心功能实现
- 设备绑定与管理
- 家长可绑定孩子设备（模拟设备ID）
- 设置设备名称和基本信息
- 支持多设备管理（扩展功能）
- 时间规则设置
- 自定义每日总使用时长（30-180分钟）
- 设置最低每日学习时间（15-120分钟）
- 配置允许使用的时间段（如16:00-20:00）
- 设置数据持久化（localStorage）
- 应用智能识别与分类
- 预设学习类/娱乐类应用图标与名称
- 支持家长添加自定义应用并分类
- 视觉区分应用类型（绿色边框=学习，红色=娱乐）
- 超时自动锁屏机制
- 娱乐应用使用达上限自动触发锁屏
- 锁屏界面显示剩余时间及学习要求
- 需家长确认后解锁（演示版简化为"我知道了"）
- 学习达标奖励系统
- 累计学习时间达标后解锁额外娱乐时间
- 成就徽章奖励机制（连续学习、阅读之星等）
- 可视化学习进度条与奖励提示
- 益智内容推荐引擎
- 基于学习进度推荐适龄内容
- 分类展示学习资源（科学、数学、艺术等）
- 一键启动学习内容
- 使用报告与分析
- 周维度使用时间统计图表
- 应用分类占比环形图
- 学习成就与进步记录
系统创新点
- 双向激励模型：学习时间兑换娱乐时间，形成正向循环
- 智能时段管理：结合孩子作息规律设置弹性使用窗口
- 可视化反馈：通过进度条、徽章、图表增强用户成就感
- 场景化推荐：根据使用行为推荐适配的益智内容
- 轻量化部署：纯前端实现，无需后端服务器支持
应用场景
- 日常课后管理：控制放学后屏幕使用时间
- 假期使用规划：平衡长假期间学习与娱乐
- 专注力培养：通过时间限制提升学习效率
- 数字素养教育：帮助孩子建立健康用网习惯
- 远程亲子互动：家长通过报告了解孩子使用情况
使用指南
- 家长设置流程：
- 绑定孩子设备并命名
- 设置每日总时长与最低学习时间
- 配置允许使用的时间段
- 标记常用应用类型
- 孩子使用流程：
- 登录系统查看剩余时间
- 优先完成学习任务积累奖励时间
- 使用推荐益智内容提升效率
- 超时后系统自动锁屏提醒
- 数据分析流程：
- 定期查看使用报告了解趋势
- 根据成就徽章调整激励策略
- 优化应用分类提升识别准确率
该系统通过游戏化设计和正向激励机制，让孩子在享受数字乐趣的同时养成良好使用习惯，帮助家长实现科学有效的屏幕时间管理。 关注我，有更多编程干货等着你！
