\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u6a5f | P_d = \u03c6\u00b7(Q+Q_h+G_t)<\/title>\n <style>\n \/* all styles are strictly scoped inside #calculator *\/\n #calculator {\n --primary-color: #0a3487;\n --primary-hover: #F58423;\n --error-color: #e53935;\n --bg-color: #EAEEF7;\n --text-color: #4a4a4a;\n \n display: block;\n width: 100%;\n background: var(--bg-color);\n font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\n color: var(--text-color);\n }\n \n \/* container for PC max-width & padding *\/\n #calculator .calculator-container {\n max-width: 545px;\n padding: 30px;\n margin: 0 auto;\n background: var(--bg-color);\n box-sizing: border-box;\n }\n \n \/* typography *\/\n #calculator .calculator-title {\n font-size: 24px;\n font-weight: 600;\n margin: 0 0 4px 0;\n color: var(--primary-color);\n letter-spacing: -0.2px;\n }\n \n #calculator .calculator-subtitle {\n font-size: 14px;\n margin: 0 0 24px 0;\n font-family: monospace;\n background: rgba(10,52,135,0.08);\n display: inline-block;\n padding: 4px 12px;\n border-radius: 0;\n color: var(--primary-color);\n }\n \n \/* input groups *\/\n #calculator .input-group {\n margin-bottom: 20px;\n width: 100%;\n position: relative;\n }\n \n #calculator label {\n display: block;\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 6px;\n color: var(--text-color);\n }\n \n #calculator .var-symbol {\n font-family: monospace;\n font-weight: 700;\n background: rgba(0,0,0,0.04);\n padding: 0px 4px;\n border-radius: 0;\n margin-left: 4px;\n }\n \n \/* wrapper for input + inline unit (unit placed inside input field on the right) *\/\n #calculator .input-unit-wrapper {\n position: relative;\n width: 100%;\n }\n \n #calculator .input-unit-wrapper .calculator-input {\n width: 100%;\n padding-right: 104px;\n }\n \n #calculator .inline-unit {\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 500;\n color: #aaaaaa;\n background: transparent;\n padding: 0 8px;\n height: auto;\n line-height: 1;\n white-space: nowrap;\n font-family: monospace;\n pointer-events: none;\n box-sizing: border-box;\n }\n \n \/* select styling \u2014 no unit after select *\/\n #calculator .calculator-input,\n #calculator .calculator-select {\n width: 100%;\n height: 36px;\n padding: 0 12px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 0;\n background: white;\n font-family: 'Segoe UI', 'SF Mono', monospace;\n color: #333;\n transition: all 0.2s ease;\n box-sizing: border-box;\n }\n \n #calculator .calculator-select {\n cursor: pointer;\n appearance: none;\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%234a4a4a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>');\n background-repeat: no-repeat;\n background-position: right 12px center;\n background-size: 14px;\n }\n \n \/* ensure dropdown options have consistent font and spacing *\/\n #calculator .calculator-select option {\n font-size: 14px;\n padding: 8px;\n font-family: 'Segoe UI', 'SF Mono', monospace;\n line-height: 1.4;\n color: #333;\n }\n \n #calculator .calculator-input:focus,\n #calculator .calculator-select:focus {\n outline: none;\n border: 2px solid var(--primary-color);\n padding: 0 11px;\n height: 36px;\n }\n \n #calculator .input-unit-wrapper .calculator-input:focus {\n padding-right: 103px;\n }\n \n \/* error state: border 2px solid error-color *\/\n #calculator .calculator-input.error-input,\n #calculator .calculator-select.error-input {\n border: 2px solid var(--error-color);\n padding: 0 11px;\n height: 36px;\n }\n \n #calculator .input-unit-wrapper .calculator-input.error-input {\n padding-right: 103px;\n }\n \n \/* error message styling *\/\n #calculator .error-msg {\n font-size: 12px;\n color: var(--error-color);\n margin-top: 5px;\n display: none;\n line-height: 1.2;\n }\n \n #calculator .error-msg.visible {\n display: block;\n }\n \n \/* result area *\/\n #calculator .result-area {\n background: white;\n margin: 20px 0 24px 0;\n padding: 18px 16px;\n text-align: center;\n border-left: 4px solid var(--primary-color);\n box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n }\n \n #calculator .result-label {\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-color);\n margin-bottom: 8px;\n }\n \n #calculator .result-value {\n font-size: 40px;\n font-weight: 800;\n font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n color: var(--primary-color);\n line-height: 1.1;\n word-break: break-word;\n }\n \n #calculator .calculation-detail {\n font-size: 12px;\n font-family: monospace;\n color: #6b7280;\n margin-top: 8px;\n border-top: 1px solid #ececec;\n padding-top: 6px;\n }\n \n \/* button group: horizontal flex on PC *\/\n #calculator .button-group {\n display: flex;\n flex-direction: row;\n gap: 16px;\n margin-top: 8px;\n }\n \n #calculator button {\n flex: 1;\n height: 36px;\n font-size: 14px;\n font-weight: 600;\n border: none;\n border-radius: 0;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n \n #calculator .btn-primary {\n background: var(--primary-color);\n color: white;\n }\n \n #calculator .btn-primary:hover {\n background: var(--primary-hover);\n }\n \n #calculator .btn-secondary {\n background: #6c757d;\n color: white;\n }\n \n #calculator .btn-secondary:hover {\n background: #5a6268;\n }\n \n \/* mobile responsiveness (rem based, following spec) *\/\n @media (max-width: 768px) {\n #calculator .calculator-container {\n padding: 20px;\n max-width: 100%;\n }\n #calculator .calculator-input,\n #calculator .calculator-select,\n #calculator button,\n #calculator .inline-unit {\n height: 0.7rem;\n font-size: 0.28rem;\n line-height: 0.7rem;\n }\n #calculator .calculator-input,\n #calculator .calculator-select {\n height: 0.7rem;\n padding: 0 0.2rem;\n font-size: 0.28rem;\n }\n #calculator .input-unit-wrapper .calculator-input {\n padding-right: 1.8rem;\n }\n #calculator .calculator-input:focus,\n #calculator .calculator-select:focus {\n padding: 0 0.18rem;\n height: 0.7rem;\n }\n #calculator .input-unit-wrapper .calculator-input:focus {\n padding-right: 1.78rem;\n }\n #calculator .calculator-input.error-input,\n #calculator .calculator-select.error-input {\n padding: 0 0.18rem;\n height: 0.7rem;\n }\n #calculator .input-unit-wrapper .calculator-input.error-input {\n padding-right: 1.78rem;\n }\n #calculator label {\n font-size: 0.28rem;\n }\n #calculator .result-value {\n font-size: 0.7rem;\n }\n #calculator .result-label,\n #calculator .calculation-detail {\n font-size: 0.24rem;\n }\n #calculator .btn-primary,\n #calculator .btn-secondary {\n font-size: 0.28rem;\n height: 0.7rem;\n }\n #calculator .button-group {\n flex-direction: column;\n gap: 12px;\n }\n #calculator button {\n width: 100%;\n }\n #calculator .calculator-title {\n font-size: 0.5rem;\n }\n #calculator .calculator-subtitle {\n font-size: 0.24rem;\n }\n #calculator .inline-unit {\n font-size: 0.28rem;\n padding: 0 0.2rem;\n }\n \/* option text slightly smaller on mobile but consistent *\/\n #calculator .calculator-select option {\n font-size: 0.28rem;\n }\n }\n \n \/* error priority: error border overrides focus *\/\n #calculator .calculator-input.error-input:focus,\n #calculator .calculator-select.error-input:focus {\n border: 2px solid var(--error-color);\n }\n \n \/* remove any default spinner on number input *\/\n #calculator .calculator-input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n #calculator .calculator-input[type=\"number\"]::-webkit-inner-spin-button,\n #calculator .calculator-input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"calculator\">\n <div class=\"calculator-container\">\n \n \n \n <div class=\"input-group\">\n <label for=\"calculator-phi\">\u52d5\u7684\u8981\u56e0 <span class=\"var-symbol\">\u03c6<\/span><\/label>\n <select id=\"calculator-phi\" class=\"calculator-select\">\n <option value=\"1.1\">\ud83d\udd38 \u4f4e\u901f\uff0f\u8efd\u8ca0\u8377\uff0f\u7cbe\u5bc6\u5236\u5fa1 \u2192 \u03c6 = 1.10<\/option>\n <option value=\"1.2\">\ud83d\udd38 \u5f93\u6765\u578b\u5de5\u696d\u7528\uff08\u8efd\u5de5\u696d\uff09\u2192 \u03c6 = 1.20<\/option>\n <option value=\"1.25\" selected>\ud83d\udd38 \u5f93\u6765\u578b\u5de5\u696d\u7528\uff08\u4e2d\u578b\uff09\u2192 \u03c6 = 1.25<\/option>\n <option value=\"1.3\">\ud83d\udd38 \u5f93\u6765\u578b\u7523\u696d\uff08\u91cd\u5de5\u696d\uff09\u2192 \u03c6 = 1.30<\/option>\n <option value=\"1.4\">\ud83d\udd38 \u91cd\u8377\u91cd\uff0f\u904e\u9177\u306a\u4f7f\u7528\u74b0\u5883 \u2192 \u03c6 = 1.40<\/option>\n <option value=\"1.5\">\ud83d\udd38\u9ad8\u885d\u6483\/\u30df\u30eb\u30c7\u30e5\u30fc\u30c6\u30a3\u30fc \u2192 \u03c6 = 1.50<\/option>\n <option value=\"1.6\">\ud83d\udd38\u6975\u5ea6\u306e\u885d\u6483\uff0f\u904e\u9177\u306a\u4f7f\u7528\u6761\u4ef6 \u2192 \u03c6 = 1.60<\/option>\n <\/select>\n <div class=\"error-msg\" id=\"error-phi\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-ratedLoad\">\u5b9a\u683c\u8377\u91cd <span class=\"var-symbol\">Q<\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-ratedLoad\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a20.0\" step=\"any\" value=\"20.0\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-ratedLoad\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-hookWeight\">\u30d5\u30c3\u30af\u3068\u53d6\u308a\u4ed8\u3051\u8cea\u91cf <span class=\"var-symbol\">Q<sub>h<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-hookWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a0.6\" step=\"any\" value=\"0.6\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-hookWeight\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-trolleyWeight\">\u30c8\u30ed\u30ea\u30fc\u306e\u81ea\u91cd <span class=\"var-symbol\">\u30b0<sub>t<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-trolleyWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a5.4\" step=\"any\" value=\"5.4\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-trolleyWeight\"><\/div>\n <\/div>\n\n \n <div class=\"result-area\">\n <div class=\"result-label\">\u52d5\u7684\u8ca0\u8377\u7d50\u679c <span>\u30dd<sub>d<\/sub><\/span><\/div>\n <div class=\"result-value\" id=\"calculator-result\">\u2014 kN<\/div>\n <div class=\"calculation-detail\" id=\"calc-detail\"><\/div>\n <\/div>\n\n \n <div class=\"button-group\">\n <button id=\"calculator-calcBtn\" class=\"btn-primary\">\u8a08\u7b97\u3059\u308b<\/button>\n <button id=\"calculator-resetBtn\" class=\"btn-secondary\">\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ DOM references\n const phiSelect = document.getElementById('calculator-phi');\n const ratedLoadInput = document.getElementById('calculator-ratedLoad');\n const hookWeightInput = document.getElementById('calculator-hookWeight');\n const trolleyWeightInput = document.getElementById('calculator-trolleyWeight');\n const calcBtn = document.getElementById('calculator-calcBtn');\n const resetBtn = document.getElementById('calculator-resetBtn');\n const resultSpan = document.getElementById('calculator-result');\n const calcDetailSpan = document.getElementById('calc-detail');\n \n \/\/ error message containers\n const errorPhi = document.getElementById('error-phi');\n const errorRated = document.getElementById('error-ratedLoad');\n const errorHook = document.getElementById('error-hookWeight');\n const errorTrolley = document.getElementById('error-trolleyWeight');\n \n \/\/ input fields for validation\n const inputFields = [\n { element: ratedLoadInput, errorDiv: errorRated, name: 'Rated load' },\n { element: hookWeightInput, errorDiv: errorHook, name: 'Hook & attachment mass' },\n { element: trolleyWeightInput, errorDiv: errorTrolley, name: 'Trolley self-weight' }\n ];\n const selectField = { element: phiSelect, errorDiv: errorPhi, name: 'Dynamic factor' };\n \n \/\/ conversion factor: tonnes -> kN\n const TON_TO_KN = 9.80665;\n \n \/\/ Helper: clear error for a single input (remove class, hide message)\n function clearErrorForInput(inputEl, errorDiv) {\n if (inputEl) inputEl.classList.remove('error-input');\n if (errorDiv) errorDiv.classList.remove('visible');\n }\n \n \/\/ set error for single input\n function setErrorForInput(inputEl, errorDiv, message) {\n if (inputEl) inputEl.classList.add('error-input');\n if (errorDiv) {\n errorDiv.textContent = message || 'Invalid value';\n errorDiv.classList.add('visible');\n }\n }\n \n \/\/ clear all errors\n function clearAllErrors() {\n inputFields.forEach(field => {\n clearErrorForInput(field.element, field.errorDiv);\n });\n clearErrorForInput(selectField.element, selectField.errorDiv);\n }\n \n \/\/ validate single numeric input (non-empty, valid number >=0)\n function validateSingleInput(value, fieldName) {\n if (value === undefined || value === null || value === '') {\n return { valid: false, message: `${fieldName} cannot be empty.` };\n }\n const num = parseFloat(value);\n if (isNaN(num)) {\n return { valid: false, message: `${fieldName} must be a valid number.` };\n }\n if (num < 0) {\n return { valid: false, message: `${fieldName} cannot be negative.` };\n }\n return { valid: true, value: num };\n }\n \n \/\/ validate phi select\n function validatePhi() {\n const phiVal = phiSelect.value;\n const num = parseFloat(phiVal);\n if (isNaN(num)) {\n return { valid: false, message: 'Dynamic factor must be a valid number.' };\n }\n if (num <= 0) {\n return { valid: false, message: '\u03c6 must be greater than 0.' };\n }\n return { valid: true, value: num };\n }\n \n \/\/ main validation routine\n function validateAllInputs() {\n let isValid = true;\n \n \/\/ Validate rated load\n const ratedRaw = ratedLoadInput.value;\n const ratedCheck = validateSingleInput(ratedRaw, 'Rated load');\n if (!ratedCheck.valid) {\n setErrorForInput(ratedLoadInput, errorRated, ratedCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(ratedLoadInput, errorRated);\n }\n \n \/\/ Validate hook weight\n const hookRaw = hookWeightInput.value;\n const hookCheck = validateSingleInput(hookRaw, 'Hook & attachment mass');\n if (!hookCheck.valid) {\n setErrorForInput(hookWeightInput, errorHook, hookCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(hookWeightInput, errorHook);\n }\n \n \/\/ Validate trolley weight\n const trolleyRaw = trolleyWeightInput.value;\n const trolleyCheck = validateSingleInput(trolleyRaw, 'Trolley self-weight');\n if (!trolleyCheck.valid) {\n setErrorForInput(trolleyWeightInput, errorTrolley, trolleyCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(trolleyWeightInput, errorTrolley);\n }\n \n \/\/ Validate phi\n const phiCheck = validatePhi();\n if (!phiCheck.valid) {\n setErrorForInput(phiSelect, errorPhi, phiCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(phiSelect, errorPhi);\n }\n \n if (isValid) {\n return {\n valid: true,\n Q: parseFloat(ratedLoadInput.value),\n Qh: parseFloat(hookWeightInput.value),\n Gt: parseFloat(trolleyWeightInput.value),\n phi: parseFloat(phiSelect.value)\n };\n } else {\n return { valid: false };\n }\n }\n \n \/\/ compute and update result (2 decimals)\n function computeAndDisplay() {\n const validation = validateAllInputs();\n if (!validation.valid) {\n resultSpan.textContent = '-- kN';\n calcDetailSpan.textContent = '';\n return;\n }\n \n const { Q, Qh, Gt, phi } = validation;\n const sumTon = Q + Qh + Gt;\n const dynamicTonForce = phi * sumTon;\n const dynamicKN = dynamicTonForce * TON_TO_KN;\n const roundedKN = Math.round(dynamicKN * 100) \/ 100;\n resultSpan.textContent = roundedKN.toFixed(2) + ' kN';\n \n \/\/ detail expression: consistent formatting\n const sumFixed = sumTon.toFixed(3);\n const phiFixed = phi.toFixed(3);\n calcDetailSpan.innerHTML = `${phiFixed} \u00d7 (${Q.toFixed(2)} + ${Qh.toFixed(2)} + ${Gt.toFixed(2)}) t = ${phiFixed} \u00d7 ${sumFixed} t = ${dynamicTonForce.toFixed(3)} t \u2192 ${roundedKN.toFixed(2)} kN`;\n }\n \n \/\/ reset all inputs to default values, clear errors & reset result\n function resetCalculator() {\n ratedLoadInput.value = '20.0';\n hookWeightInput.value = '0.6';\n trolleyWeightInput.value = '5.4';\n phiSelect.value = '1.25'; \/\/ medium duty default\n \n clearAllErrors();\n \n \/\/ reset result display\n resultSpan.textContent = '-- kN';\n calcDetailSpan.textContent = '';\n \n \/\/ additionally, remove error classes from all inputs (already cleared, but ensure)\n inputFields.forEach(field => {\n field.element.classList.remove('error-input');\n });\n if (phiSelect) phiSelect.classList.remove('error-input');\n }\n \n \/\/ setup dynamic error clearing on input\/change\n function setupDynamicErrorClearing() {\n ratedLoadInput.addEventListener('input', function() {\n clearErrorForInput(ratedLoadInput, errorRated);\n });\n hookWeightInput.addEventListener('input', function() {\n clearErrorForInput(hookWeightInput, errorHook);\n });\n trolleyWeightInput.addEventListener('input', function() {\n clearErrorForInput(trolleyWeightInput, errorTrolley);\n });\n phiSelect.addEventListener('change', function() {\n clearErrorForInput(phiSelect, errorPhi);\n });\n }\n \n \/\/ calculate action\n function onCalculate() {\n computeAndDisplay();\n }\n \n \/\/ reset action\n function onReset() {\n resetCalculator();\n }\n \n \/\/ initialization\n function init() {\n setupDynamicErrorClearing();\n calcBtn.addEventListener('click', onCalculate);\n resetBtn.addEventListener('click', onReset);\n \/\/ initial compute with default values (shows result on page load)\n computeAndDisplay();\n }\n \n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n })();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\">\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u5f0f<\/h2>\n\n\n\n<p>\u30dd<sub>d<\/sub>=\u03c6(Q+Q<sub>h<\/sub>+G<sub>t<\/sub>)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30dd<sub>d<\/sub>: \u52d5\u7684\u8ca0\u8377<\/li>\n\n\n\n<li>\u03c6\uff1a\u30a4\u30f3\u30d1\u30af\u30c8\u30d5\u30a1\u30af\u30bf\u30fc<\/li>\n\n\n\n<li>Q\uff1a\u5b9a\u683c\u8377\u91cd<\/li>\n\n\n\n<li>Q<sub>h<\/sub>\u30d5\u30c3\u30af\u3068\u540a\u308a\u4e0a\u3052\u30a2\u30bf\u30c3\u30c1\u30e1\u30f3\u30c8\u306e\u91cd\u91cf<\/li>\n\n\n\n<li>\u30b0<sub>t<\/sub>\u30c8\u30ed\u30ea\u30fc\u306e\u81ea\u91cd<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6ce8\u8a18<\/h2>\n\n\n\n<p>\u5b9f\u969b\u306e\u30af\u30ec\u30fc\u30f3\u64cd\u4f5c\u3067\u306f\u3001\u30af\u30ec\u30fc\u30f3\u306b\u304b\u304b\u308b\u529b\u306f\u5e38\u306b\u9759\u8377\u91cd\u3088\u308a\u3082\u5927\u304d\u304f\u306a\u308a\u307e\u3059\u3002\u540a\u308a\u4e0a\u3052\u3084\u59cb\u52d5\u6642\u306e\u885d\u6483\u3001\u5236\u52d5\u6642\u306e\u6163\u6027\u3001\u30e2\u30fc\u30bf\u30fc\u52a0\u901f\u306b\u3088\u308b\u632f\u52d5\u3001\u305d\u3057\u3066\u8377\u7269\u306e\u63fa\u308c\u306b\u3088\u308b\u52d5\u7684\u306a\u529b\u306a\u3069\u304c\u5897\u5e45\u3055\u308c\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u8a08\u7b97\u6642\u306b\u306f\u3053\u308c\u3089\u306e\u8981\u56e0\u306b\u52d5\u8377\u91cd\u4fc2\u6570\u3092\u4e57\u3058\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f4e\u901f\u3001\u8efd\u8ca0\u8377\u6761\u4ef6\u307e\u305f\u306f\u7cbe\u5bc6\u5236\u5fa1\u306e\u5834\u5408\u3001\u03c6=1.1<\/li>\n\n\n\n<li>\u5f93\u6765\u306e\u7523\u696d\u7528\u30af\u30ec\u30fc\u30f3\u3067\u306f\u3001\u03c6=1.2-1.3<\/li>\n\n\n\n<li>\u904e\u9177\u306a\u4f5c\u696d\u74b0\u5883\u3084\u53b3\u3057\u3044\u4f5c\u696d\u6761\u4ef6\u3001\u3042\u308b\u3044\u306f\u5927\u304d\u306a\u5f71\u97ff\u3092\u4f34\u3046\u904b\u8ee2\u72b6\u614b\u3067\u306f\u3001\u03c6=1.4\uff5e1.6\u3068\u306a\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9069\u7528\u53ef\u80fd\u306a\u30af\u30ec\u30fc\u30f3<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5929\u4e95\u30af\u30ec\u30fc\u30f3<\/li>\n\n\n\n<li>\u30b0\u30ca\u30c8\u30ea\u30fc\u30fb\u30af\u30ec\u30fc\u30f3<\/li>\n\n\n\n<li>\u96fb\u52d5\u30c8\u30ed\u30ea\u30fc\uff0f\u30db\u30a4\u30b9\u30c8<\/li>\n\n\n\n<li>\u6e2f\u6e7e\u30af\u30ec\u30fc\u30f3<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9069\u7528\u3067\u304d\u306a\u3044\u72b6\u6cc1<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ad8\u901f\u56de\u8ee2\u6a5f\u68b0\uff08\u30bf\u30fc\u30d3\u30f3\u3001\u30a8\u30f3\u30b8\u30f3\uff09<\/li>\n\n\n\n<li>\u7cbe\u5bc6\u5de5\u4f5c\u6a5f\u68b0\u30b9\u30d4\u30f3\u30c9\u30eb\u30b7\u30b9\u30c6\u30e0<\/li>\n\n\n\n<li>\u30a4\u30f3\u30c6\u30ea\u30b8\u30a7\u30f3\u30c8\u6607\u964d\u30b7\u30b9\u30c6\u30e0\uff08\u81ea\u52d5\u63fa\u308c\u9632\u6b62\u5236\u5fa1\uff09<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u30c4\u30fc\u30eb\u306e\u6838\u5fc3\u7684\u306a\u4fa1\u5024\u306f\u3001\u9759\u7684\u540a\u308a\u4e0a\u3052\u91cd\u91cf\u3060\u3051\u3067\u306a\u304f\u3001\u5b9f\u969b\u306e\u904b\u8ee2\u3067\u767a\u751f\u3059\u308b\u8ffd\u52a0\u8377\u91cd\u3092\u53cd\u6620\u3055\u305b\u308b\u3053\u3068\u306b\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u5dfb\u304d\u4e0a\u3052\u958b\u59cb\u3001\u5236\u52d5\u3001\u8d70\u884c\u885d\u6483\u3001\u632f\u52d5\u3001\u8377\u7269\u306e\u63fa\u308c\u3068\u3044\u3063\u305f\u52d5\u7684\u6319\u52d5\u304c\u30af\u30ec\u30fc\u30f3\u306e\u69cb\u9020\u3084\u6a5f\u69cb\u306b\u4e0e\u3048\u308b\u5f71\u97ff\u3092\u6b63\u78ba\u306b\u8a55\u4fa1\u3067\u304d\u307e\u3059\u3002\u30e1\u30a4\u30f3\u30ac\u30fc\u30c0\u30fc\u306e\u5f37\u5ea6\u3068\u305f\u308f\u307f\u306e\u30c1\u30a7\u30c3\u30af\u3001\u30a8\u30f3\u30c9\u30d3\u30fc\u30e0\u306e\u5727\u529b\u3068\u30ec\u30fc\u30eb\u306e\u5fdc\u529b\u89e3\u6790\u3001\u30e2\u30fc\u30bf\u30fc\u3001\u30d6\u30ec\u30fc\u30ad\u3001\u305d\u306e\u4ed6\u306e\u91cd\u8981\u90e8\u54c1\u306e\u578b\u5f0f\u9078\u5b9a\u3068\u5b89\u5168\u6027\u306e\u691c\u8a3c\u3092\u52b9\u679c\u7684\u306b\u30b5\u30dd\u30fc\u30c8\u3057\u3001ISO\u3001FEM\u3001EN\u3001GB\u898f\u683c\u306b\u6e96\u62e0\u3057\u305f\u5929\u4e95\u30af\u30ec\u30fc\u30f3\u304a\u3088\u3073\u30ac\u30f3\u30c8\u30ea\u30fc\u30af\u30ec\u30fc\u30f3\u306e\u69cb\u9020\u8a2d\u8a08\u3001\u8010\u7528\u5e74\u6570\u8a55\u4fa1\u3001\u5b89\u5168\u8a8d\u8a3c\u306e\u91cd\u8981\u306a\u57fa\u790e\u3068\u306a\u308a\u307e\u3059\u3002","protected":false},"author":8,"featured_media":17038,"parent":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"single-onlinetools.php","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[63],"tags":[],"class_list":["post-17030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030"}],"collection":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/comments?post=17030"}],"version-history":[{"count":6,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030\/revisions"}],"predecessor-version":[{"id":17039,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030\/revisions\/17039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/media\/17038"}],"wp:attachment":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/media?parent=17030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/categories?post=17030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/tags?post=17030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17030,"date":"2026-05-22T01:39:17","date_gmt":"2026-05-22T01:39:17","guid":{"rendered":"https:\/\/www.dgcrane.com\/?p=17030"},"modified":"2026-05-22T01:59:01","modified_gmt":"2026-05-22T01:59:01","slug":"crane-dynamic-loading-calculator","status":"publish","type":"post","link":"https:\/\/www.dgcrane.com\/ja\/crane-dynamic-loading-calculator\/","title":{"rendered":"\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u30c4\u30fc\u30eb"},"content":{"rendered":"\n\n\n \n \n \u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u6a5f | P_d = \u03c6\u00b7(Q+Q_h+G_t)<\/title>\n <style>\n \/* all styles are strictly scoped inside #calculator *\/\n #calculator {\n --primary-color: #0a3487;\n --primary-hover: #F58423;\n --error-color: #e53935;\n --bg-color: #EAEEF7;\n --text-color: #4a4a4a;\n \n display: block;\n width: 100%;\n background: var(--bg-color);\n font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\n color: var(--text-color);\n }\n \n \/* container for PC max-width & padding *\/\n #calculator .calculator-container {\n max-width: 545px;\n padding: 30px;\n margin: 0 auto;\n background: var(--bg-color);\n box-sizing: border-box;\n }\n \n \/* typography *\/\n #calculator .calculator-title {\n font-size: 24px;\n font-weight: 600;\n margin: 0 0 4px 0;\n color: var(--primary-color);\n letter-spacing: -0.2px;\n }\n \n #calculator .calculator-subtitle {\n font-size: 14px;\n margin: 0 0 24px 0;\n font-family: monospace;\n background: rgba(10,52,135,0.08);\n display: inline-block;\n padding: 4px 12px;\n border-radius: 0;\n color: var(--primary-color);\n }\n \n \/* input groups *\/\n #calculator .input-group {\n margin-bottom: 20px;\n width: 100%;\n position: relative;\n }\n \n #calculator label {\n display: block;\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 6px;\n color: var(--text-color);\n }\n \n #calculator .var-symbol {\n font-family: monospace;\n font-weight: 700;\n background: rgba(0,0,0,0.04);\n padding: 0px 4px;\n border-radius: 0;\n margin-left: 4px;\n }\n \n \/* wrapper for input + inline unit (unit placed inside input field on the right) *\/\n #calculator .input-unit-wrapper {\n position: relative;\n width: 100%;\n }\n \n #calculator .input-unit-wrapper .calculator-input {\n width: 100%;\n padding-right: 104px;\n }\n \n #calculator .inline-unit {\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 500;\n color: #aaaaaa;\n background: transparent;\n padding: 0 8px;\n height: auto;\n line-height: 1;\n white-space: nowrap;\n font-family: monospace;\n pointer-events: none;\n box-sizing: border-box;\n }\n \n \/* select styling \u2014 no unit after select *\/\n #calculator .calculator-input,\n #calculator .calculator-select {\n width: 100%;\n height: 36px;\n padding: 0 12px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 0;\n background: white;\n font-family: 'Segoe UI', 'SF Mono', monospace;\n color: #333;\n transition: all 0.2s ease;\n box-sizing: border-box;\n }\n \n #calculator .calculator-select {\n cursor: pointer;\n appearance: none;\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%234a4a4a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>');\n background-repeat: no-repeat;\n background-position: right 12px center;\n background-size: 14px;\n }\n \n \/* ensure dropdown options have consistent font and spacing *\/\n #calculator .calculator-select option {\n font-size: 14px;\n padding: 8px;\n font-family: 'Segoe UI', 'SF Mono', monospace;\n line-height: 1.4;\n color: #333;\n }\n \n #calculator .calculator-input:focus,\n #calculator .calculator-select:focus {\n outline: none;\n border: 2px solid var(--primary-color);\n padding: 0 11px;\n height: 36px;\n }\n \n #calculator .input-unit-wrapper .calculator-input:focus {\n padding-right: 103px;\n }\n \n \/* error state: border 2px solid error-color *\/\n #calculator .calculator-input.error-input,\n #calculator .calculator-select.error-input {\n border: 2px solid var(--error-color);\n padding: 0 11px;\n height: 36px;\n }\n \n #calculator .input-unit-wrapper .calculator-input.error-input {\n padding-right: 103px;\n }\n \n \/* error message styling *\/\n #calculator .error-msg {\n font-size: 12px;\n color: var(--error-color);\n margin-top: 5px;\n display: none;\n line-height: 1.2;\n }\n \n #calculator .error-msg.visible {\n display: block;\n }\n \n \/* result area *\/\n #calculator .result-area {\n background: white;\n margin: 20px 0 24px 0;\n padding: 18px 16px;\n text-align: center;\n border-left: 4px solid var(--primary-color);\n box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n }\n \n #calculator .result-label {\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-color);\n margin-bottom: 8px;\n }\n \n #calculator .result-value {\n font-size: 40px;\n font-weight: 800;\n font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n color: var(--primary-color);\n line-height: 1.1;\n word-break: break-word;\n }\n \n #calculator .calculation-detail {\n font-size: 12px;\n font-family: monospace;\n color: #6b7280;\n margin-top: 8px;\n border-top: 1px solid #ececec;\n padding-top: 6px;\n }\n \n \/* button group: horizontal flex on PC *\/\n #calculator .button-group {\n display: flex;\n flex-direction: row;\n gap: 16px;\n margin-top: 8px;\n }\n \n #calculator button {\n flex: 1;\n height: 36px;\n font-size: 14px;\n font-weight: 600;\n border: none;\n border-radius: 0;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n \n #calculator .btn-primary {\n background: var(--primary-color);\n color: white;\n }\n \n #calculator .btn-primary:hover {\n background: var(--primary-hover);\n }\n \n #calculator .btn-secondary {\n background: #6c757d;\n color: white;\n }\n \n #calculator .btn-secondary:hover {\n background: #5a6268;\n }\n \n \/* mobile responsiveness (rem based, following spec) *\/\n @media (max-width: 768px) {\n #calculator .calculator-container {\n padding: 20px;\n max-width: 100%;\n }\n #calculator .calculator-input,\n #calculator .calculator-select,\n #calculator button,\n #calculator .inline-unit {\n height: 0.7rem;\n font-size: 0.28rem;\n line-height: 0.7rem;\n }\n #calculator .calculator-input,\n #calculator .calculator-select {\n height: 0.7rem;\n padding: 0 0.2rem;\n font-size: 0.28rem;\n }\n #calculator .input-unit-wrapper .calculator-input {\n padding-right: 1.8rem;\n }\n #calculator .calculator-input:focus,\n #calculator .calculator-select:focus {\n padding: 0 0.18rem;\n height: 0.7rem;\n }\n #calculator .input-unit-wrapper .calculator-input:focus {\n padding-right: 1.78rem;\n }\n #calculator .calculator-input.error-input,\n #calculator .calculator-select.error-input {\n padding: 0 0.18rem;\n height: 0.7rem;\n }\n #calculator .input-unit-wrapper .calculator-input.error-input {\n padding-right: 1.78rem;\n }\n #calculator label {\n font-size: 0.28rem;\n }\n #calculator .result-value {\n font-size: 0.7rem;\n }\n #calculator .result-label,\n #calculator .calculation-detail {\n font-size: 0.24rem;\n }\n #calculator .btn-primary,\n #calculator .btn-secondary {\n font-size: 0.28rem;\n height: 0.7rem;\n }\n #calculator .button-group {\n flex-direction: column;\n gap: 12px;\n }\n #calculator button {\n width: 100%;\n }\n #calculator .calculator-title {\n font-size: 0.5rem;\n }\n #calculator .calculator-subtitle {\n font-size: 0.24rem;\n }\n #calculator .inline-unit {\n font-size: 0.28rem;\n padding: 0 0.2rem;\n }\n \/* option text slightly smaller on mobile but consistent *\/\n #calculator .calculator-select option {\n font-size: 0.28rem;\n }\n }\n \n \/* error priority: error border overrides focus *\/\n #calculator .calculator-input.error-input:focus,\n #calculator .calculator-select.error-input:focus {\n border: 2px solid var(--error-color);\n }\n \n \/* remove any default spinner on number input *\/\n #calculator .calculator-input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n #calculator .calculator-input[type=\"number\"]::-webkit-inner-spin-button,\n #calculator .calculator-input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"calculator\">\n <div class=\"calculator-container\">\n \n \n \n <div class=\"input-group\">\n <label for=\"calculator-phi\">\u52d5\u7684\u8981\u56e0 <span class=\"var-symbol\">\u03c6<\/span><\/label>\n <select id=\"calculator-phi\" class=\"calculator-select\">\n <option value=\"1.1\">\ud83d\udd38 \u4f4e\u901f\uff0f\u8efd\u8ca0\u8377\uff0f\u7cbe\u5bc6\u5236\u5fa1 \u2192 \u03c6 = 1.10<\/option>\n <option value=\"1.2\">\ud83d\udd38 \u5f93\u6765\u578b\u5de5\u696d\u7528\uff08\u8efd\u5de5\u696d\uff09\u2192 \u03c6 = 1.20<\/option>\n <option value=\"1.25\" selected>\ud83d\udd38 \u5f93\u6765\u578b\u5de5\u696d\u7528\uff08\u4e2d\u578b\uff09\u2192 \u03c6 = 1.25<\/option>\n <option value=\"1.3\">\ud83d\udd38 \u5f93\u6765\u578b\u7523\u696d\uff08\u91cd\u5de5\u696d\uff09\u2192 \u03c6 = 1.30<\/option>\n <option value=\"1.4\">\ud83d\udd38 \u91cd\u8377\u91cd\uff0f\u904e\u9177\u306a\u4f7f\u7528\u74b0\u5883 \u2192 \u03c6 = 1.40<\/option>\n <option value=\"1.5\">\ud83d\udd38\u9ad8\u885d\u6483\/\u30df\u30eb\u30c7\u30e5\u30fc\u30c6\u30a3\u30fc \u2192 \u03c6 = 1.50<\/option>\n <option value=\"1.6\">\ud83d\udd38\u6975\u5ea6\u306e\u885d\u6483\uff0f\u904e\u9177\u306a\u4f7f\u7528\u6761\u4ef6 \u2192 \u03c6 = 1.60<\/option>\n <\/select>\n <div class=\"error-msg\" id=\"error-phi\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-ratedLoad\">\u5b9a\u683c\u8377\u91cd <span class=\"var-symbol\">Q<\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-ratedLoad\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a20.0\" step=\"any\" value=\"20.0\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-ratedLoad\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-hookWeight\">\u30d5\u30c3\u30af\u3068\u53d6\u308a\u4ed8\u3051\u8cea\u91cf <span class=\"var-symbol\">Q<sub>h<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-hookWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a0.6\" step=\"any\" value=\"0.6\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-hookWeight\"><\/div>\n <\/div>\n\n \n <div class=\"input-group\">\n <label for=\"calculator-trolleyWeight\">\u30c8\u30ed\u30ea\u30fc\u306e\u81ea\u91cd <span class=\"var-symbol\">\u30b0<sub>t<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-trolleyWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\uff1a5.4\" step=\"any\" value=\"5.4\">\n <span class=\"inline-unit\">\u30c8\u30f3\uff08t\uff09<\/span>\n <\/div>\n <div class=\"error-msg\" id=\"error-trolleyWeight\"><\/div>\n <\/div>\n\n \n <div class=\"result-area\">\n <div class=\"result-label\">\u52d5\u7684\u8ca0\u8377\u7d50\u679c <span>\u30dd<sub>d<\/sub><\/span><\/div>\n <div class=\"result-value\" id=\"calculator-result\">\u2014 kN<\/div>\n <div class=\"calculation-detail\" id=\"calc-detail\"><\/div>\n <\/div>\n\n \n <div class=\"button-group\">\n <button id=\"calculator-calcBtn\" class=\"btn-primary\">\u8a08\u7b97\u3059\u308b<\/button>\n <button id=\"calculator-resetBtn\" class=\"btn-secondary\">\u30ea\u30bb\u30c3\u30c8<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ DOM references\n const phiSelect = document.getElementById('calculator-phi');\n const ratedLoadInput = document.getElementById('calculator-ratedLoad');\n const hookWeightInput = document.getElementById('calculator-hookWeight');\n const trolleyWeightInput = document.getElementById('calculator-trolleyWeight');\n const calcBtn = document.getElementById('calculator-calcBtn');\n const resetBtn = document.getElementById('calculator-resetBtn');\n const resultSpan = document.getElementById('calculator-result');\n const calcDetailSpan = document.getElementById('calc-detail');\n \n \/\/ error message containers\n const errorPhi = document.getElementById('error-phi');\n const errorRated = document.getElementById('error-ratedLoad');\n const errorHook = document.getElementById('error-hookWeight');\n const errorTrolley = document.getElementById('error-trolleyWeight');\n \n \/\/ input fields for validation\n const inputFields = [\n { element: ratedLoadInput, errorDiv: errorRated, name: 'Rated load' },\n { element: hookWeightInput, errorDiv: errorHook, name: 'Hook & attachment mass' },\n { element: trolleyWeightInput, errorDiv: errorTrolley, name: 'Trolley self-weight' }\n ];\n const selectField = { element: phiSelect, errorDiv: errorPhi, name: 'Dynamic factor' };\n \n \/\/ conversion factor: tonnes -> kN\n const TON_TO_KN = 9.80665;\n \n \/\/ Helper: clear error for a single input (remove class, hide message)\n function clearErrorForInput(inputEl, errorDiv) {\n if (inputEl) inputEl.classList.remove('error-input');\n if (errorDiv) errorDiv.classList.remove('visible');\n }\n \n \/\/ set error for single input\n function setErrorForInput(inputEl, errorDiv, message) {\n if (inputEl) inputEl.classList.add('error-input');\n if (errorDiv) {\n errorDiv.textContent = message || 'Invalid value';\n errorDiv.classList.add('visible');\n }\n }\n \n \/\/ clear all errors\n function clearAllErrors() {\n inputFields.forEach(field => {\n clearErrorForInput(field.element, field.errorDiv);\n });\n clearErrorForInput(selectField.element, selectField.errorDiv);\n }\n \n \/\/ validate single numeric input (non-empty, valid number >=0)\n function validateSingleInput(value, fieldName) {\n if (value === undefined || value === null || value === '') {\n return { valid: false, message: `${fieldName} cannot be empty.` };\n }\n const num = parseFloat(value);\n if (isNaN(num)) {\n return { valid: false, message: `${fieldName} must be a valid number.` };\n }\n if (num < 0) {\n return { valid: false, message: `${fieldName} cannot be negative.` };\n }\n return { valid: true, value: num };\n }\n \n \/\/ validate phi select\n function validatePhi() {\n const phiVal = phiSelect.value;\n const num = parseFloat(phiVal);\n if (isNaN(num)) {\n return { valid: false, message: 'Dynamic factor must be a valid number.' };\n }\n if (num <= 0) {\n return { valid: false, message: '\u03c6 must be greater than 0.' };\n }\n return { valid: true, value: num };\n }\n \n \/\/ main validation routine\n function validateAllInputs() {\n let isValid = true;\n \n \/\/ Validate rated load\n const ratedRaw = ratedLoadInput.value;\n const ratedCheck = validateSingleInput(ratedRaw, 'Rated load');\n if (!ratedCheck.valid) {\n setErrorForInput(ratedLoadInput, errorRated, ratedCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(ratedLoadInput, errorRated);\n }\n \n \/\/ Validate hook weight\n const hookRaw = hookWeightInput.value;\n const hookCheck = validateSingleInput(hookRaw, 'Hook & attachment mass');\n if (!hookCheck.valid) {\n setErrorForInput(hookWeightInput, errorHook, hookCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(hookWeightInput, errorHook);\n }\n \n \/\/ Validate trolley weight\n const trolleyRaw = trolleyWeightInput.value;\n const trolleyCheck = validateSingleInput(trolleyRaw, 'Trolley self-weight');\n if (!trolleyCheck.valid) {\n setErrorForInput(trolleyWeightInput, errorTrolley, trolleyCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(trolleyWeightInput, errorTrolley);\n }\n \n \/\/ Validate phi\n const phiCheck = validatePhi();\n if (!phiCheck.valid) {\n setErrorForInput(phiSelect, errorPhi, phiCheck.message);\n isValid = false;\n } else {\n clearErrorForInput(phiSelect, errorPhi);\n }\n \n if (isValid) {\n return {\n valid: true,\n Q: parseFloat(ratedLoadInput.value),\n Qh: parseFloat(hookWeightInput.value),\n Gt: parseFloat(trolleyWeightInput.value),\n phi: parseFloat(phiSelect.value)\n };\n } else {\n return { valid: false };\n }\n }\n \n \/\/ compute and update result (2 decimals)\n function computeAndDisplay() {\n const validation = validateAllInputs();\n if (!validation.valid) {\n resultSpan.textContent = '-- kN';\n calcDetailSpan.textContent = '';\n return;\n }\n \n const { Q, Qh, Gt, phi } = validation;\n const sumTon = Q + Qh + Gt;\n const dynamicTonForce = phi * sumTon;\n const dynamicKN = dynamicTonForce * TON_TO_KN;\n const roundedKN = Math.round(dynamicKN * 100) \/ 100;\n resultSpan.textContent = roundedKN.toFixed(2) + ' kN';\n \n \/\/ detail expression: consistent formatting\n const sumFixed = sumTon.toFixed(3);\n const phiFixed = phi.toFixed(3);\n calcDetailSpan.innerHTML = `${phiFixed} \u00d7 (${Q.toFixed(2)} + ${Qh.toFixed(2)} + ${Gt.toFixed(2)}) t = ${phiFixed} \u00d7 ${sumFixed} t = ${dynamicTonForce.toFixed(3)} t \u2192 ${roundedKN.toFixed(2)} kN`;\n }\n \n \/\/ reset all inputs to default values, clear errors & reset result\n function resetCalculator() {\n ratedLoadInput.value = '20.0';\n hookWeightInput.value = '0.6';\n trolleyWeightInput.value = '5.4';\n phiSelect.value = '1.25'; \/\/ medium duty default\n \n clearAllErrors();\n \n \/\/ reset result display\n resultSpan.textContent = '-- kN';\n calcDetailSpan.textContent = '';\n \n \/\/ additionally, remove error classes from all inputs (already cleared, but ensure)\n inputFields.forEach(field => {\n field.element.classList.remove('error-input');\n });\n if (phiSelect) phiSelect.classList.remove('error-input');\n }\n \n \/\/ setup dynamic error clearing on input\/change\n function setupDynamicErrorClearing() {\n ratedLoadInput.addEventListener('input', function() {\n clearErrorForInput(ratedLoadInput, errorRated);\n });\n hookWeightInput.addEventListener('input', function() {\n clearErrorForInput(hookWeightInput, errorHook);\n });\n trolleyWeightInput.addEventListener('input', function() {\n clearErrorForInput(trolleyWeightInput, errorTrolley);\n });\n phiSelect.addEventListener('change', function() {\n clearErrorForInput(phiSelect, errorPhi);\n });\n }\n \n \/\/ calculate action\n function onCalculate() {\n computeAndDisplay();\n }\n \n \/\/ reset action\n function onReset() {\n resetCalculator();\n }\n \n \/\/ initialization\n function init() {\n setupDynamicErrorClearing();\n calcBtn.addEventListener('click', onCalculate);\n resetBtn.addEventListener('click', onReset);\n \/\/ initial compute with default values (shows result on page load)\n computeAndDisplay();\n }\n \n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n })();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\">\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u5f0f<\/h2>\n\n\n\n<p>\u30dd<sub>d<\/sub>=\u03c6(Q+Q<sub>h<\/sub>+G<sub>t<\/sub>)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30dd<sub>d<\/sub>: \u52d5\u7684\u8ca0\u8377<\/li>\n\n\n\n<li>\u03c6\uff1a\u30a4\u30f3\u30d1\u30af\u30c8\u30d5\u30a1\u30af\u30bf\u30fc<\/li>\n\n\n\n<li>Q\uff1a\u5b9a\u683c\u8377\u91cd<\/li>\n\n\n\n<li>Q<sub>h<\/sub>\u30d5\u30c3\u30af\u3068\u540a\u308a\u4e0a\u3052\u30a2\u30bf\u30c3\u30c1\u30e1\u30f3\u30c8\u306e\u91cd\u91cf<\/li>\n\n\n\n<li>\u30b0<sub>t<\/sub>\u30c8\u30ed\u30ea\u30fc\u306e\u81ea\u91cd<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6ce8\u8a18<\/h2>\n\n\n\n<p>\u5b9f\u969b\u306e\u30af\u30ec\u30fc\u30f3\u64cd\u4f5c\u3067\u306f\u3001\u30af\u30ec\u30fc\u30f3\u306b\u304b\u304b\u308b\u529b\u306f\u5e38\u306b\u9759\u8377\u91cd\u3088\u308a\u3082\u5927\u304d\u304f\u306a\u308a\u307e\u3059\u3002\u540a\u308a\u4e0a\u3052\u3084\u59cb\u52d5\u6642\u306e\u885d\u6483\u3001\u5236\u52d5\u6642\u306e\u6163\u6027\u3001\u30e2\u30fc\u30bf\u30fc\u52a0\u901f\u306b\u3088\u308b\u632f\u52d5\u3001\u305d\u3057\u3066\u8377\u7269\u306e\u63fa\u308c\u306b\u3088\u308b\u52d5\u7684\u306a\u529b\u306a\u3069\u304c\u5897\u5e45\u3055\u308c\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u8a08\u7b97\u6642\u306b\u306f\u3053\u308c\u3089\u306e\u8981\u56e0\u306b\u52d5\u8377\u91cd\u4fc2\u6570\u3092\u4e57\u3058\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f4e\u901f\u3001\u8efd\u8ca0\u8377\u6761\u4ef6\u307e\u305f\u306f\u7cbe\u5bc6\u5236\u5fa1\u306e\u5834\u5408\u3001\u03c6=1.1<\/li>\n\n\n\n<li>\u5f93\u6765\u306e\u7523\u696d\u7528\u30af\u30ec\u30fc\u30f3\u3067\u306f\u3001\u03c6=1.2-1.3<\/li>\n\n\n\n<li>\u904e\u9177\u306a\u4f5c\u696d\u74b0\u5883\u3084\u53b3\u3057\u3044\u4f5c\u696d\u6761\u4ef6\u3001\u3042\u308b\u3044\u306f\u5927\u304d\u306a\u5f71\u97ff\u3092\u4f34\u3046\u904b\u8ee2\u72b6\u614b\u3067\u306f\u3001\u03c6=1.4\uff5e1.6\u3068\u306a\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9069\u7528\u53ef\u80fd\u306a\u30af\u30ec\u30fc\u30f3<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5929\u4e95\u30af\u30ec\u30fc\u30f3<\/li>\n\n\n\n<li>\u30b0\u30ca\u30c8\u30ea\u30fc\u30fb\u30af\u30ec\u30fc\u30f3<\/li>\n\n\n\n<li>\u96fb\u52d5\u30c8\u30ed\u30ea\u30fc\uff0f\u30db\u30a4\u30b9\u30c8<\/li>\n\n\n\n<li>\u6e2f\u6e7e\u30af\u30ec\u30fc\u30f3<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9069\u7528\u3067\u304d\u306a\u3044\u72b6\u6cc1<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ad8\u901f\u56de\u8ee2\u6a5f\u68b0\uff08\u30bf\u30fc\u30d3\u30f3\u3001\u30a8\u30f3\u30b8\u30f3\uff09<\/li>\n\n\n\n<li>\u7cbe\u5bc6\u5de5\u4f5c\u6a5f\u68b0\u30b9\u30d4\u30f3\u30c9\u30eb\u30b7\u30b9\u30c6\u30e0<\/li>\n\n\n\n<li>\u30a4\u30f3\u30c6\u30ea\u30b8\u30a7\u30f3\u30c8\u6607\u964d\u30b7\u30b9\u30c6\u30e0\uff08\u81ea\u52d5\u63fa\u308c\u9632\u6b62\u5236\u5fa1\uff09<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"\u30af\u30ec\u30fc\u30f3\u52d5\u7684\u8377\u91cd\u8a08\u7b97\u30c4\u30fc\u30eb\u306e\u6838\u5fc3\u7684\u306a\u4fa1\u5024\u306f\u3001\u9759\u7684\u540a\u308a\u4e0a\u3052\u91cd\u91cf\u3060\u3051\u3067\u306a\u304f\u3001\u5b9f\u969b\u306e\u904b\u8ee2\u3067\u767a\u751f\u3059\u308b\u8ffd\u52a0\u8377\u91cd\u3092\u53cd\u6620\u3055\u305b\u308b\u3053\u3068\u306b\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u5dfb\u304d\u4e0a\u3052\u958b\u59cb\u3001\u5236\u52d5\u3001\u8d70\u884c\u885d\u6483\u3001\u632f\u52d5\u3001\u8377\u7269\u306e\u63fa\u308c\u3068\u3044\u3063\u305f\u52d5\u7684\u6319\u52d5\u304c\u30af\u30ec\u30fc\u30f3\u306e\u69cb\u9020\u3084\u6a5f\u69cb\u306b\u4e0e\u3048\u308b\u5f71\u97ff\u3092\u6b63\u78ba\u306b\u8a55\u4fa1\u3067\u304d\u307e\u3059\u3002\u30e1\u30a4\u30f3\u30ac\u30fc\u30c0\u30fc\u306e\u5f37\u5ea6\u3068\u305f\u308f\u307f\u306e\u30c1\u30a7\u30c3\u30af\u3001\u30a8\u30f3\u30c9\u30d3\u30fc\u30e0\u306e\u5727\u529b\u3068\u30ec\u30fc\u30eb\u306e\u5fdc\u529b\u89e3\u6790\u3001\u30e2\u30fc\u30bf\u30fc\u3001\u30d6\u30ec\u30fc\u30ad\u3001\u305d\u306e\u4ed6\u306e\u91cd\u8981\u90e8\u54c1\u306e\u578b\u5f0f\u9078\u5b9a\u3068\u5b89\u5168\u6027\u306e\u691c\u8a3c\u3092\u52b9\u679c\u7684\u306b\u30b5\u30dd\u30fc\u30c8\u3057\u3001ISO\u3001FEM\u3001EN\u3001GB\u898f\u683c\u306b\u6e96\u62e0\u3057\u305f\u5929\u4e95\u30af\u30ec\u30fc\u30f3\u304a\u3088\u3073\u30ac\u30f3\u30c8\u30ea\u30fc\u30af\u30ec\u30fc\u30f3\u306e\u69cb\u9020\u8a2d\u8a08\u3001\u8010\u7528\u5e74\u6570\u8a55\u4fa1\u3001\u5b89\u5168\u8a8d\u8a3c\u306e\u91cd\u8981\u306a\u57fa\u790e\u3068\u306a\u308a\u307e\u3059\u3002","protected":false},"author":8,"featured_media":17038,"parent":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"single-onlinetools.php","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[63],"tags":[],"class_list":["post-17030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030"}],"collection":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/comments?post=17030"}],"version-history":[{"count":6,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030\/revisions"}],"predecessor-version":[{"id":17039,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/posts\/17030\/revisions\/17039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/media\/17038"}],"wp:attachment":[{"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/media?parent=17030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/categories?post=17030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcrane.com\/ja\/wp-json\/wp\/v2\/tags?post=17030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}