文章摘要
This article introduces a date calculation tool with two main functions. The first allows users to calculate the difference in days between two selected dates. The second lets users determine the future date by adding a specified number of days to a given start date. The interface is built using Bootstrap and includes interactive HTML elements for date and number inputs. Functions are implemented via JavaScript and jQuery to provide instant calculation results. The tool is designed for simplicity and precision in date-related calculations.
— 文章部分摘要由DeepSeek深度思考而成
该死，忘改换号了。又得重新编辑。
本工具有 2 种计算方式：
起始日期 —— 结束日期 = 天数
起始日期 —— 天数 = 结束日期
![图片[1]|日期计算工具|不死鸟资源网](https://busi.net/wp-content/uploads/2025/06/20250613074417749-image-1024x744.png)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>日期计算工具</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>日期计算工具</h2>
<div class="row">
<div class="col-md-6">
<h4>计算两个日期之间的差值</h4>
<div class="form-group">
<label for="date1">起始日期</label>
<input type="date" class="form-control" id="date1">
</div>
<div class="form-group"><label for="date2">结束日期</label>
<input type="date" class="form-control" id="date2">
</div>
<button id="calculateDiff" class="btn btn-primary">计算差值</button><p id="diffResult"></p></div>
<div class="col-md-6"><h4>计算几天后的日期</h4> <div class="form-group"><label for="startDate">起始日期</label><input type="date" class="form-control" id="startDate"> </div>
<div class="form-group"><label for="daysToAdd">天数</label><input type="number" class="form-control" id="daysToAdd"> </div>
<button id="calculateFutureDate" class="btn btn-primary">计算日期</button><p id="futureDateResult"></p></div></div></div>
<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('#calculateDiff').click(function() {
var date1 = new Date($('#date1').val());
var date2 = new Date($('#date2').val());
var diffTime = Math.abs(date2 - date1);
var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); $('#diffResult').text('两个日期之间的差值为 ' + diffDays + ' 天'); });
$('#calculateFutureDate').click(function() {
var startDate = new Date($('#startDate').val());
var daysToAdd = parseInt($('#daysToAdd').val());
var futureDate = new Date(startDate);
futureDate.setDate(futureDate.getDate() + daysToAdd); $('#futureDateResult').text('几天后的日期为 ' + futureDate.toISOString().split('T')[0]); }); });
</script>
</body>
</html>本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧cutwork@qq.com进行删除处理!
THE END
