Question

我有这个脚本

<input type="hidden" id="from_t" value="<?= date('H:i',strtotime($row['from_t']))   ?>">

<input style="width: 50px" type="number" id="h" min="0"  class="trvael">

                    $(document).on('change','.trvael',function () {
                        var form_t = $('#from_t').val(); // 10:00
                        var total_time = 5;
                        var travel_h = $('#h').val(); //user dynamic input

var sum =  form_t - (parseFloat(total_time) + parseFloat(travel_h)) ;


                    })

我该如何掌握所有价值观并获得新的时间。例如：

10:00-5-2.5 = 02:30

谢谢！

Answer 1

您可以尝试这样的事情。

var from_t = '10:00'
var value1 = '5';
var value2 = '2.5';

var date = new Date();
var splits = from_t.split(':');
date.setHours(splits[0]);
date.setMinutes(splits[1]);
date.setMinutes(date.getMinutes() - ((+value1) + (+value2)) * 60);

console.log(date.getHours() + ':' + date.getMinutes());

Answer 2

我很确定您希望使用类似DateTime的构造函数来处理这项工作。我已经创建了这个，所以：

//<![CDATA[
/* js/external.js */
function DateTime(dateElement, timeElement, dateInstance){
  var t = this;
  this.dateElement = dateElement; this.timeElement = timeElement;
  this.date = dateInstance instanceof Date ? dateInstance : new Date;
  this.dateValue = function(dateInstance){
    if(dateInstance instanceof Date)this.date = dateInstance;
    var dt = this.date;
    return dt.getFullYear()+'-'+(dt.getMonth()+1).toString().replace(/^(\d)$/, '0$1')+'-'+dt.getDate().toString().replace(/^(\d)$/, '0$1');
  }
  this.showDate = function(dateInstance){
    this.dateElement.value = this.dateValue(dateInstance);
    return this;
  }
  this.timeValue = function(dateInstance){
    if(dateInstance instanceof Date)this.date = dateInstance;
    var dt = this.date;
    return dt.getHours().toString().replace(/^(\d)$/, '0$1')+':'+dt.getMinutes().toString().replace(/^(\d)$/, '0$1');
  }
  this.showTime = function(dateInstance){
    this.timeElement.value = this.timeValue(dateInstance);
    return this;
  }
  this.showDate().showTime();
  this.dateChange = function(changeFunc, noTimeFunc){
    this.dateElement.oninput = function(){
      var v = this.value, s = t.timeElement.value;
      if(v === '')v = this.value = t.dateValue(noTimeFunc(t));
      if(s === '')s = t.timeValue(this.date);
      t.date = new Date(v+' '+s); changeFunc(t.date, t);
    }
    return this;
  }
  this.timeChange = function(changeFunc, noTimeFunc){
    this.timeElement.oninput = function(){
      var v = this.value, s = t.dateElement.value;
      if(v === '')v = this.value = t.timeValue(noTimeFunc(t));
      if(s === '')s = t.dateValue(this.date);
      t.date = new Date(s+' '+v); changeFunc(t.date, t);
    }
    return this;
  }
}
$(function(){ // jQuery load
var dt = new DateTime($('#date')[0], $('#time')[0]);
function consoleIt(dateInstance){
  console.log('display of dt.date --> '+dateInstance.toString());
  console.log('dt.date for server --> '+dateInstance.getTime());
}
consoleIt(dt.date);
dt.dateChange(function(r){
  consoleIt(r);
}).timeChange(function(a){
  consoleIt(a);
});
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <input id='date' type='date' value=''/><input id='time' type='time' value='' />
  </div>
</body>
</html>

当然，您可以使用jQuery DatePicker，但这并不会占用时间。

如果您向Date添加另一个DateTime实例参数，则可以设置默认值。

计算时间和动态输入

2 个答案: