多通道计时工具 Web 应用创作灵感
一、项目背景
在日常现场作业、巡检、设备调试、运维监控等工作场景中，经常需要同时对多组任务独立计时。传统手机自带计时器大多只支持单任务计时，开启多个计时需要重复打开多个 APP，来回切换界面，无法在同一个页面直观查看全部任务的计时状态；市面上部分多计时器软件存在广告多、需要安装客户端、移动端平板适配差的问题。
基于以上痛点，开发了这套纯前端 Web 多通道计时器，无需安装软件，浏览器直接打开即可使用，适配平板、电脑浏览器，支持触摸点击操作，非常适合现场工作人员使用。
二、核心功能说明
- 9 路独立计时通道：一共 9 个独立计时方块，每个通道互不干扰。点击对应色块即可开始重置计时，计时从零开始累加。
- 复位计数统计：每个通道自带复位次数统计，记录该任务一共被重置多少次，方便统计任务执行轮次。
- 全局时间显示：页面顶部展示系统实时时间，包含年月日时分秒，工作时可以直接参考标准时间，不用额外看时钟。
- 触摸友好交互：适配平板触摸屏，直接点击彩色方块完成计时重置，同时兼容键盘数字键 1‑9 快捷触发对应通道。
- 响应式自适应布局：方块尺寸基于视口百分比配置，每个方块高度占页面高度 20%，宽度占页面宽度 25%。屏幕尺寸变化（横屏、竖屏、电脑显示器），方块、文字会自动缩放适配，不会出现内容裁切溢出。
- 纯网页无依赖：全部由 HTML+CSS+JavaScript 实现，不需要后端服务，保存本地 HTML 文件双击浏览器就能运行，离线也可以使用。
三、适用的工作场合
-
安防、弱电工程现场调试 安防监控、网络布线、设备调试场景，经常需要同时记录多路设备的通电时长、设备运行时长、故障复现等待时间。例如多台摄像头通电测试、POE 设备老化测试、交换机端口稳定性测试，每一台设备对应一个计时通道，统一页面查看各组设备运行时间，不用来回切换多个计时器。
-
设备巡检、现场运维工作 现场巡检人员，对多个点位做循环巡检，每到一个点位点击方块重置计时，记录该点位本次巡检停留 / 间隔时长；复位次数可以统计该点位总共巡检多少次，便于复盘巡检频率。
-
车间流水线、工位作业计时 工厂多工位并行作业，记录每个工位单次作业耗时，统计作业轮次。可以快速对比不同工位的单次工作时长，辅助分析工位效率。
-
测试实验室、样品老化测试 多组样品同时做老化、耐久测试，每个样品分配一个计时通道，记录样品累计运行时间，复位次数记录样品重启、重新测试的次数。
-
外勤、上门服务工作 技术人员上门多任务处理，同时跟踪多项任务耗时，例如多设备检修，区分每一项工作消耗的时间，便于工时统计。
-
培训、演练场景 多组人员并行演练，每组对应一个计时通道，统一页面观察各组用时，复位次数记录演练轮次。
四、对工作带来的实际作用
-
提升多任务并行处理效率 告别多 APP 来回切换，单页面同时观察全部任务计时状态，一眼看清每一项任务运行多久，减少操作耗时。
-
轻量化无部署成本 不需要安装客户端，平板、笔记本直接打开网页即可，离线可用，没有服务器、授权、付费成本，现场环境没有网络也可以正常工作。
-
记录任务轮次，辅助数据分析 复位计数功能自动记录任务重置次数，间接统计任务执行轮次，结合计时时间，可用于简单评估任务频次、循环工作的效率。
-
平板设备高度适配，适合现场使用 很多现场工作习惯使用平板作业，本项目采用百分比视口布局，方块大小适配平板屏幕，大色块触摸点击，适合戴手套、现场环境下操作。
-
标准化现场计时手段 现场工作很多依靠人工看手表计时，容易看错、漏记。统一使用该工具，计时数据直观，减少人为计时带来的误差。
全程PHP
<?php
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metro 磁贴9路计时器</title>
<style>
html{
font-size:16px;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#000;
color:#fff;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:1rem 0.75rem;
font-family: "Segoe UI", sans-serif;
}
h3{
margin-bottom:0.6rem;
font-size:1.4rem;
font-weight:400;
color:#cccccc;
line-height:1.1;
text-align:center;
}
.container{
display:grid;
/* 每个方块宽度25vw */
grid-template-columns: repeat(3, 25vw);
gap:0.7rem;
justify-content:center;
}
/* 每个方块高度占页面高度20% height:20vh，宽度由grid控制25vw */
.counter-item{
height:20vh;
padding:0.8rem 1rem;
display:flex;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
-webkit-tap-highlight-color: transparent;
}
.circle-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:4.5rem;
height:4.5rem;
border-radius:50%;
background:#000000;
font-size:2.2rem;
font-weight:bold;
margin-right:0.6rem;
}
.counter-title{
font-size:1.2rem;
font-weight:300;
opacity:0.85;
display:flex;
align-items:center;
}
.reset-count{
margin-left:0.6rem;
font-size:1rem;
opacity:0.7;
}
.val{
font-size: clamp(1.2rem, 10vh, 3.2rem);
font-weight:200;
letter-spacing:0.08rem;
text-align:center;
flex:1;
display:flex;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<h3 id="titleText">按键盘数字1‑9 /点击方块，对应磁贴复位开始计时</h3>
<div class="container" id="box">
</div>
<script>
const counters = [];
const tileColors = [
"#0078D4", "#00BCF2", "#008272",
"#107C10", "#FF8C00", "#E81123",
"#881798", "#5C2D91", "#00B4FF"
];
for(let i=1;i<=9;i++){
counters.push({
id:i,
time:0,
timer:null,
resetTimes:0
});
}
const box = document.getElementById('box');
const titleDom = document.getElementById('titleText');
function updateTitleTime(){
const now = new Date();
const y = now.getFullYear();
const m = String(now.getMonth()+1).padStart(2,'0');
const d = String(now.getDate()).padStart(2,'0');
const h = String(now.getHours()).padStart(2,'0');
const mi = String(now.getMinutes()).padStart(2,'0');
const s = String(now.getSeconds()).padStart(2,'0');
titleDom.innerText = `按键盘数字1‑9 /点击方块，对应磁贴复位开始计时 ${y}-${m}-${d} ${h}:${mi}:${s}`;
}
updateTitleTime();
setInterval(updateTitleTime,1000);
counters.forEach((item,index)=>{
const div = document.createElement('div');
div.className = 'counter-item';
div.dataset.tileId = item.id;
div.style.backgroundColor = tileColors[index];
div.innerHTML = `
<div class="counter-title">
<span class="circle-num">${item.id}</span>
号计数器
<span class="reset-count" data-rid="${item.id}">复位：0次</span>
</div>
<div class="val" data-id="${item.id}">0秒</div>
`;
box.appendChild(div);
div.querySelector('.circle-num').style.color = tileColors[index];
div.addEventListener('click',()=>{
startCounter(item.id);
});
})
document.addEventListener('keydown',(e)=>{
const num = parseInt(e.key);
if(num>=1 && num<=9){
startCounter(num);
}
})
function startCounter(no){
const idx = no -1;
const obj = counters[idx];
if(obj.timer){
clearInterval(obj.timer);
}
obj.time = 0;
obj.resetTimes +=1;
const resetDom = document.querySelector(`.reset-count[data-rid="${no}"]`);
if(resetDom){
resetDom.innerText = `复位：${obj.resetTimes}次`;
}
updateDisplay(no);
obj.timer = setInterval(()=>{
obj.time +=1;
updateDisplay(no);
},1000);
}
function formatTime(totalSec){
const hours = Math.floor(totalSec / 3600);
const remain = totalSec % 3600;
const mins = Math.floor(remain / 60);
const secs = remain % 60;
if(hours > 0){
return `${hours}小时${mins}分${secs}秒`;
}else if(mins >0){
return `${mins}分${secs}秒`;
}else{
return `${secs}秒`;
}
}
function updateDisplay(no){
const idx = no-1;
const obj = counters[idx];
const dom = document.querySelector(`.val[data-id="${no}"]`);
if(dom){
dom.innerText = formatTime(obj.time);
}
}
</script>
</body>
</html>
扫一扫
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
