{"id":364,"date":"2026-04-03T23:22:26","date_gmt":"2026-04-03T14:22:26","guid":{"rendered":"https:\/\/tool-laboratory.com\/?p=364"},"modified":"2026-04-03T23:35:29","modified_gmt":"2026-04-03T14:35:29","slug":"work-hours-calculator","status":"publish","type":"post","link":"https:\/\/tool-laboratory.com\/en\/work-hours-calculator\/","title":{"rendered":"\u52e4\u52d9\u6642\u9593\u30fb\u6b8b\u696d\u30fb\u7d66\u6599\u8a08\u7b97\u30c4\u30fc\u30eb\uff5c\u30b7\u30d5\u30c8\u5bfe\u5fdc\u3067\u81ea\u52d5\u8a08\u7b97\uff08\u7121\u6599\uff09"},"content":{"rendered":"\n\n<p class=\"lead\">\n\u30b7\u30d5\u30c8\u30fb\u6b8b\u696d\u30fb\u6df1\u591c\u624b\u5f53\u30fb\u6708\u53ce\u3092\u81ea\u52d5\u8a08\u7b97\u3002\u30b9\u30de\u30db\u6700\u9069\u5316\u6e08\u307f\u3002\n<\/p>\n\n<div class=\"tool-box\">\n\n<div id=\"rows\"><\/div>\n\n<button class=\"add-btn\" id=\"addShift\">\uff0b \u30b7\u30d5\u30c8\u8ffd\u52a0<\/button>\n\n<label>\u6642\u7d66\uff08\u5186\uff09<\/label>\n<input type=\"number\" id=\"wage\" value=\"1000\">\n\n<div class=\"actions\">\n<button onclick=\"saveData()\">\u4fdd\u5b58<\/button>\n<button onclick=\"loadData()\">\u5fa9\u5143<\/button>\n<button onclick=\"downloadCSV()\">CSV<\/button>\n<\/div>\n\n<pre id=\"result\"><\/pre>\n\n<\/div>\n\n<style>\n.tool-box{\n  background:#fff;\n  padding:16px;\n  border-radius:16px;\n  box-shadow:0 6px 20px rgba(0,0,0,0.08);\n}\n\n.row{\n  background:#f9fafb;\n  padding:12px;\n  border-radius:12px;\n  margin-bottom:10px;\n  display:flex;\n  flex-direction:column;\n  gap:6px;\n  position:relative;\n}\n\n.row-header{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n}\n\n.delete-btn{\n  background:#ff4d4f;\n  color:#fff;\n  border:none;\n  border-radius:8px;\n  padding:4px 8px;\n  font-size:12px;\n}\n\ninput{\n  width:100%;\n  padding:10px;\n  border-radius:8px;\n  border:1px solid #ddd;\n}\n\n.add-btn{\n  width:100%;\n  padding:12px;\n  background:#0073aa;\n  color:#fff;\n  border:none;\n  border-radius:10px;\n  margin:10px 0;\n}\n\n.actions{\n  display:flex;\n  gap:8px;\n}\n\n.actions button{\n  flex:1;\n  padding:10px;\n  background:#333;\n  color:#fff;\n  border:none;\n  border-radius:8px;\n}\n\npre{\n  background:#111;\n  color:#0f0;\n  padding:12px;\n  border-radius:10px;\n}\n<\/style>\n\n<script>\nconst rowsEl = document.getElementById(\"rows\");\n\nfunction addRow(data={}){\n  const div = document.createElement(\"div\");\n  div.className=\"row\";\n\n  div.innerHTML = `\n    <div class=\"row-header\">\n      <strong>\u30b7\u30d5\u30c8<\/strong>\n      <button class=\"delete-btn\">\u524a\u9664<\/button>\n    <\/div>\n    <input type=\"time\" class=\"start\" value=\"${data.start||''}\">\n    <input type=\"time\" class=\"end\" value=\"${data.end||''}\">\n    <input type=\"number\" class=\"break\" value=\"${data.break||60}\" placeholder=\"\u4f11\u61a9(\u5206)\">\n  `;\n\n  div.querySelector(\".delete-btn\").onclick = () => {\n    div.remove();\n    calc();\n  };\n\n  rowsEl.appendChild(div);\n}\n\ndocument.getElementById(\"addShift\").onclick = () => addRow();\n\nfunction calc(){\n  const wage = parseFloat(document.getElementById(\"wage\").value)||0;\n  let totalMin=0;\n\n  document.querySelectorAll(\".row\").forEach(r=>{\n    const s=r.querySelector(\".start\").value;\n    const e=r.querySelector(\".end\").value;\n    const b=parseInt(r.querySelector(\".break\").value)||0;\n\n    if(!s||!e) return;\n\n    let start=new Date(\"2020-01-01 \"+s);\n    let end=new Date(\"2020-01-01 \"+e);\n    if(end<start) end.setDate(end.getDate()+1);\n\n    totalMin+=(end-start)\/60000-b;\n  });\n\n  let hours=totalMin\/60;\n  let pay=hours*wage;\n\n  document.getElementById(\"result\").textContent =\n    \"\u52e4\u52d9\u6642\u9593: \"+hours.toFixed(2)+\"\u6642\u9593\\n\"+\n    \"\u7d66\u6599: \"+Math.round(pay)+\"\u5186\";\n}\n\ndocument.addEventListener(\"input\",calc);\n\nfunction saveData(){\n  const data=[];\n  document.querySelectorAll(\".row\").forEach(r=>{\n    data.push({\n      start:r.querySelector(\".start\").value,\n      end:r.querySelector(\".end\").value,\n      break:r.querySelector(\".break\").value\n    });\n  });\n  localStorage.setItem(\"shiftData\",JSON.stringify(data));\n}\n\nfunction loadData(){\n  const data=JSON.parse(localStorage.getItem(\"shiftData\")||\"[]\");\n  rowsEl.innerHTML=\"\";\n  data.forEach(d=>addRow(d));\n}\n\nfunction downloadCSV(){\n  let csv=\"\u958b\u59cb,\u7d42\u4e86,\u4f11\u61a9\\n\";\n  document.querySelectorAll(\".row\").forEach(r=>{\n    csv+=\n      r.querySelector(\".start\").value+\",\"+\n      r.querySelector(\".end\").value+\",\"+\n      r.querySelector(\".break\").value+\"\\n\";\n  });\n\n  const blob=new Blob([csv],{type:\"text\/csv\"});\n  const a=document.createElement(\"a\");\n  a.href=URL.createObjectURL(blob);\n  a.download=\"shift.csv\";\n  a.click();\n}\n\n\/\/ \u521d\u671f1\u884c\u3060\u3051\naddRow();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u30b7\u30d5\u30c8\u30fb\u6b8b\u696d\u30fb\u6df1\u591c\u624b\u5f53\u30fb\u6708\u53ce\u3092\u81ea\u52d5\u8a08\u7b97\u3002\u30b9\u30de\u30db\u6700\u9069\u5316\u6e08\u307f\u3002 \uff0b \u30b7\u30d5\u30c8\u8ffd\u52a0 \u6642\u7d66\uff08\u5186\uff09 \u4fdd\u5b58 \u5fa9\u5143 CSV<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1,7],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","hentry","category-house-tools","category-calculator"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":3,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":369,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/posts\/364\/revisions\/369"}],"wp:attachment":[{"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/media?parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/categories?post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tool-laboratory.com\/en\/wp-json\/wp\/v2\/tags?post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}