就是这个样的粗爆，手搓一个计算器：排卵计算器

线上运行，可以直接打开：排卵计算器(在线计算器)

       作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class=”container”><div class=”calculator”><label for=”last-period”>上次月经开始日期:</label> <input id=”last-period” type=”date”> <label for=”cycle-length”>月经周期（天数）:</label> <input id=”cycle-length” type=”number” placeholder=”输入您的月经周期天数”><button onclick=”calculateOvulation()”>计算</button><div class=”result align-center”><div class=”align-center”>计算结果</div><div id=”ovulation-period”></div><div id=”safe-period-before”></div><div id=”safe-period-after”></div><div id=”menstrual-period”></div><div id=”explanation”></div></div></div></div>

JS:

function calculateOvulation() {
const lastPeriodDate = new Date(document.getElementById(‘last-period’).value);
const cycleLength = parseInt(document.getElementById(‘cycle-length’).value);

if (!lastPeriodDate || isNaN(cycleLength)) {
document.getElementById(‘explanation’).textContent = “请输入有效的日期和周期长度。”;
return;
}

// 计算排卵日（下次月经前14天）
const ovulationDate = new Date(lastPeriodDate);
ovulationDate.setDate(lastPeriodDate.getDate() + cycleLength – 14);

// 计算安全期和月经期
const safePeriodBeforeStart = new Date(lastPeriodDate);
const safePeriodBeforeEnd = new Date(ovulationDate);
safePeriodBeforeEnd.setDate(ovulationDate.getDate() – 19);

const safePeriodAfterStart = new Date(ovulationDate);
safePeriodAfterStart.setDate(ovulationDate.getDate() + 1);

const safePeriodAfterEnd = new Date(lastPeriodDate);
safePeriodAfterEnd.setDate(lastPeriodDate.getDate() + cycleLength – 1);

const menstrualPeriodStart = new Date(lastPeriodDate);
const menstrualPeriodEnd = new Date(lastPeriodDate);
menstrualPeriodEnd.setDate(lastPeriodDate.getDate() + 4);

const options = { year: ‘numeric’, month: ‘long’, day: ‘numeric’, weekday: ‘long’ };

document.getElementById(‘ovulation-period’).textContent = `排卵期: ${ovulationDate.toLocaleDateString(‘zh-CN’, options)}。`;
document.getElementById(‘safe-period-before’).textContent = `排卵前安全期: ${safePeriodBeforeStart.toLocaleDateString(‘zh-CN’, options)} – ${safePeriodBeforeEnd.toLocaleDateString(‘zh-CN’, options)}。`;
document.getElementById(‘safe-period-after’).textContent = `排卵后安全期: ${safePeriodAfterStart.toLocaleDateString(‘zh-CN’, options)} – ${safePeriodAfterEnd.toLocaleDateString(‘zh-CN’, options)}。`;
document.getElementById(‘menstrual-period’).textContent = `月经期: ${menstrualPeriodStart.toLocaleDateString(‘zh-CN’, options)} – ${menstrualPeriodEnd.toLocaleDateString(‘zh-CN’, options)}。`;

document.getElementById(‘explanation’).textContent =
“排卵期一般在下次月经来潮前的14天左右，” +
“排卵前安全期是从上次月经结束到排卵日前5天，” +
“排卵后安全期是从排卵日到下次月经开始。”;
}

 CSS:

.calculator {
width: 100%;
background-color: #333;
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}

input, select {
width: 100%!important;
padding: 10px!important;
margin-bottom: 20px;
color: #000000;
border-radius: 5px;
border: 1px solid #555;
font-size: 16px!important;
background-color: #ffffff!important;
}

button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: orange;
}

.result {
font-size: 18px;
margin-top: 20px;
text-align: center;
}

option {
background-color: #ffffff;
}

p {
font-size: 18px;
margin-top: 5px!important;
}