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

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

news 2024/10/22 11:38:55

灵感

给工人发工资是按小时计算的，每次都要上网，我比较喜欢用 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() 函数，进行工时计算。