获取前台加班时长

博客展示了加班预报的前台页面代码,使用 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">

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值