Question

我有两个'时间'输入作为开始和结束时间。

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

<input type='time' value="09:00" id="MondayStart" name='MondayStart' class='form-control'>
<input type='time' value="17:00" name='MondayEnd' id="MondayEnd" class='form-control'>
<input type="text" name="total">

我已尝试过关注此脚本（http://jsbin.com/emoziw/1/edit?html,js,output）但似乎无法将其更改为时间

Answer 1

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

$(".form-control").on('change', ()=>{
  var $this = $(this);
  var sum;
  sum = /*do the sum calculation here*/;
  $('input[name="total"]').eq(0).val(sum);
  //if you put an id to the total then you can just use $(id here).val(sum)
});

当在具有change类的任何元素上触发form-control事件时，这将自动更新总和。

PS：

我建议在总和的持有人身上加上一个默认值（当然是默认值的极值）

修改

我想帮你计算时间，所以我做了函数：

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 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");
}

编辑2：

如果你想要你可以传递给onchange EH一个函数指针（因此你也可以调用函数而不必触发事件）：

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(()=>{
  updateSum();
  $(".form-control").on('change', updateSum);
});

编辑3：

()=>{/*...*/}只是ES6声明匿名函数的方式，如果您对它更加满意，可以用function(){/*...*/}替换它们。

编辑4又名 RECAP ：

如果您在此回答后有点迷失，请回顾一下您需要添加到网站的功能：

@@基于Regex的输入处理@@

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);
});

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

1 个答案: