JavaScript计算两个用户输入日期天数差并乘输入金额的方法及代码排错

存在的问题 #

• 语法混淆：if (isset($_POST['calcDiff']))是PHP语法，不能直接写在JS代码块中，会直接触发JS语法错误，且你用前端点击事件实现计算，完全不需要这段PHP判断包裹JS逻辑。
• 元素选择失败：HTML中每日罚款金额的输入框只有name="amount"属性，没有添加id="amount"，JS代码$('#amount')无法匹配到对应元素，拿不到输入值。
• 重复调用取值方法：你已经通过var amount = $('#amount').val()拿到了输入的金额值（字符串类型），后续计算时写的amount.val()属于错误调用，字符串不存在val()方法。
• 表单提交冲突：button标签默认是submit类型，点击后会触发表单提交刷新页面，导致计算逻辑还没执行就刷新了。
• 可选依赖问题：如果要使用datetimepicker插件，你没有引入对应的插件CSS和JS资源，初始化datetimepicker的代码会报错；如果用原生type="date"的输入框，可以直接删掉datetimepicker的初始化代码。
• 精度问题：日期差值计算最好对结果取整，避免时区、夏令时等问题导致出现小数天数。

修正后代码 #

JS代码 #

// 如果用原生date输入可以删掉下面两段datetimepicker初始化代码，要用到插件的话自行引入对应资源
$("#bdate").datetimepicker({
  timepicker: false,
  format: 'y-m-d'
});
$("#rdate").datetimepicker({
  timepicker: false,
  format: 'y-m-d'
});

function calcDiff() {
  var bdate = new Date($("#bdate").val());
  var rdate = new Date($("#rdate").val());
  // 转成数字类型避免计算异常
  var amount = Number($('#amount').val());
  // 输入合法性校验
  if(isNaN(bdate.getTime()) || isNaN(rdate.getTime()) || isNaN(amount) || amount < 0) {
    alert('请输入合法的日期和罚款金额');
    return false;
  }
  var timeDifference = rdate.getTime() - bdate.getTime();
  if(timeDifference < 0) {
    alert('归还日期不能早于借阅日期');
    return false;
  }
  var daysDiff = Math.round(timeDifference / (1000 * 3600 * 24));
  var fine = daysDiff * amount;
  alert('总罚款金额为：' + fine);
  // 如需显示在页面中可替换为下面的代码
  // document.getElementById('display').innerText = '总罚款金额为：' + fine;
  return false;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 要用到datetimepicker的话请在这里引入对应的CSS和JS文件 -->
<form name="finecalc" action="" method="post">
  <p>
    借阅日期
    <input type="date" name="bdate" id="bdate" required="required" value="<?php echo $bdate; ?>" />
  </p>
  <p>
    归还日期
    <input type="date" name="rdate" id="rdate" required="required" value="<?php echo $rdate; ?>" />
  </p>
  <p>
    每日罚款金额
    <!-- 新增id属性，修改输入类型为number限制输入格式 -->
    <input type="number" min="0" step="0.01" name="amount" id="amount" size="10" required>
  </p>
  <!-- 指定button类型为button避免自动提交表单 -->
  <button type="button" onclick="return calcDiff()">计算罚款</button>
  <p id="display"></p>
</form>

内容的提问来源于stack exchange，提问作者Imytnotbedumb