给孩子做的课程表工具 V2.0

mengfanyu · 发表于 2025-12-24 16:48

部分源码

[HTML] 纯文本查看 复制代码

<div class="container">
        <header class="header">
            <h1>&#127752; 我的课程表 &#127752;</h1>
            <div class="owner-name" id="ownerNameDisplay">
                <span id="ownerIcon">&#128103;</span>
                <span id="ownerNameText">孟中淇</span>
                <span id="ownerDecor">&#127872;</span>
                <span class="edit-icon">&#9999;&#65039;</span>
            </div>
            <div class="name-input-container" id="nameInputContainer">
                <input type="text" class="name-input" id="nameInput" placeholder="输入名字" maxlength="10">
                <button class="name-confirm-btn">确定</button>
            </div>
            <p class="subtitle">让学习变得更有趣 &#10024;</p>
            <div class="theme-selector">
                <button class="theme-btn active" data-theme="sakura" title="&#127800; 樱花粉 (女孩)">&#127800;</button>
                <button class="theme-btn" data-theme="dream" title="&#128156; 梦幻紫 (女孩)">&#127769;</button>
                <button class="theme-btn" data-theme="rainbow" title="&#127752; 彩虹糖 (女孩)">&#127853;</button>
                <button class="theme-btn" data-theme="ocean" title="&#127754; 深海蓝 (男孩)">&#128044;</button>
                <button class="theme-btn" data-theme="forest" title="&#127794; 森林绿 (男孩)">&#127794;</button>
                <button class="theme-btn" data-theme="space" title="&#128640; 太空灰 (男孩)">&#128640;</button>
            </div>
        </header>

        <div class="main-content">
            <!-- 配置面板 -->
            <div class="config-panel">
                <h2>&#128221; 课程配置 &#127912;</h2>
                <div class="course-manager">
                    <p class="subtitle" style="text-align:center; margin-bottom: 1rem;">&#11015;&#65039; 在这里添加课程，点击课程表即可选择哦</p>
                    <div class="add-course-section">
                        <input type="text" id="newCourseInput" placeholder="输入新课程名称..." maxlength="10">
                        <button class="btn-add" id="addCourseBtn">&#10133; 添加</button>
                    </div>
                    <div class="course-list-container" id="courseListManager">
                        <!-- 课程标签动态生成 -->
                    </div>
                </div>
            </div>

            <!-- 预览面板 -->
            <div class="preview-panel">
                <div class="preview-header">
                    <h2>&#128064; 课程表预览 &#127775;</h2>
                    <button class="btn btn-print" id="printBtn">&#128424;&#65039; 打印课程表</button>
                </div>
                <div class="schedule-container" id="schedulePreview">
                    <!-- 课程表将通过JavaScript动态生成 -->
                </div>
                <div class="motivation-section">

                    <div class="motivation-input">
                        <div class="motivation-controls">
                            <textarea id="motivationText" placeholder="输入你的激励语...">学习很苦,坚持很酷</textarea>
                            <button class="dice-btn" id="diceBtn" title="随机换一条激励语">&#127922;</button>
                        </div>
                    </div>
                </div>
            </div>

没想到这么多人有这个诉求，一切都是为了孩子！
看到大家提了很多新需求，所以更新一版
需求来源：

TangTonT：可以改名字吗？只能是“孟中淇” 吗？
jinqiaoa1a：再加上每节课的起止时间表，就更好了
smallmouse228：没有时间，建议增加！！
少污污：加入相同科目相同色，不同科目不同色。
samniboy：为上午和下午就更清晰了，在加上个晚自习就更完善了
38342175：建议增加上课时间和课间休息
locoman：增加”起床“、”早自习“、”晚自习“、“午休”、“睡觉”等日程。

更新内容：

允许修改名字，点击最上面名字即可修改；
对于男孩女孩加入了不同样式，点最上面的样式切换即可；
增加课程自定义功能，允许添加如：晚自习、洗漱，等“课程”；
允许添加每天课程数量，目前最大12节课，毕竟还只是孩子；
允许对每节课设置时间，点击第N节课即可设置时间。

课程表V2.0.zip (15.14 KB, 下载次数: 1764)

lostlosin · 发表于 2025-12-27 11:38

本帖最后由 lostlosin 于 2025-12-29 13:51 编辑

改了一点，增加周六、周日可选
https://wwazg.lanzoub.com/irgmC3em4tng

又改了一点，加入等宽开关，避免课程名长度不一致时列宽不一
https://wwazg.lanzoub.com/iY2Tv3erpg2d

牛人王老五 · 发表于 2025-12-25 08:36

本帖最后由牛人王老五于 2025-12-25 08:42 编辑

很漂亮的课程表, 不过发现一个小bug, 在页面显示的时候, 课程时间设置里, 时间不能完整显示.

--------------------------------------
找到修改位置了, 如果跟我有相同问题的, 可以修改源文件第1307行, 把width原来的80改为100即可.

hang5008 · 发表于 2025-12-24 18:03

谢谢分享

vivvon · 发表于 2025-12-24 18:04

感谢分享！

zt185 · 发表于 2025-12-24 18:08

这是好工具，给孩子正需要！

dwenlong · 发表于 2025-12-24 18:14

谢谢分享

myth69215 · 发表于 2025-12-24 18:24

感谢分享我也试试

lliu666 · 发表于 2025-12-24 18:35

这个不错，很实用啊！

feichexia · 发表于 2025-12-24 18:53

这个又好一点了

mxjmxj5 · 发表于 2025-12-24 18:55

很有用，谢谢！

传智服务中心 · 发表于 2025-12-24 19:03

很不错哦

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 给孩子做的课程表工具 V2.0

免费评分

本帖被以下淘专辑推荐:

免费评分

免费评分