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

线上运行，可以直接打开：日期计算器（在线计算器）

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

HTML:

<div class=”calculator”><div><label>开始日期：</label><input id=”startDate1″ type=”date”><label>结束日期：</label><input id=”endDate1″ type=”date”><button onclick=”calculateDateDifference()”>计算天数差</button><div id=”daysDifference” class=”result”></div></div><div>&nbsp;</div><div><label>开始日期：</label><input id=”startDate2″ type=”date”><label>输入天数：</label><input id=”daysToAdd” type=”number” value=”1″><button onclick=”calculateEndDate()”>计算结束日期</button><div id=”endDateResult” class=”result”></div></div></div>

JS:

function calculateDateDifference() {
const startDate1 = new Date(document.getElementById(‘startDate1’).value);
const endDate1 = new Date(document.getElementById(‘endDate1’).value);
const timeDifference = endDate1 – startDate1;
const daysDifference = timeDifference / (1000 * 3600 * 24);
document.getElementById(‘daysDifference’).textContent = `两个日期之间的天数差为 ${daysDifference} 天。`;
}

function calculateEndDate() {
const startDate2 = new Date(document.getElementById(‘startDate2’).value);
const daysToAdd = parseInt(document.getElementById(‘daysToAdd’).value);
const resultDate = new Date(startDate2);
resultDate.setDate(resultDate.getDate() + daysToAdd);
document.getElementById(‘endDateResult’).textContent = `计算的结束日期是 ${resultDate.toISOString().split(‘T’)[0]}。`;
}

function calculateStartDate() {
const endDate2 = new Date(document.getElementById(‘endDate2’).value);
const daysToSubtract = parseInt(document.getElementById(‘daysToSubtract’).value);
const resultDate = new Date(endDate2);
resultDate.setDate(resultDate.getDate() – daysToSubtract);
document.getElementById(‘startDateResult’).textContent = `计算的开始日期是 ${resultDate.toISOString().split(‘T’)[0]}。`;
}

 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;
}