Javascript 制作添加日期的日期计算器_Javascript_Html

Javascript 制作添加日期的日期计算器

javascript html

Javascript 制作添加日期的日期计算器,javascript,html,Javascript,Html,我有：日期0=开始日期日期1=结果日期（在添加天数之后）NDays=要添加的天数我需要（js）使：Date0+NDays=Date1帮助我，我有0.1代码知识 <!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> <div id="reserve_form"&

我有：日期0=开始日期日期1=结果日期（在添加天数之后）NDays=要添加的天数

我需要（js）使：Date0+NDays=Date1帮助我，我有0.1代码知识

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Date 0 :</label><input type="text date" value="10/15/1555" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>

    <div id="dropoff_date"><p><label class="form">Date 1 :</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>

    <div id="numdays"><label class="form"> NDays :</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>

    </div>
</body>
</html>


日期0:查看。通过在
标记之前添加以下脚本标记来包括力矩库
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

Benjamin推荐的Moment，这是一个非常棒的处理日期和时间的库。然而，DOM操作不包括在Moment中。您需要查询DOM、侦听事件并更新DOM以响应它们
如果我们解构手头的任务，我们需要

呈现三个字段，最简单的情况是三个输入
在表示开始日期和要添加的额外数据的输入中，我们需要确定将侦听“更改”事件并拾取这两个字段的值以计算结束日期
对于应该显示结束日期的第三个输入，我们需要经常更改其值，因为前两个输入发生了更改，并且实际上可以计算结束日期

我们可以将HTML部分仅看作三个输入：
<input id="start" type="date">
<input id="inc" type="number">
<input id="result" type="date">

因此，该方法返回日期的“day”部分。如果日期为“2000年10月10日”，则此方法将返回10。如果是“1990年1月17日”，则返回值为17
然后，我们创建一个日期对象的新实例，endDate
，它与startDate
相同。在这种情况下，这并不一定重要，但通常建议以这种方式处理日期，因为Javascript中的日期是可变的。调用方法，特别是那些被称为“set something”的方法，会改变实例的值，通常您可能不希望这样
因此，是的，endDate
。我们做的最后一件事就是去拜访它。假设开始日期为2019年1月17日，您希望再增加50天。如果我们把50加上17，截止日期将是2019年1月67日，对吗？这是Javascript为我们做的一件事：一旦日期被更新（对其调用“set something”），它就会以一种有意义的方式重新计算。所以改为3月8日
我真的希望这个答案能帮助您了解其中的内容，并祝您学习Javascript好运。所以，是的，检查一下，祝你好运
 JavaScript详细信息将在演示中进行注释

/*
引用表单并将更改事件绑定到该表单。它会打电话的
更改事件触发时的函数calc（）。。。
*/
document.forms[0].onchange=calc；
函数计算（e）{
//收集此表单的所有引用
var ui=this.elements；
//以数字形式从两个输入中获取值
var begin=ui.init.valueAsNumber；
var stop=ui.term.valueAsNumber；
//将它们转换为毫秒，然后从停止中减去开始
var diff=（新日期（停止））-（新日期（开始））；
/*
输出值为。。。
如果差异为NaN，则输出为0。。。
否则，如果差异小于0，则输出为0。。。
否则将差值除以8.64x10⁷ （每天总毫秒）
*/
ui.days.value=isNaN（差异）？0:diff<0？0:diff/（1000*60*60*24）；
}

日期0:


日期1:


天数：0
谢谢@rml，你真的帮了大忙，在你详细解释之后，我能够在你提供的代码基础上构建upp，并制作了一个很好的应用程序来帮助我的游戏社区
window.addEventListener('DOMContentLoaded', () => {
  const start = document.getElementById('start');
  const inc = document.getElementById('inc');
  const result = document.getElementById('result');

  const updateEndDate = () => {
    const startDate = new Date(start.value);
    const addDays = Number(inc.value);

    if (!isNaN(startDate) && !isNaN(addDays)) {
      const days = startDate.getDate(); // <- returns the day component of the date (as opposed to weekday)
      const endDate = new Date(startDate);

      endDate.setDate(days + addDays);
      result.value = endDate;
    }
  };

  start.addEventListener('change', updateEndDate);
  inc.addEventListener('change', updateEndDate);
});

const days = startDate.getDate();
const endDate = new Date(startDate);

endDate.setDate(days + addDays);