前臺頁面代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>加班預報</title>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/weui.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/jquery-weui.min.css') }}">
<script type="text/javascript" src="{{ URL::asset('/js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-weui.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/bootstrap.min.js') }}"></script>
</head>
<style type="text/css">
th{
width: 50%;
}
</style>
<body>
<div class="container">
<div class="page-header">
<img src="{{URL::asset('/img/baiclogo.png')}}" height="50px" width="50px" align="left"/>
<h1>加班預報</h1>
</div>
{{--<form action="{{ url('submit') }}" method="post" id="lvliForm">--}}
<div class="form-group">
<label for="description">加班類別</label>
<select id="jie_status" name="overworkType" class="form-control">
<option value="平時">平時</option>
<option value="週末">週末</option>
<option value="節假">節假</option>
</select>
</div>
<div class="form-group">
<label for="zichanNum">開始時間</label>
<input type="text" class="form-control" id="history_end_date" name="overworkStartTime">
<script>
$("#history_end_date").datetimePicker();
</script>
</div>
<div class="form-group">
<label for="zichanNum">結束時間</label>
<input type="text" class="form-control" id="history_start_date" name="overworkEndTime">
<script>
$("#history_start_date").datetimePicker();
</script>
</div>
<div class="form-group">
<label for="user">加班事由</label>
<textarea rows="3" class="form-control" id="history_start_licheng" name="overworkContent" placeholder="請限制在100字以內！"></textarea>
</div>
<div class="alert alert-danger" role="alert">
<p>加班必看：</p>
<p>1.加班預報可提前一週申請</p>
<p>2.平時加班，18:30以後爲準</p>
<p>3.當天加班申請，最晚第二天中午12:00之前提交</p>
</div>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<!-- 可能還會有別的數據添加進來 -->
<button type="submit" class="weui_btn weui_btn_primary" id="sub">提交</button>
{{--</form>--}}
</div>
<div style="display:none;" id="hide">
<table border="1px;" style="border: lightslategray solid 1px; width: 100%; text-align: center;">
<h3 style="text-align: center;">加班申請表單確認</h3>
<tr><th>加班類別</th><td id="overworkType"></td></tr>
<tr><th>加班開始時間</th><td id="startTime"></td></tr>
<tr><th>加班結束時間</th><td id="endTime"></td></tr>
<tr><th>加班時長（/小時）</th><td id="overworkTotalTime"></td></tr>
<tr><th colspan="2">加班事由</th></tr>
<tr><td id="overworkContent" colspan="2"></td></tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-block" id="confirm">確認提交</button>
<button class="btn btn-success btn-block" id="cancel" style="background-color: crimson;">取消提交</button>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" src="{{ URL::asset('/js/jquery-3.0.0.min.js') }}"></script>
<script type="text/javascript">
$('#sub').click(function () {
//判斷用戶填寫表單的開始·結束時間是否爲空
if ($('#history_start_date').val() == "" || $('#history_end_date').val() == ""){
alert('填寫有誤！');
}else {
//獲取前臺加班時間，進行後臺運算，得出加班時長
$.post(
'test',
{
_token:"{{csrf_token()}}",
overworkStartTime:$("#history_end_date").val(),
overworkEndTime:$("#history_start_date").val(),
},
//接收後臺數據
function (data) {
$("#overworkTotalTime").html(data); //將結果顯示到加班時長裏面
}
)
$("#overworkType").html($('#jie_status').val()); //將結果顯示到加班類別
$("#startTime").html($('#history_end_date').val()); //將結果顯示到開始時間
$("#endTime").html($('#history_start_date').val()); //將結果顯示到結束時間
$("#overworkContent").html($('#history_start_licheng').val()); //將結果顯示到加班事由
$(".container").hide(); //隱藏第一個div
$('#hide').show(); //顯示第二個div
}
});
$('#cancel').click(function () {
$("#hide").hide(); //隱藏第二個div
$('.container').show(); //顯示第一個div
});
$('#confirm').click(function () {
$.post(
'submit',
{
_token:"{{csrf_token()}}",
overworkType:$("#overworkType").html(),
overworkStartTime:$("#startTime").html(),
overworkEndTime:$("#endTime").html(),
overworkTotalTime:$("#overworkTotalTime").html(),
overworkContent:$("#overworkContent").html()
},
function (data) {
if (data == "ok"){
alert('提交成功！');
location.reload(); //js 刷新當前頁面
}else {
alert('提交信息有誤，請重新提交！');
location.reload(); //js 刷新當前頁面
}
}
)
});
</script>
</html>
控制器代碼：
/**
*獲取前臺加班時間，進行後臺運算，得出加班時長
*/
public function test(){
$startTime = strtotime($_POST['overworkStartTime']); //得到開始時間的時間戳
$endTime = strtotime($_POST['overworkEndTime']); //得到結束時間的時間戳
if($startTime < $endTime){
$starttime = $startTime;
$endtime = $endTime;
}else{
$starttime = $endTime;
$endtime = $startTime;
}
//計算天數
$timediff = $endtime-$starttime;
$days = intval($timediff/86400);
//計算小時數
$remain = $timediff%86400;
$hours = intval($remain/3600);
// 計算分鐘數
$remain = $remain%3600;
$mins = intval($remain/60*1.67);
if ($mins<"10") {
$row = str_pad($mins,2,"0",STR_PAD_LEFT);
$res = $hours.".".$row;
return $res;
}else{
$res = $hours.".".$mins;
return $res;
}
}