# 现代JavaSript教程打卡网页应用 **Repository Path**: SmallSheep123/modern-js-tutorial-checkin-page ## Basic Information - **Project Name**: 现代JavaSript教程打卡网页应用 - **Description**: 这是一个专注于 JavaScript 学习挑战的网页,适配于 https://zh.javascript.info/ 现代JavaScript教程网站,让你清晰掌握学习进展。 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-05-29 - **Last Updated**: 2025-05-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript ## README # JavaScript 学习挑战 # 项目介绍 这是一个专注于JavaScript学习者设计的网页,适配于 https://zh.javascript.info/ 学习网站。旨在帮助用户高效完成 JavaScript 学习挑战。通过动态更新学习进度、每日励志语录和树形结构展示学习路径,用户可以清晰掌握学习进展,保持学习动力。 # 使用方法 1. **克隆项目**:`https://gitee.com/SmallSheep123/modern-js-tutorial-checkin-page.git` 启动项目:打开 index.html 文件即可在浏览器中运行。 2. **网页浏览**:输入 https://smallsheep123.github.io/modern-js-tutorial-checkin-page/ 网址即可在线使用,由于使用了loaclStorage本地化存储,所以可以保持之前的记录。 # 使用功能 - 每日摘要:查看今日完成章节数、剩余章节数和学习进度百分比 - 每日语录:每天更新一句励志语录,激励学习 - 树形结构:通过侧边栏的树形结构查看学习进度 - 章节内容:在主内容区查看各章节详情,并标记完成状态 # 特点 - 动态更新:实时显示学习进度和完成情况 - 每日激励:随机显示励志语录,保持学习动力 - 树形结构:清晰展示学习路径和完成情况 - 进度条:直观展示整体学习进度 - 响应式布局:适配不同设备,提供良好的用户体验 # 响应式布局 - 桌面端:侧边栏和内容区并排显示,充分利用屏幕空间 - 移动端:侧边栏会隐藏,只有内容区显示,确保在小屏幕上也能清晰浏览 # 代码结构 - HTML:定义页面结构和内容区域 - CSS:提供样式和响应式布局支持 - JavaScript:动态生成内容、更新进度和处理用户交互