Html 添加2个输入值并显示总计

我有两个“时间”输入用于开始和结束时间

当两个输入都完成时，我希望“总计”字段自动显示开始和结束之间的总计（例如8小时）

---

我已经尝试过按照这个脚本（）进行操作，但似乎无法将其更改为time

您有一个默认值，所以这很好。 您需要这样做（使用jQuery）：

这将在具有

表单控件

类的任何元素上触发

更改

事件时自动更新总和

附言：

我建议对金额持有人设定一个默认值（当然是默认值的总和）

编辑

我想帮助您计算时间，所以我制作了以下函数：

function doCalc($jq){//pass in the jqSelection that gets the two input
  var $beg = $jq.eq(0);//first element with this class
  var $end = $jq.eq(1);//second element with this class

  var beg_t = {
    h: getH($beg),
    m: getM($beg)
  }

  var end_t = {
    h: getH($end),
    m: getM($end)
  }

  var elapsed = {
    h: end_t.h - beg_t.h,
    m: end_t.m - beg_t.m
  }

  return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}

/

编辑2：

如果需要，可以向onchange EH传递函数指针（因此也可以在不触发事件的情况下调用函数）：

因此，您可以：

$(document).ready(()=>{
  updateSum();
  $(".form-control").on('change', updateSum);
});

编辑3：

（）=>{/*…*/}

只是声明匿名函数的ES6方法，如果您对它比较熟悉，可以用

function（）{/*…*/}

替换它们

编辑4 aka重述：

如果您在回答此问题后有点不知所措，以下是您需要添加到网站的功能概述：

基于正则表达式的输入处理。@@

function getH($t){
  var str = $t.val();
  return str.replace(/(\d{2}):(\d{2})/,"$1");
}

function getM($t){
  var str = $t.val();
  return str.replace(/(\d{2}:(\d{2})/,"$2");
}

function doCalc($jq){//pass in the jqSelection that gets the two input
  var $beg = $jq.eq(0);//first element with this class
  var $end = $jq.eq(1);//second element with this class

  var beg_t = {
    h: getH($beg),
    m: getM($beg)
  }

  var end_t = {
    h: getH($end),
    m: getM($end)
  }

  var elapsed = {
    h: end_t.h - beg_t.h,
    m: end_t.m - beg_t.m
  }

  return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}

function updateSum(){
  var $this = $(".form-control");
  var sum;
  sum = doCalc($this);
  $('input[name="total"]').eq(0).val(sum);
  //if you put an id to the total then you can just use $(id here).val(sum)
}

$(document).ready(function(){
  updateSum();
  $(".form-control").on('change', updateSum);
});

@@Calculation@

function getH($t){
  var str = $t.val();
  return str.replace(/(\d{2}):(\d{2})/,"$1");
}

function getM($t){
  var str = $t.val();
  return str.replace(/(\d{2}:(\d{2})/,"$2");
}

function doCalc($jq){//pass in the jqSelection that gets the two input
  var $beg = $jq.eq(0);//first element with this class
  var $end = $jq.eq(1);//second element with this class

  var beg_t = {
    h: getH($beg),
    m: getM($beg)
  }

  var end_t = {
    h: getH($end),
    m: getM($end)
  }

  var elapsed = {
    h: end_t.h - beg_t.h,
    m: end_t.m - beg_t.m
  }

  return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}

function updateSum(){
  var $this = $(".form-control");
  var sum;
  sum = doCalc($this);
  $('input[name="total"]').eq(0).val(sum);
  //if you put an id to the total then you can just use $(id here).val(sum)
}

$(document).ready(function(){
  updateSum();
  $(".form-control").on('change', updateSum);
});

@@Update函数@

function getH($t){
  var str = $t.val();
  return str.replace(/(\d{2}):(\d{2})/,"$1");
}

function getM($t){
  var str = $t.val();
  return str.replace(/(\d{2}:(\d{2})/,"$2");
}

function doCalc($jq){//pass in the jqSelection that gets the two input
  var $beg = $jq.eq(0);//first element with this class
  var $end = $jq.eq(1);//second element with this class

  var beg_t = {
    h: getH($beg),
    m: getM($beg)
  }

  var end_t = {
    h: getH($end),
    m: getM($end)
  }

  var elapsed = {
    h: end_t.h - beg_t.h,
    m: end_t.m - beg_t.m
  }

  return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}

function updateSum(){
  var $this = $(".form-control");
  var sum;
  sum = doCalc($this);
  $('input[name="total"]').eq(0).val(sum);
  //if you put an id to the total then you can just use $(id here).val(sum)
}

$(document).ready(function(){
  updateSum();
  $(".form-control").on('change', updateSum);
});

@@Event Handling and Call@

function getH($t){
  var str = $t.val();
  return str.replace(/(\d{2}):(\d{2})/,"$1");
}

function getM($t){
  var str = $t.val();
  return str.replace(/(\d{2}:(\d{2})/,"$2");
}

function doCalc($jq){//pass in the jqSelection that gets the two input
  var $beg = $jq.eq(0);//first element with this class
  var $end = $jq.eq(1);//second element with this class

  var beg_t = {
    h: getH($beg),
    m: getM($beg)
  }

  var end_t = {
    h: getH($end),
    m: getM($end)
  }

  var elapsed = {
    h: end_t.h - beg_t.h,
    m: end_t.m - beg_t.m
  }

  return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}

function updateSum(){
  var $this = $(".form-control");
  var sum;
  sum = doCalc($this);
  $('input[name="total"]').eq(0).val(sum);
  //if you put an id to the total then you can just use $(id here).val(sum)
}

$(document).ready(function(){
  updateSum();
  $(".form-control").on('change', updateSum);
});

---

删除了Java标记-抱歉，尽管Java将用于实现目标

“这可以做到吗？”

-当然，您只需编写代码即可。你试过什么吗？您被困在哪里？请参阅更新的问题@DavidShane，您在这里不是新手，因此您可能已经知道，所有代码都必须在您的问题中以代码格式的文本发布，而不是在链接中发布。提前感谢您尽快解决此问题。@Shane：“我似乎无法及时更改它”并不是我们能够回答的问题。您使用的是什么特定代码，它以什么特定方式失败？