如何计算 PHP 和 JavaScript 的小时数差异？ [关闭]答案

【问题标题】：How to calculate difference in hours in PHP and JavaScript? [closed]如何计算 PHP 和 JavaScript 的小时数差异？ [关闭]
【发布时间】：2016-05-07 15:04:30
【问题描述】：

正如您在下面的代码中看到的，我有两个字段用于时间；

Btime
Etime

btime 是用户输入的字段他们离开办公室的时间，etime 是他们返回的时间。

我目前有一个总计字段，员工可以在其中手动输入差额。

例如，如果btime 是14:00，etime 是16:00，他们将在代表 2 小时的总字段中手动输入 2（14:00 和 16:00 之间的差异） .

我有没有办法编辑下面的代码，所以当他们从 btime 下拉菜单中选择 14:00 和从 etime 下拉菜单中选择 16:00 时，差异将自动填充到总字段中?

在此示例中，2 将自动填充到总计字段中。

MAIN PAGE

<html
<head>
<title>Non-Traditional Work Hours</title>
</head>
</html>
<body style="background-image:url(FadedBG.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center;">
<b> ***Enter your work information below if your office is 1*** </b>

<script type="text/javascript">
function doValidation(){


    if(document.forms[0].weekend.value==""){
    alert("You forgot to choose if this was a weekend or not!");
    document.forms[0].weekend.focus();
    return false;
  }


    if(document.forms[0].officer.value==""){
    alert("You forgot to choose your name!");
    document.forms[0].officer.focus();
    return false;
  }


    if(document.forms[0].datepicker.value==""){
    alert("You forgot to choose a date that you worked!");
    document.forms[0].datepicker.focus();
    return false;
  }

    if(document.forms[0].etime.value==""){
    alert("You forgot to choose an ending time!");
    document.forms[0].etime.focus();
    return false;
  }

     if(document.forms[0].btime.value==""){
    alert("You forgot to choose a begining time!");
    document.forms[0].btime.focus();
    return false;
  }

     if(document.forms[0].total.value==""){
    alert("You forgot to enter a total!");
    document.forms[0].total.focus();
    return false;
  }

 return true;
}
</script>


<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
date_default_timezone_set('America/New_York');



if( isset($_POST) && !empty($_POST) )
{
     $host  = "blabla";
     $user  = "blabla";
     $pw    = "blabla";
     $db    = "nthours";

     $conn = mysql_connect( $host, $user, $pw )
     or die( "Error! Unable to connect to database server: <br/>" . mysql_error() );

     $rs = mysql_select_db( $db, $conn )
     or die( "Error! Unable to connect to database:  <br/>" . mysql_error() );

    foreach($_POST as $key=>$value)
    {
        ${$key}=mysql_real_escape_string($value);
    }

     $strSQL = "INSERT INTO work
        (officer, weekend, datepicker, notes, btime, etime, total, office)
        VALUES
        ( '" . $officer . "' , '".$weekend."' , '".$datepicker."' , '".$notes."' , '".$btime."' , '".$etime."' , '".$total."' , '".$office."' )";

     if (!mysql_query( $strSQL, $conn )){
        echo( "Unable to save data to database: <br/>" . mysql_error() . "<br/>" . $strSQL . "</span><br/>" );
     }
     else{
        header( "Location: http://tnep-g-train/nthours/home.php" );
        exit;







     }
}
?>

<html>

<head>
<title> PODDS </title>

<script type="text/javascript">
function doValidation(){


    if(document.forms[0].officer.value==""){
    alert("Choose your name!");
    document.forms[0].officer.focus();
    return false;
  }

Data System

 return true;
}
</script>

</head>
</html>
<body>
<body style="background-image:url(FadedBG.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center;">
<form method="post" action="1.php" onsubmit="return confirmation(this)">

<br>

</select>
</span>

<b>Choose Your Name:</b> <br /> 
<select name="officer">
<option value=""></option>
<option value="John Doe">John Doe</option>
<option value="Jane Doe">John Doe</option>

</select>





<input type="hidden" name="office" size="10" value="1"/>




<br>
<br>
<b>Weekend?</b> <br /> 
<select name="weekend">
<option value=""></option>
<option value="NO">NO</option>
<option value="YES">YES</option>
</select>

<br>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
</head>
<body>

<p><b>Date Worked:</b> <br> <input type="date" name="datepicker" id="datepicker" size="15" />
<br>
<br>
<b>Start Time</b> <br /> 
<select name="btime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option value="06:00:00">6:00am</option>
<option value="06:30:00">6:30am</option>
<option value="07:00:00">7:00am</option>
<option value="07:30:00">7:30am</option>
<option value="08:00:00">8:00am</option>
<option value="08:30:00">8:30am</option>
<option value="09:00:00">9:00am</option>
<option value="09:30:00">9:30am</option>
<option value="10:00:00">10:00am</option>
<option value="10:30:00">10:30am</option>
<option value="11:00:00">11:00am</option>
<option value="11:30:00">11:30am</option>
<option value="12:00:00">12:00pm</option>
<option value="12:30:00">12:30pm</option>
<option value="13:00:00">1:00pm</option>
<option value="13:30:00">1:30pm</option>
<option value="14:00:00">2:00pm</option>
<option value="14:30:00">2:30pm</option>
<option value="15:00:00">3:00pm</option>
<option value="15:30:00">3:30pm</option>
<option value="16:00:00">4:00pm</option>
<option value="16:30:00">4:30pm</option>
</select>



<br>

<b>End Time</b> <br /> 
<select name="etime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option value="06:00:00">6:00am</option>
<option value="06:30:00">6:30am</option>
<option value="07:00:00">7:00am</option>
<option value="07:30:00">7:30am</option>
<option value="08:00:00">8:00am</option>
<option value="08:30:00">8:30am</option>
<option value="09:00:00">9:00am</option>
<option value="09:30:00">9:30am</option>
<option value="10:00:00">10:00am</option>
<option value="10:30:00">10:30am</option>
<option value="11:00:00">11:00am</option>
<option value="11:30:00">11:30am</option>
<option value="12:00:00">12:00pm</option>
<option value="12:30:00">12:30pm</option>
<option value="13:00:00">1:00pm</option>
<option value="13:30:00">1:30pm</option>
<option value="14:00:00">2:00pm</option>
<option value="14:30:00">2:30pm</option>
<option value="15:00:00">3:00pm</option>
<option value="15:30:00">3:30pm</option>
<option value="16:00:00">4:00pm</option>
<option value="16:30:00">4:30pm</option>
</select>

<br>
<br>

<b>Total: <i>(Enter Numbers Only; For Example, 2 Hours & 30 Minutes should be entered as 2.5)</i>
</b> <br />
<input type="text" value="" name="total" size="5"  />


<br>
<br>


<b>Notes:</b> <br />
<input type="text" value="" name="notes" size="100" />

</p>
</body>
</html>


<input type="submit" value="SUBMIT" onClick="return doValidation()"/>

<?php echo '</form>';?>

</form>
</body>
</html>

【问题讨论】：

Your script is at risk for SQL Injection Attacks.
请stop using mysql_* functions。 These extensions 已在 PHP 7 中删除。了解 PDO 和 MySQLi 的 prepared 语句并考虑使用 PDO，it's really pretty easy。
你试过计算吗？如果是这样，您能否向我们展示该代码并告诉我们为什么它不起作用？它将是一个执行计算的 JavaScript 函数。

标签： javascript php jquery mysql

【解决方案1】：

这里有几个警告，但这里是raw example：

首先必须创建一个函数，它将您的值转换为原始秒数：

function convertTimestamp(ts) {
    var a = ts.split(':'); // split your value at the colons
    var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); // calculate each pair
    return seconds;
}

其次，使用该函数与收集的值一起进行最终计算：

$(document).on('change', '[name="etime"]', function(){
    var begin = convertTimestamp($('[name="btime"]').val());
    var end = convertTimestamp($('[name="etime"]').val());
    var totalSeconds = end - begin; 
    var totalHours = (totalSeconds/60) / 60; // convert back to hours
    $('#result').html('Total Hours: ' + totalHours);

});

注意事项如下：

计算受到限制。您可能会遇到按错误顺序选择的人，从而导致负数。
这种情况下的计算仅在结束时间更改时触发。如果发生更改，您将必须添加更多代码才能进行计算，或者您必须确保用户按顺序进行更改。
整个事情假设没有工人超过午夜，因此代码仅适用于日期在00:00:00 之后开始和结束的情况

我知道答案只与 JavaScript 有关，但我想确保您理解 your script is at risk for SQL Injection Attacks.

另外你应该stop using mysql_* functions。 These extensions 已在 PHP 7 中删除。了解PDO 和 MySQLi 的 prepared 语句并考虑使用 PDO，it's really pretty easy。

【讨论】：

【解决方案2】：

Php 确实有一个 datetime diff 函数：

$val1 = '2014-03-18 10:34';
$val2 = '2014-03-18 10:54';

$datetime1 = new DateTime($val1);
$datetime2 = new DateTime($val2);

$difference = $datetime1->diff($datetime2);
echo $difference->format("%H:%I");

我认为你可以在 js 中使用类似的东西，你可以修改它以适应你的输入：

var btime = $('#btime').val();
var etime = $('#etime').val();
var diff = new Date("1979-01-01 "+btime) - new Date("1970-01-01 "+etime);
diff_time = diff/(60*60*1000);  
alert('diff ='+diff_time);

【讨论】：

查看 OP 用于开始和结束时间的值。而且DateTime()不是JS函数
这不需要刷新或类似的东西（也许是ajax）？
我已经更新了我的答案——我想我可能找到了你的答案