111

tianhouken · 发表于昨天 21:54

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>时间差计算表格（可手动编辑）</title>
<style>
*{box-sizing: border-box; margin:0; padding:0; font-family: "微软雅黑", sans-serif;}
body{padding:20px; background:#f2f3f5;}
.wrap{max-width:1100px; margin:0 auto; background:#fff; padding:24px; border-radius:8px; box-shadow:0 2px 12px #00000012;}
h2,h3{margin:16px 0 10px; color:#1f2937;}
table{width:100%; border-collapse: collapse; margin:12px 0 20px;}
th,td{border:1px solid #d1d5db; padding:10px; text-align:center; vertical-align: middle;}
th{background:#2563eb; color:#fff; font-weight:normal;}
input{width:100%; padding:6px 8px; border:1px solid #cbd5e1; border-radius:4px; font-size:14px;}
.btn{padding:7px 14px; border:none; border-radius:4px; cursor:pointer; margin:4px;}
.addRow{background:#22c55e; color:#fff;}
.delRow{background:#ef4444; color:#fff;}
.tip{background:#fff7e6; border-left:4px solid #f97316; padding:10px 14px; margin:8px 0 20px; line-height:1.6;}
</style>
</head>
<body>
<div class="wrap">
<h2>时间差计算表（手动修改日期自动计算）</h2>
<div class="tip">
填写格式示例：7/5/26 1:11 （月/日/年时:分）<br>
1. 来电时间、航班时间输入框可直接手动修改<br>
2. 修改完成自动算出【时间差(小时)】【总秒数】，无需手动计算<br>
3. 点击「新增一行」添加空白行，点击红色按钮删除当前行
</div>
<h3>手工输入区域</h3>
<table id="table1">
<thead>
<tr>
<th>来电时间（取座时间）</th>
<th>航班时间</th>
<th>时间差（小时）</th>
<th>总秒数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="t1" value="7/5/26 1:11" oninput="calcRow(this)"></td>
<td><input class="t2" value="7/7/26 11:50" oninput="calcRow(this)"></td>
<td class="resHour"></td>
<td class="resSec"></td>
<td><button class="btn delRow" onclick="delTr(this)">删除</button></td>
</tr>
</tbody>
</table>
<button class="btn addRow" onclick="addRow('table1')">新增一行</button>
<div class="tip">来电时间（取座时间）、航班时间需要手动逐字输入</div>
<h3>自动输入区域</h3>
<table id="table2">
<thead>
<tr>
<th>来电时间（取座时间）</th>
<th>航班时间</th>
<th>时间差（小时）</th>
<th>总秒数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="t1" value="7/5/26 8:54" oninput="calcRow(this)"></td>
<td><input class="t2" value="2/14/19 9:02" oninput="calcRow(this)"></td>
<td class="resHour"></td>
<td class="resSec"></td>
<td><button class="btn delRow" onclick="delTr(this)">删除</button></td>
</tr>
</tbody>
</table>
<button class="btn addRow" onclick="addRow('table2')">新增一行</button>
<div class="tip">
来电时间获取当前时间：点击输入框，输入 =NOW() 回车刷新<br>
航班时间仍需手动填写
</div>
</div>
<script>
// 解析月/日/年时:分时间字符串
function parseTime(str){
let datePart = str.split(' ')[0];
let timePart = str.split(' ')[1];
if(!datePart || !timePart) return null;
let [m,d,y] = datePart.split('/').map(Number);
let [h,mi] = timePart.split(':').map(Number);
let fullYear = 2000 + y;
return new Date(fullYear, m-1, d, h, mi, 0);
}
// 单行计算
function calcRow(inputDom){
let tr = inputDom.closest('tr');
let t1Val = tr.querySelector('.t1').value;
let t2Val = tr.querySelector('.t2').value;
let d1 = parseTime(t1Val);
let d2 = parseTime(t2Val);
let hourTd = tr.querySelector('.resHour');
let secTd = tr.querySelector('.resSec');
if(!d1 || !d2 || isNaN(d1.getTime()) || isNaN(d2.getTime())){
hourTd.textContent = "格式错误";
secTd.textContent = "-";
return;
}
let diffMs = d2 - d1;
let diffSec = diffMs / 1000;
let diffHour = (diffSec / 3600).toFixed(2);
hourTd.textContent = diffHour;
secTd.textContent = Math.round(diffSec);
}
// 新增行
function addRow(tableId){
let table = document.getElementById(tableId);
let tbody = table.querySelector('tbody');
let newTr = document.createElement('tr');
newTr.innerHTML = `
<td><input class="t1" value="" oninput="calcRow(this)"></td>
<td><input class="t2" value="" oninput="calcRow(this)"></td>
<td class="resHour"></td>
<td class="resSec"></td>
<td><button class="btn delRow" onclick="delTr(this)">删除</button></td>
`;
tbody.appendChild(newTr);
}
// 删除行
function delTr(btn){
let tr = btn.closest('tr');
tr.remove();
}
// 页面加载完成自动计算所有行
window.onload = function(){
document.querySelectorAll('input.t1, input.t2').forEach(input=>{
calcRow(input);
})
}
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册