当前位置：首页 > article >正文

＜Project-11 Calculator＞计算器 0.2 工时计算器 WorkHours Calculator HTTP + JS

article 2024/10/23 23:40:27

灵感

给工人发工资是按小时计算的，每次都要上网，我比较喜欢用 Hours Calculator ，也喜欢它的其它的功能，做个类似的。

我以为是 Python，结果在学 javascript 看 HTML，页面的基础还停留在 Frontpage 2000 因为 MS-Office 2000 里有的。

忽略我的美学... 已排版尽力

这是一个长期的项目当遇到生活计算时，就会添加进来，也许会吧
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/davenian/article/details/143054998 <- 开篇文章

工时计算器 Work Hours Calculator

这是一个工作时长计算器，用于根据用户输入的开始时间、结束时间以及休息时间来计算总工时。它支持12小时制和24小时制，并能够处理跨越午夜的情况。

目录结构

/11. Calculator
    /static
        - styles.css
        /workhours
            - workhourscal.js
        /time
            - timercal.js
    /templates
        - index.html
        /converters
            - time.html
            - workhours.html
    - app.py

服务端

同 https://blog.csdn.net/davenian/article/details/143054998 里面的内容

workhourscal.html

<!DOCTYPE html>
<!--workhours.html-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作小时数计算器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div>
    <!-- 顶部导航按钮 -->
    <div class="nav-buttons">
        <!-- 返回上一页 -->
        <button onclick="history.back()">返回上一页</button>
        <!-- 返回主页 -->
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>

    <!-- 内容区 -->
    <div class="content">
    <!-- 左侧的计算器容器 -->
        <div class="calculator-container  boxed-container">
            <div>
                <h2 class="rendered"> 工作时长计算器</h2>
            </div>
            <div>
                <div class="alignCenter note small" style="margin-bottom: 10px;">
                    输入不带冒号的时间:815, 1225 等          
                </div>
                <div class="clock-container">
                    <!-- 12 小时时钟 -->
                    <div class="clock clock"> 
                        <input name="clock" type="radio" id="clock_0" value="12" onchange="toggleAmPm();" checked="">
                        <label for="clock_0">12 hour clock</label>&nbsp;&nbsp;&nbsp;
                    </div>
                    <!-- 24 小时时钟 -->
                    <div class="cell clock">
                        <input name="clock" type="radio" id="clock_1" value="24" onchange="toggleAmPm();">
                        <label for="clock_1">24 hour clock</label>        
                    </div>
                </div>
                <!-- AM/PM 选择框 -->
                <div class="clock-container">
                    <div class="cell">
                        <label for="startTime">开始时间:</label>
                        <input type="text" id="startTime" placeholder="hhmm" required maxlength="4" pattern="^([12]?[0-9][0-6][0-9])?$" inputmode="numeric" title="请输入有效的时间格式!">
                         <!-- AM/PM 选择框 -->
                        <div id="startAmPmContainer">
                            <select id="startAmPm">
                                <option value="AM" selected>AM</option>
                                <option value="PM">PM</option>
                        </select>
                        </div> 
                    </div>
                </div>
                <div class="clock-container">
                    <div class="cell">   
                        <label for="endTime">结束时间:</label>
                        <input type="text" id="endTime" placeholder="hhmm" required maxlength="4" pattern="^([12]?[0-9][0-6][0-9])?$" inputmode="numeric" title="请输入有效的时间格式!">
                        <!-- AM/PM 选择框 -->
                        <div id="endAmPmContainer">
                            <select id="endAmPm">
                                <option value="AM">AM</option>
                                <option value="PM" selected>PM</option>
                            </select>
                        </div> 
                    </div>
                </div>
                <div class="clock-container">
                    <div class="row">
                        <div class="cell alignLeft">
                            <label for="break_minutes">休息时间:</label>
                            <input type="text" id="break_minutes"  placeholder="0" inputmode="numeric" value="0" size="4" maxlength="3" onfocus="this.select()"> 分钟
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-group">
                <div class="floatLeft">   
                    <button class="clear-btn" onclick="clearFields()">清除</button>
                </div>
                
                <div class="floatRight">
                    <button id="calculateHours" class="calculator-btn">工时计算</button>
                
                </div>
            </div>
            <div>
                <p></p>
                <div class="celleft">
                    <h3 style="display: inline;">结果: </h3>
                    <span id="answer"></span>
                </div>
                
                <!-- 使用标准的表格结构替换 div 模拟的表格 -->
                <table class="prettytable centered">
                    <tr>
                        <th>时间合计(hh:mm)</th>
                        <td id="totalTime">00:00</td>
                    </tr>
                    <tr>
                        <th>十进制显示</th>
                        <td id="decimalHours">0.00 hours</td>
                    </tr>
                    <tr>
                        <th>分钟统计</th>
                        <td id="totalMinutes">0 minutes</td>
                    </tr>
                </table>
            </div>
        </div>
    <!-- 右侧的说明文字 -->
        <div class="description">
        <h3>使用这个计算器来累加时间表或工时卡的工时。</h3>
        <p>只输入整数，如 1215 代表 12:15，或 137 代表 1:37。对于完整的工时卡，请使用工时卡计算器。</p>
        <p>输入开始时间和结束时间时，不要使用 "." 或 ":"。</p>
        <p>如果输入的数字为 1 到 12 之间的单个整数，系统将假定时间为 1:00 到 12:00。</p>
        <p>系统假定“12 pm”为中午，“12 am”为午夜。</p>
        <h3>将数字时间转换为十进制小时</h3>
        <p>假设您计算的总时间为 7:15（7 小时 15 分钟），其等效的十进制时间为 7.25 小时。您需要使用十进制小时来计算工资。</p>
        <h3>将分钟转换为十进制小时</h3>
        <p>7:15 表示 7.0 小时外加 15 分钟。您需要将分钟部分转换为小时。</p>
        <p>15 分钟乘以 1 小时除以 60 分钟，以小时为单位：</p>
        <p>15 分 × (1 小时 / 60 分钟) = (15/60) 小时 = 0.25 小时</p>
        <p>将 0.25 加到 7.0，我们的总时间就是 7.0 + 0.25 = 7.25 小时。</p>
        <h3>反向操作：将十进制小时转换为分钟</h3>
        <p>0.25 小时乘以每小时 60 分钟：</p>
        <p>0.25 小时 × (60 分钟 / 1 小时) = (0.25 × 60) 分钟 = 15 分钟。</p>
        </div>
    <script src="{{ url_for('static', filename='workhours/workhourscal.js') }}"></script>
    </div>
</body>
</html>

说明：

CSS 分开， <div></div> 写代码时，一定要格式对齐，至少这个必须的。display:flexed 慎用尤其是行间距缩进时。

workhourscal.js

// workhourscal.js
document.addEventListener('DOMContentLoaded', function() { //必须在 function 之前
    // 绑定计算按钮的事件监听器
    document.getElementById('calculateHours').addEventListener('click', calculateHours);
    
    // 绑定清除按钮的事件监听器
    // document.getElementById('clearFields').addEventListener('click', clearFields);
});

function toggleAmPm() {
    // 获取选择的时钟模式
    var is24HourClock = document.getElementById('clock_1').checked;
    
    // 获取 AM/PM 选择框容器
    var startAmPmContainer = document.getElementById('startAmPmContainer');
    var endAmPmContainer = document.getElementById('endAmPmContainer');
    
    // 如果选择了24小时制，隐藏AM/PM选择框；否则显示
    if (is24HourClock) {
        startAmPmContainer.style.display = 'none';
        endAmPmContainer.style.display = 'none';
    } else {
        startAmPmContainer.style.display = 'block';
        endAmPmContainer.style.display = 'block';
    }
}

function calculateHours() {
    const startTime = document.getElementById('startTime').value;
    const endTime = document.getElementById('endTime').value;
    const is24HourClock = document.getElementById('clock_1').checked; // 检查是否是24小时制
    let startAmPm = '';
    let endAmPm = '';

    if (!is24HourClock) {
        startAmPm = document.getElementById('startAmPm').value;
        endAmPm = document.getElementById('endAmPm').value;
    }

    const breakMinutes = parseInt(document.getElementById('break_minutes').value) || 0;

    // 重置提示和变量
    document.getElementById('answer').textContent = '';  // 清空之前的提示
    let midnightCrossed = false;  // 初始化标记变量
    let answerText = '';  // 初始化提示内容

    // 验证输入的时间格式是否正确
    if (!isValidTime(startTime) || !isValidTime(endTime)) {
        document.getElementById('answer').textContent = '请输入有效的时间格式 (hhmm)';
        return;
    }

    // 将时间转换为分钟（如果是24小时制，则忽略AM/PM）
    const startMinutes = timeToMinutes(startTime, startAmPm, is24HourClock);
    const endMinutes = timeToMinutes(endTime, endAmPm, is24HourClock);

    let totalMinutes = endMinutes - startMinutes - breakMinutes;
    
    // 处理跨越午夜的情况：如果结束时间早于开始时间，自动处理为跨越午夜的情况
    if (totalMinutes < 0) {
        totalMinutes += 1440; // 加上一天的分钟数
        answerText = ' 注意：时间跨越了午夜！'; // 设置提醒文本
        midnightCrossed = true; // 标记为跨越了午夜
    }

    // 计算小时和分钟
    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;

    // 计算十进制小时
    const decimalHours = (totalMinutes / 60).toFixed(2);

    // 输出调试
    console.log(`Hours: ${hours}, Minutes: ${minutes}, Decimal: ${decimalHours}, Total Minutes: ${totalMinutes}`);

    // 将结果更新到表格的相应单元格中
    document.getElementById('totalTime').textContent = `${hours}:${minutes.toString().padStart(2, '0')}`;  // 总时间 (hh:mm)
    document.getElementById('decimalHours').textContent = `${decimalHours} hours`;  // 十进制小时
    document.getElementById('totalMinutes').textContent = `${totalMinutes} minutes`;  // 总分钟数

    // 如果跨越了午夜，显示提示信息
    if (midnightCrossed) {
        document.getElementById('answer').textContent = answerText;  // 显示跨越午夜的提醒
    }
}

function timeToMinutes(time, amPm, is24HourClock) {
    let hours = parseInt(time.slice(0, time.length - 2), 10);
    let minutes = parseInt(time.slice(-2), 10);

    // 如果是24小时制，忽略 AM/PM 处理
    if (!is24HourClock) {
        if (amPm === 'PM' && hours !== 12) {
            hours += 12;
        } else if (amPm === 'AM' && hours === 12) {
            hours = 0;
        }
    }

    return hours * 60 + minutes;
}

function isValidTime(time) {
    return /^([01]?[0-9]|2[0-3])[0-5][0-9]$/.test(time);  // 验证24小时制时间格式
}


function clearFields() {
    document.getElementById('startTime').value = '';
    document.getElementById('endTime').value = '';
    document.getElementById('break_minutes').value = '0';
    document.getElementById('answer').textContent = '';
    document.getElementById('totalTime').textContent = `00:00`;
    document.getElementById('decimalHours').textContent = `0.00 hours`;
    document.getElementById('totalMinutes').textContent = `0 minutes`;
    document.getElementById('answerText').textContent = ``;
    //document.getElementById('midnightCrossed').textContent = ``;
}

说明：

一定要放在第一行！！！

document.addEventListener('DOMContentLoaded', function() { //必须在 function 之前
    // 绑定计算按钮的事件监听器
    document.getElementById('calculateHours').addEventListener('click', calculateHours);
    
    // 绑定清除按钮的事件监听器
    // document.getElementById('clearFields').addEventListener('click', clearFields);
});

当网页的 DOM 加载完成时，这段代码会运行。它会给 id="calculateHours()" 的按钮绑定一个点击事件，当按钮被点击时会触发 calculateHours() 函数，进行工时计算。