获取前台加班时长

最新推荐文章于 2025-07-16 23:39:32 发布

原创最新推荐文章于 2025-07-16 23:39:32 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #php #javascript

php 同时被 3 个专栏收录

12 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

html

4 篇文章

订阅专栏

博客展示了加班预报的前台页面代码，使用 HTML、JavaScript 实现表单填写与交互，还给出了控制器代码，用 PHP 接收前台提交的加班时间，进行后台运算得出加班时长，实现了前后端交互的功能。

前台页面代码：

<!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">

</head>
<style type="text/css">
   th{
       width: 50%;
   }
</style>

<body>

        {{--<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="alert alert-danger" role="alert">
                <p>加班必看：</p>
                <p>1.加班预报可提前一周申请</p>
                <p>2.平时加班，18:30以后为准</p>
                <p>3.当天加班申请，最晚第二天中午12:00之前提交</p>
            </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>

            $(".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;
        }
    }