HTML例假周期树【女朋友生理期记录】

！！！页面样式参考CSDN博主【涔涔OVER】 HTML+PHP女友经期记录情侣月经生理周期记录 博文中页面效果

为运行便捷，建议将所有代码放到一个.html文件，只需直接点击html文件运行即可。

---

修改日志

-----2024-6-11-----
新增【删除最近一条记录】功能，进一步完善记录录入的时间选择限制。
/
-----2024-6-13-----
新增【记录数据统计】功能，包含1.记录总数统计。2.例假周期异常数统计。3.平均例假周期计算。4.平均经期计算。
/
-----2024-6-16-----
新增判定例假周期区分为（异常）（不规律），并区别提醒框颜色，【记录数据统计】修改例假周期异常数统计为例假周期：异常n条，不规律n条。
/
-----2024-6-17-----
完善页面布局尺寸适配笔记本屏幕

一、案例效果展示

1.初始页面

2.运行视频

Menstrual cycle tree运行视频

二、存储 / 删除说明

1. 本案例采用浏览器LocalStorage本地存储实现数据记录的存储，刷新页面数据不会丢失。

提示：数据不可跨浏览器获取，不同浏览器之间本地存储空间相互独立。

2. 【删除最近一条记录】

点击页面右侧【删除最近一条记录】按钮出现提示，点击确定可 删除日期最近的一条记录。

3. 【删除记录】

点击【删除记录】按钮出现提示，点击确定可 删除所有记录 。

三、数据记录限制说明

1. 开始时间——选择限制

第一次记录（页面中不存在例假记录）例假数据时，【开始时间】的选择为不大于当前日期；当页面中存在例假记录时，【开始时间】选择限制为不早于页面中已有例假记录的时间 && 不大于当前日期。

不大于当前日期：例：今天是2024-5-20，则不可选择2024-5-21及之后的日期。

2. 结束时间——选择限制

根据正常经期时间为7天以内的原则，【结束时间】选择限制为当前选择的【开始时间】往后推7天以内。

3. 经期情况记录——选填

记录有效字符为除空格外120字以内，生成记录时自动去除段落空格。

四、具体 / 运算说明

1. 周期树根据记录开始时间从上到下有序创建及排列。可点击页面右上方按钮，滚动到页面顶部或底部。

2. 例假周期为自动计算。运算规则：上一条记录的开始时间与当前记录的开始时间的时间差。注：第一条记录因无前序记录无法推算，则显示为 斜杠 / 。

3. 例假周期判定提示。根据正常例假周期时间为21~35天，若例假周期天数 小于21或大于35 判定为异常周期，则提醒显示为红色方框；若 当前例假周期与上一例假周期天数差大于7天 ，则当前提醒显示为橙色方框。

4. 新增记录时【经期记录】若不填，生成的例假经期记录则显示为灰色不可点击的——无—— 字样，若填写了【经期记录】，生成的例假记录显示为蓝色可点击的 ——查看—— 字样，点击显示当前经期记录的文本框（不可编辑）。

5. 记录数据统计规则。1.例假周期：异常：出现提示红色方框的记录条数，不规律：出现提示橙色方框的记录条数。2.平均例假周期：小数部分四舍五入。3.平均经期：小数部分四舍五入。

见下图

五、代码部分

1.HTML

    <div class="title">Menstrual Cycle Tree</div>
    <!-- 按钮 -->
    <div class="controller">
        <button class="toTop">↑顶部</button>
        <button class="toBottom">底部↓</button>
        <button class="add">新增记录</button>
        <button class="del">删除记录</button>
    </div>
    <div class="controller_bottom">
        <button class="pop">删除最近一条记录</button>
        <button class="statistics">记录数据统计</button>
    </div>
    <!-- 删除指示条 -->
    <div class="delLine"></div>
    <!-- 删除单条记录 -->
    <div class="info_pop">
        <span>是否确定删除最近一条记录？</span>
        <button class="pop_sure">确定</button>
    </div>
    <div class="info_statistics">
        <ul>
            <li>记录总数：<span class="total"></span>条</li>
            <li>例假周期：异常<span class="abnormal"></span>条，不规律<span class="law"></span>条</li>
            <li>平均例假周期：<span class="average_cycle"></span>天</li>
            <li>平均经期：<span class="average_duration"></span>天</li>
        </ul>
    </div>
    <!-- 新增记录页 -->
    <div class="info_add">
        <div>
            <span>开始日期*</span>
            <input type="date" class="startTime">
        </div>
        <div>
            <span>结束日期*</span>
            <input type="date" class="endTime">
        </div>
        <div>
            <textarea name="" id="" placeholder="经期情况记录（选填）最多120个字符" maxlength="120"></textarea>
        </div>
        <p class="text_num">0/120字</p>
        <button class="data_add">添加</button>
        <button class="content_clean">清空</button>
    </div>
    <!-- 删除记录 -->
    <div class="info_del">
        <span>确定要删除所有记录吗？删除后无法恢复哦~</span>
        <button class="sure_del">确定</button>
    </div>
    <!-- 周期树 -->
    <div class="Menstrual_tree">
        <!-- 周期树干 -->
        <div class="center_trunk"></div>
        <!-- 周期数据 -->
        <div class="data_box"></div>
    </div>

2.CSS

       * {
   
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }
        html {
   
            scroll-behavior: smooth;
        }
        body {
   
            background: linear-gradient(to right, rgb(143, 141, 252) 40%, rgb(142, 199, 248) 100%);
            overflow-x: hidden;
        }
        .title {
   
            width: 30%;
            font-size: 40px;
            color: #fff;
            font-family: "Comic Sans MS";
            position: fixed;
            left: 0;
            text-align: center;
            pointer-events: none;
        }
        .controller {
   
            top: 0;
            right: 0;
            width: 30%;
            height: 50px;
            position: fixed;
            border-bottom-right-radius: 35px;
            border-bottom-left-radius: 35px;
            overflow: hidden;
        }
        .controller_bottom {
   
            widt