在线计算月经周期使用html

最新推荐文章于 2024-05-30 15:44:22 发布

IamATM

最新推荐文章于 2024-05-30 15:44:22 发布

阅读量143

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/yizhipipihe/article/details/132313410

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>月经周期预测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        label, input {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        h2 {
            margin-top: 20px;
            color: #333;
        }
        p {
            font-size: 18px;
            color: #555;
        }
        .dangerous {
            color: red;
        }
        .safe {
            color: green;
        }
        .ovulation {
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>月经周期预测</h1>
        <label for="start_date">请选择上一次月经的首日日期：</label>
        <input type="date" id="start_date">
        <label for="cycle_length">请输入月经周期的天数：</label>
        <input type="number" id="cycle_length" min="1" max="50">
        <button onclick="calculatePrediction()">计算</button>
        <h2>结果：</h2>
        <p id="next_period_date"></p>
        <p id="ovulation_date"></p>
        <p id="dangerous_period"></p>
        <p id="safe_period"></p>
        <p id="tips"></p>
        <p id="bug_note"></p>
    </div>

    <script>
        function calculatePrediction() {
            var start_date = document.getElementById("start_date").value;
            var cycle_length = parseInt(document.getElementById("cycle_length").value);

            if (cycle_length < 1) {
                alert("月经周期必须是正整数。");
                return;
            }

            var today = new Date();
            var entered_date = new Date(start_date);

            if (entered_date > today) {
                alert("不能输入未来的日期。");
                return;
            }
            if (cycle_length > 50) {
                alert("你家月经周期超过50天啊？");
                return;
            }

            var start_date_obj = new Date(start_date);
            var next_period_date = new Date(start_date_obj.getTime() + cycle_length * 24 * 60 * 60 * 1000);
            var ovulation_date = new Date(next_period_date.getTime() - 14 * 24 * 60 * 60 * 1000);
            var dangerous_period_start = new Date(ovulation_date.getTime() - 5 * 24 * 60 * 60 * 1000);
            var dangerous_period_end = new Date(ovulation_date.getTime() + 4 * 24 * 60 * 60 * 1000);
            var safe_period_start = new Date(next_period_date.getTime() - 14 * 24 * 60 * 60 * 1000);
            var safe_period_end = new Date(next_period_date.getTime() - 5 * 24 * 60 * 60 * 1000);

            document.getElementById("next_period_date").innerHTML = "下次月经来的日期是：" + next_period_date.toISOString().slice(0, 10);
            document.getElementById("ovulation_date").innerHTML = "排卵日是：" + ovulation_date.toISOString().slice(0, 10);
            document.getElementById("dangerous_period").innerHTML = "危险期是：" + dangerous_period_start.toISOString().slice(0, 10) + " 到 " + dangerous_period_end.toISOString().slice(0, 10);
            document.getElementById("safe_period").innerHTML = "安全期是：" + safe_period_start.toISOString().slice(0, 10) + " 到 " + safe_period_end.toISOString().slice(0, 10);

            // 添加类名以改变颜色显示
            document.getElementById("dangerous_period").classList.add("dangerous");
            document.getElementById("safe_period").classList.add("safe");
            document.getElementById("ovulation_date").classList.add("ovulation");

            // 添加提示和鼓励语句
            document.getElementById("tips").innerHTML = "Tips:这些方法只能提供大致的经期预测，每个女性的身体状况和周期可能有所不同，因此预测可能不是完全准确的。如果你对经期预测有特殊需求或关注健康问题，请咨询医生或妇科专家。";
            document.getElementById("bug_note").innerHTML = "";
            if (today >= ovulation_date && today <= next_period_date) {
                document.getElementById("bug_note").innerHTML = "Bug:生理期不要忘了对自己好点呀~~~";
            }
        }
    </script>
    <script type="text/javascript" src="js/hua.js"></script>
    <h6 align="center">&copy; 2023 Powered何俊康 保留所有权利。</h6>
</body>
</html>
<!-- 写了很多贴心人性的设置比如输入日期早于现在时间 月经天数不能为负数-->
<!-- Writ By Mr. He Junkang last update 2023/08/15 >

不用更改任何东西，到手即用，未经过授权请勿售卖。

复制或使用默认同意用户条款

软件使用条款模版

尊敬的用户您好，感谢您使用我们的软件产品。为了保障您的

权益和明确双方的责任，我们制定了以下软件应用协议书，请您在

使用本软件前仔细阅读并同意以下条款：

一、软件使用条款

1. 您不能将本软件用于商业用途，仅限个人非商业使用。

2. 您不得复制、修改、反编译或更改本软件的任何部分。

3. 如果您发现本软件存在漏洞或错误，请及时联系我们，我们

会及时进行修复。

4. 您在使用本软件时，必须遵守国家法律法规和道德规范，禁

止进行任何违法活动。

二、用户隐私权保护条款

1. 我们非常重视用户的隐私权保护，我们承诺不会泄露任何用

户的个人信息。当您使用本软件时，我们会收集一些必要的信息，

如设备型号、网络类型等，仅用于优化软件使用体验，并保障软件

的正常运行。

2. 我们保留在必要时，通过用户的许可或规定的方式，向第三

方披露公开信息并保护用户隐私的权利。

3. 如因系统遭受破坏或故障导致用户维权成本增加、用户数据

信息遗失等情况，我们不承担任何责任。

三、知识产权声明

1. 本软件的所有知识产权归属于我们，未经我们许可，任何人不得以任何形式使用、复制、传播、修改本软件。

本软件中使用的所有图片、文字、图形等均受法律保护。

其他条款

本协议的解释、效力及纠纷解决均适用中国法律，并由双方协商解决。
如本协议中任何条款无效或不可执行，则不影响其他条款的效力。
如需对本协议进行任何修改，我们将在本软件中进行通知，并在更新版本后生效。
我们对本协议保留最终解释权。最后，我们感谢您的使用和信任，希望您在使用本软件时能遵守以上条款，享受愉快的软件使用体验。如果您有任何疑问或需要帮助，请及时联系我们。

何俊康

最后修订于2023年8月16日

IamATM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
在线计算月经周期使用html

1. 本软件的所有知识产权归属于我们，未经我们许可，任何人不得以任何形式使用、复制、传播、修改本软件。权益和明确双方的责任，我们制定了以下软件应用协议书，请您在。3. 如果您发现本软件存在漏洞或错误，请及时联系我们，我们。当您使用本软件时，我们会收集一些必要的信息，如设备型号、网络类型等，仅用于优化软件使用体验，并保障软件。2. 我们保留在必要时，通过用户的许可或规定的方式，向第三。2. 您不得复制、修改、反编译或更改本软件的任何部分。复制或使用默认同意用户条款。
复制链接

扫一扫