日期计算工具|不死鸟资源网

该死，忘改换号了。又得重新编辑。

本工具有 2 种计算方式：

起始日期 —— 结束日期 = 天数

起始日期 —— 天数 = 结束日期

<!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>

本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!