创建2.html,编写程序,实现计算当天和指定日期之间的天数差,效果如下图所示: 初始界面: 当未选择日期点击“查看天数差”按钮时: 当与输入日期相差不到一天时: 当输入相差天数大于1天时使用input span :alert
时间: 2024-02-28 13:52:33 浏览: 167
好的,我可以帮你编写这个程序。首先,我们需要在 HTML 中创建一个表单,让用户输入指定的日期。然后,当用户点击“查看天数差”按钮时,我们会调用 JavaScript 函数来计算当天和指定日期之间的天数差,并在页面上显示结果。
以下是完整的 HTML 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算天数差</title>
</head>
<body>
<h1>计算天数差</h1>
<form>
<label for="date">请输入指定日期:</label>
<input type="date" id="date">
<button type="button" onclick="calculate()">查看天数差</button>
</form>
<div id="result"></div>
<script>
function calculate() {
var dateInput = document.getElementById('date');
var selectedDate = new Date(dateInput.value);
if (isNaN(selectedDate.getTime())) {
alert('请输入有效的日期');
return;
}
var today = new Date();
var timeDiff = Math.abs(selectedDate.getTime() - today.getTime());
var dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
var resultDiv = document.getElementById('result');
if (dayDiff === 0) {
resultDiv.innerHTML = '今天是指定日期!';
} else if (dayDiff === 1) {
resultDiv.innerHTML = '与指定日期相差不到一天!';
} else {
var message = '与指定日期相差 ' + dayDiff + ' 天。';
var inputSpan = document.createElement('span');
inputSpan.innerHTML = '(输入相差天数大于1天)';
resultDiv.innerHTML = message;
resultDiv.appendChild(inputSpan);
}
}
</script>
</body>
</html>
```
在这个程序中,我们使用了 `<input type="date">` 元素来让用户选择日期。当用户点击“查看天数差”按钮时,我们会调用 `calculate()` 函数来计算天数差。该函数首先获取用户输入的日期,然后检查它是否有效。如果日期无效,则弹出警告框并退出函数。如果日期有效,则计算当天和指定日期之间的天数差,并根据差值不同,显示不同的结果。
如果差值为 0,则说明今天是指定日期,因此我们会在页面上显示“今天是指定日期!”的消息。
如果差值为 1,则说明与指定日期相差不到一天,因此我们会在页面上显示“与指定日期相差不到一天!”的消息。
如果差值大于 1,则说明与指定日期相差超过一天,因此我们会在页面上显示“与指定日期相差 X 天。”的消息,并且在末尾添加一个输入框,让用户输入相差的天数。
阅读全文