加班计时器-纯html_加班源码-CSDN博客

本文链接：https://blog.csdn.net/HuangJiaxinZ/article/details/127550928
博客围绕前端开发展开，涉及HTML和JavaScript相关内容。HTML是网页结构搭建的基础，JavaScript为网页赋予交互性和动态效果，二者在前端开发中至关重要。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加班计算器</title>


</head>

<body>

    <textarea cols="10" rows="35" id="startTime" placeholder="上班时间">8:38:32</textarea>
    <textarea cols="10" rows="35" id="endTime" placeholder="下班时间">20:17:07</textarea>
    <button id="btn" onclick="dowork()">计算</button>
    <textarea cols="50" rows="10" id="res" placeholder=""></textarea>
</body>
<!-- 内网，只能上某些网站，所以用gitpage的jQuery -->
<script src="https://huangjiaxin8.github.io/js/jquery-1.11.1.min.js"></script>
<script>
    // var btn = document.getElementById("id");
    // var startTime = document.getElementById("startTime");
    // var endTime = document.getElementById("endTime");

    function dowork() {
        console.log("btn click!");
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();

        // console.log(startTime);
        // console.log(endTime);

        var startTimeList = startTime.split("\n");
        var endTimeList = endTime.split("\n");

        console.log(startTimeList);
        console.log(endTimeList);
        // console.log(startTimeList[0]);
        // console.log(endTimeList[0]);


        startTimeList = replaceBlankList(startTimeList);
        endTimeList = replaceBlankList(endTimeList);

        var res = computeAll(startTimeList, endTimeList);

        $("#res").val(res);

    }


    function replaceBlankList(list) {
        var arr = [];
        for (const li of list) {
            if (li.trim() != '') {
                console.log(li)
                arr.push(li);
            }
        }
        return arr;
    }

    function computeAll(startTimeList, endTimeList) {
        // n 代表了多少天
        var n = startTimeList.length;
        var allMinute = 0;
        for (var i = 0; i < n; i++) {
            var s = startTimeList[i].trim();
            var e = endTimeList[i].trim();
            allMinute += computeOneDay(s, e);
        }

        //正常工时
        var mustHour = 8 * n;
        var mustMinute = 8 * 60 * n;

        console.log(allMinute)
        var h = Math.floor(allMinute / 60);
        var m = Math.floor(allMinute % 60);

        var jiabanAllMinute = allMinute - mustMinute;
        var jiabanh = Math.floor(jiabanAllMinute / 60);
        var jiabanm = Math.floor(jiabanAllMinute % 60);


        if (allMinute >= mustMinute) {
            //你本月已经上了n天，总共工时h小时m分钟，正常工时8*n= mustHour。当前加班时间为 jiabanAllMinute 分钟，即 jiabanh时jiabanm分钟。
            return "你本月已经上了：" + n + "天，总共工时：" + h + "小时" + m + "分钟，正常工时：8 * " + n + " = " + mustHour + "。当前加班时间为：" + jiabanAllMinute + " 分钟，即：" + jiabanh + "时" + jiabanm + "分钟。";
        } else {
            //你本月已经上了n天，总共工时h小时m分钟，正常工时：8*n= mustHour。缺工时：mustMinute-allMinute分钟。
            return "你本月已经上了" + n + "天，总共工时" + h + "小时" + m + "分钟，正常工时：8*" + n + "=" + mustHour + "。缺工：" + (mustMinute - allMinute) + "分钟。";
            console.log(mustMinute - allMinute);
            // return "缺工时：" + mustMinute - allMinute + "分钟。";
        }


    }

    //1.计算出一天，上班时间和下班时间总共上了多少有效分钟的班：
    // 如果 上班时间<8:00 按8:00算
    // 如果 下班时间>18:00 总共减去 午休90分钟+晚饭时间30分钟
    // 如果 18<下班时间<18:00  总共减去 午休90分钟
    // 如果 12<下班时间<13:30 下班时间等于12点 不扣除时间
    function computeOneDay(s, e) {
        var dateTimePrefix = "2020/01/01 ";
        //八点可以打卡上班
        var minBeginTime = new Date("2020/01/01 08:00:00");
        //晚饭开始时间 
        var dinnerTimeFirst = new Date("2020/01/01 17:30:00");
        //晚饭结束时间
        var dinnerTimeSecond = new Date("2020/01/01 18:00:00");
        //午休开始时间
        var launchTimeFirst = new Date("2020/01/01 12:00:00");
        //午休结束时间
        var launchTimeSencond = new Date("2020/01/01 13:30:00");
        
        

        var dateBegin = new Date(dateTimePrefix + s);
        var dateEnd = new Date(dateTimePrefix + e);

        //条件1：上班时间<8:00 按8:00算
        if (minBeginTime.getTime() > dateBegin.getTime()) {
            dateBegin = minBeginTime;
        }

        var allmin = workMiniute(dateBegin, dateEnd);

        //条件2：如果 下班时间>18:00 总共减去 午休90分钟+晚饭时间30分钟
        if (dateEnd.getTime() > dinnerTimeSecond.getTime()) {
            return allmin - 90 - 30;
        }

        if(dateEnd.getTime() > dinnerTimeFirst.getTime() && dateEnd.getTime() < dinnerTimeSecond.getTime()){
            allmin = workMiniute(dateBegin, dinnerTimeFirst);
            return allmin - 90;
        }

        if(dateEnd.getTime() > launchTimeFirst.getTime() && dateEnd.getTime() < launchTimeSencond.getTime()){
            allmin = workMiniute(dateBegin, launchTimeFirst);
            return allmin;
        }
        return allmin;

    }


    //返回打卡时间的时间差（单位分钟）
    function workMiniute(dateBegin, dateEnd) {//di作为一个变量传进来
        // console.log(dateBegin);
        // console.log(dateEnd);
        var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数


        // var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
        // var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
        // var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
        // //计算相差分钟数
        // var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
        // var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
        // //计算相差秒数
        // var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
        // var seconds = Math.round(leave3 / 1000)
        // console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
        // console.log(dateDiff + "时间差的毫秒数", dayDiff + "计算出相差天数", leave1 + "计算天数后剩余的毫秒数"
        //     , hours + "计算出小时数", minutes + "计算相差分钟数", seconds + "计算相差秒数");


        // 返回多少分钟
        return Math.floor(dateDiff / 1000 / 60);

    }


</script>

</html>