\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668 | 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\">\u52a8\u6001\u56e0\u7d20 <span class=\"var-symbol\">\u03c6<\/span><\/label>\n <select id=\"calculator-phi\" class=\"calculator-select\">\n <option value=\"1.1\">\ud83d\udd38 \u4f4e\u901f\/\u8f7b\u8f7d\/\u7cbe\u5bc6\u63a7\u5236 \u2192 \u03c6 = 1.10<\/option>\n <option value=\"1.2\">\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u8f7b\u578b\uff09\u2192 \u03c6 = 1.20<\/option>\n <option value=\"1.25\" selected>\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u4e2d\u7b49\uff09\u2192 \u03c6 = 1.25<\/option>\n <option value=\"1.3\">\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u91cd\u578b\uff09\u2192 \u03c6 = 1.30<\/option>\n <option value=\"1.4\">\ud83d\udd38 \u91cd\u578b\/\u4e25\u82db\u5de5\u51b5 \u2192 \u03c6 = 1.40<\/option>\n <option value=\"1.5\">\ud83d\udd38\u9ad8\u51b2\u51fb\/\u8f67\u673a\u8d1f\u8377 \u2192 \u03c6 = 1.50<\/option>\n <option value=\"1.6\">\ud83d\udd38\u6781\u7aef\u51b2\u51fb\/\u4e25\u82db\u5de5\u51b5 \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\">\u989d\u5b9a\u8d1f\u8f7d <span class=\"var-symbol\">\u95ee<\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-ratedLoad\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c20.0\" step=\"any\" value=\"20.0\">\n <span class=\"inline-unit\">\u5428\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\">\u94a9\u5b50\u548c\u9644\u4ef6\u8d28\u91cf <span class=\"var-symbol\">\u95ee<sub>H<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-hookWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c0.6\" step=\"any\" value=\"0.6\">\n <span class=\"inline-unit\">\u5428\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\">\u624b\u63a8\u8f66\u81ea\u91cd <span class=\"var-symbol\">G<sub>\u5428<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-trolleyWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c5.4\" step=\"any\" value=\"5.4\">\n <span class=\"inline-unit\">\u5428\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\">\u52a8\u6001\u8d1f\u8f7d\u7ed3\u679c <span>\u78f7<sub>d<\/sub><\/span><\/div>\n <div class=\"result-value\" id=\"calculator-result\">\u2014\u5343\u725b<\/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\">\u8ba1\u7b97<\/button>\n <button id=\"calculator-resetBtn\" class=\"btn-secondary\">\u91cd\u7f6e<\/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\">\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668\u516c\u5f0f<\/h2>\n\n\n\n<p>\u78f7<sub>d<\/sub>=\u03c6(Q+Q<sub>H<\/sub>+G<sub>\u5428<\/sub>)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u78f7<sub>d<\/sub>\u52a8\u6001\u8d1f\u8f7d<\/li>\n\n\n\n<li>\u03c6\uff1a\u5f71\u54cd\u56e0\u5b50<\/li>\n\n\n\n<li>\u95ee\uff1a\u989d\u5b9a\u8d1f\u8f7d<\/li>\n\n\n\n<li>\u95ee<sub>H<\/sub>\uff1a\u540a\u94a9\u548c\u8d77\u91cd\u9644\u4ef6\u91cd\u91cf<\/li>\n\n\n\n<li>G<sub>\u5428<\/sub>\u624b\u63a8\u8f66\u81ea\u91cd<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b14\u8bb0<\/h2>\n\n\n\n<p>\u5728\u5b9e\u9645\u8d77\u91cd\u673a\u4f5c\u4e1a\u4e2d\uff0c\u4f5c\u7528\u5728\u5176\u4e0a\u7684\u529b\u59cb\u7ec8\u5927\u4e8e\u9759\u8f7d\u8377\u3002\u8d77\u5347\u548c\u542f\u52a8\u65f6\u7684\u51b2\u51fb\u3001\u5236\u52a8\u65f6\u7684\u60ef\u6027\u3001\u7535\u673a\u52a0\u901f\u5f15\u8d77\u7684\u632f\u52a8\u4ee5\u53ca\u8d1f\u8f7d\u6446\u52a8\u4ea7\u751f\u7684\u52a8\u6001\u529b\u90fd\u4f1a\u88ab\u653e\u5927\u3002\u56e0\u6b64\uff0c\u5728\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\uff0c\u8fd9\u4e9b\u56e0\u7d20\u9700\u8981\u4e58\u4ee5\u4e00\u4e2a\u52a8\u6001\u8f7d\u8377\u7cfb\u6570\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5bf9\u4e8e\u4f4e\u901f\u3001\u8f7b\u8f7d\u5de5\u51b5\u6216\u7cbe\u786e\u63a7\u5236\uff0c\u03c6=1.1<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u4f20\u7edf\u5de5\u4e1a\u8d77\u91cd\u673a\uff0c\u03c6=1.2-1.3<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u91cd\u8f7d\u6216\u6076\u52a3\u7684\u5de5\u4f5c\u6761\u4ef6\uff0c\u6216\u5177\u6709\u663e\u8457\u5f71\u54cd\u7684\u8fd0\u884c\u72b6\u6001\uff0c\u03c6=1.4-1.6<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9002\u7528\u8d77\u91cd\u673a<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6865\u5f0f\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u683c\u7eb3\u7279\u91cc\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u7535\u52a8\u53f0\u8f66\/\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u6e2f\u53e3\u8d77\u91cd\u673a<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e0d\u9002\u7528\u60c5\u51b5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ad8\u901f\u65cb\u8f6c\u673a\u68b0\uff08\u6da1\u8f6e\u673a\u3001\u53d1\u52a8\u673a\uff09<\/li>\n\n\n\n<li>\u7cbe\u5bc6\u673a\u5e8a\u4e3b\u8f74\u7cfb\u7edf<\/li>\n\n\n\n<li>\u667a\u80fd\u63d0\u5347\u7cfb\u7edf\uff08\u81ea\u52a8\u9632\u6447\u6446\u63a7\u5236\uff09<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668\u7684\u6838\u5fc3\u4ef7\u503c\u5728\u4e8e\u53cd\u6620\u5b9e\u9645\u8fd0\u884c\u4e2d\u4ea7\u751f\u7684\u989d\u5916\u8f7d\u8377\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u9759\u6001\u8d77\u91cd\u91cd\u91cf\uff0c\u4ece\u800c\u7cbe\u786e\u8bc4\u4f30\u8d77\u5347\u542f\u52a8\u3001\u5236\u52a8\u3001\u8fd0\u884c\u51b2\u51fb\u3001\u632f\u52a8\u548c\u8d1f\u8f7d\u6446\u52a8\u7b49\u52a8\u6001\u884c\u4e3a\u5bf9\u8d77\u91cd\u673a\u7ed3\u6784\u548c\u673a\u6784\u7684\u5f71\u54cd\u3002\u5b83\u6709\u6548\u652f\u6301\u4e3b\u6881\u5f3a\u5ea6\u548c\u6320\u5ea6\u6821\u6838\u3001\u7aef\u6881\u538b\u529b\u548c\u8f68\u9053\u5e94\u529b\u5206\u6790\uff0c\u4ee5\u53ca\u7535\u673a\u3001\u5236\u52a8\u5668\u548c\u5176\u4ed6\u5173\u952e\u90e8\u4ef6\u7684\u9009\u578b\u548c\u5b89\u5168\u9a8c\u8bc1\uff0c\u5e76\u4f5c\u4e3a\u7b26\u5408ISO\u3001FEM\u3001EN\u548cGB\u6807\u51c6\u7684\u6865\u5f0f\u8d77\u91cd\u673a\u548c\u95e8\u5f0f\u8d77\u91cd\u673a\u7ed3\u6784\u8bbe\u8ba1\u3001\u5bff\u547d\u8bc4\u4f30\u548c\u5b89\u5168\u8ba4\u8bc1\u7684\u91cd\u8981\u4f9d\u636e\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\/zh\/wp-json\/wp\/v2\/posts\/17030"}],"collection":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/comments?post=17030"}],"version-history":[{"count":6,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts\/17030\/revisions"}],"predecessor-version":[{"id":17039,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts\/17030\/revisions\/17039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/media\/17038"}],"wp:attachment":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/media?parent=17030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/categories?post=17030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/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\/zh\/crane-dynamic-loading-calculator\/","title":{"rendered":"\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668"},"content":{"rendered":"\n\n\n \n \n \u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668 | 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\">\u52a8\u6001\u56e0\u7d20 <span class=\"var-symbol\">\u03c6<\/span><\/label>\n <select id=\"calculator-phi\" class=\"calculator-select\">\n <option value=\"1.1\">\ud83d\udd38 \u4f4e\u901f\/\u8f7b\u8f7d\/\u7cbe\u5bc6\u63a7\u5236 \u2192 \u03c6 = 1.10<\/option>\n <option value=\"1.2\">\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u8f7b\u578b\uff09\u2192 \u03c6 = 1.20<\/option>\n <option value=\"1.25\" selected>\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u4e2d\u7b49\uff09\u2192 \u03c6 = 1.25<\/option>\n <option value=\"1.3\">\ud83d\udd38 \u4f20\u7edf\u5de5\u4e1a\uff08\u91cd\u578b\uff09\u2192 \u03c6 = 1.30<\/option>\n <option value=\"1.4\">\ud83d\udd38 \u91cd\u578b\/\u4e25\u82db\u5de5\u51b5 \u2192 \u03c6 = 1.40<\/option>\n <option value=\"1.5\">\ud83d\udd38\u9ad8\u51b2\u51fb\/\u8f67\u673a\u8d1f\u8377 \u2192 \u03c6 = 1.50<\/option>\n <option value=\"1.6\">\ud83d\udd38\u6781\u7aef\u51b2\u51fb\/\u4e25\u82db\u5de5\u51b5 \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\">\u989d\u5b9a\u8d1f\u8f7d <span class=\"var-symbol\">\u95ee<\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-ratedLoad\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c20.0\" step=\"any\" value=\"20.0\">\n <span class=\"inline-unit\">\u5428\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\">\u94a9\u5b50\u548c\u9644\u4ef6\u8d28\u91cf <span class=\"var-symbol\">\u95ee<sub>H<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-hookWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c0.6\" step=\"any\" value=\"0.6\">\n <span class=\"inline-unit\">\u5428\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\">\u624b\u63a8\u8f66\u81ea\u91cd <span class=\"var-symbol\">G<sub>\u5428<\/sub><\/span><\/label>\n <div class=\"input-unit-wrapper\">\n <input type=\"number\" id=\"calculator-trolleyWeight\" class=\"calculator-input\" placeholder=\"\u4f8b\u5982\uff0c5.4\" step=\"any\" value=\"5.4\">\n <span class=\"inline-unit\">\u5428\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\">\u52a8\u6001\u8d1f\u8f7d\u7ed3\u679c <span>\u78f7<sub>d<\/sub><\/span><\/div>\n <div class=\"result-value\" id=\"calculator-result\">\u2014\u5343\u725b<\/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\">\u8ba1\u7b97<\/button>\n <button id=\"calculator-resetBtn\" class=\"btn-secondary\">\u91cd\u7f6e<\/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\">\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668\u516c\u5f0f<\/h2>\n\n\n\n<p>\u78f7<sub>d<\/sub>=\u03c6(Q+Q<sub>H<\/sub>+G<sub>\u5428<\/sub>)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u78f7<sub>d<\/sub>\u52a8\u6001\u8d1f\u8f7d<\/li>\n\n\n\n<li>\u03c6\uff1a\u5f71\u54cd\u56e0\u5b50<\/li>\n\n\n\n<li>\u95ee\uff1a\u989d\u5b9a\u8d1f\u8f7d<\/li>\n\n\n\n<li>\u95ee<sub>H<\/sub>\uff1a\u540a\u94a9\u548c\u8d77\u91cd\u9644\u4ef6\u91cd\u91cf<\/li>\n\n\n\n<li>G<sub>\u5428<\/sub>\u624b\u63a8\u8f66\u81ea\u91cd<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b14\u8bb0<\/h2>\n\n\n\n<p>\u5728\u5b9e\u9645\u8d77\u91cd\u673a\u4f5c\u4e1a\u4e2d\uff0c\u4f5c\u7528\u5728\u5176\u4e0a\u7684\u529b\u59cb\u7ec8\u5927\u4e8e\u9759\u8f7d\u8377\u3002\u8d77\u5347\u548c\u542f\u52a8\u65f6\u7684\u51b2\u51fb\u3001\u5236\u52a8\u65f6\u7684\u60ef\u6027\u3001\u7535\u673a\u52a0\u901f\u5f15\u8d77\u7684\u632f\u52a8\u4ee5\u53ca\u8d1f\u8f7d\u6446\u52a8\u4ea7\u751f\u7684\u52a8\u6001\u529b\u90fd\u4f1a\u88ab\u653e\u5927\u3002\u56e0\u6b64\uff0c\u5728\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\uff0c\u8fd9\u4e9b\u56e0\u7d20\u9700\u8981\u4e58\u4ee5\u4e00\u4e2a\u52a8\u6001\u8f7d\u8377\u7cfb\u6570\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5bf9\u4e8e\u4f4e\u901f\u3001\u8f7b\u8f7d\u5de5\u51b5\u6216\u7cbe\u786e\u63a7\u5236\uff0c\u03c6=1.1<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u4f20\u7edf\u5de5\u4e1a\u8d77\u91cd\u673a\uff0c\u03c6=1.2-1.3<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u91cd\u8f7d\u6216\u6076\u52a3\u7684\u5de5\u4f5c\u6761\u4ef6\uff0c\u6216\u5177\u6709\u663e\u8457\u5f71\u54cd\u7684\u8fd0\u884c\u72b6\u6001\uff0c\u03c6=1.4-1.6<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u9002\u7528\u8d77\u91cd\u673a<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6865\u5f0f\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u683c\u7eb3\u7279\u91cc\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u7535\u52a8\u53f0\u8f66\/\u8d77\u91cd\u673a<\/li>\n\n\n\n<li>\u6e2f\u53e3\u8d77\u91cd\u673a<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e0d\u9002\u7528\u60c5\u51b5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ad8\u901f\u65cb\u8f6c\u673a\u68b0\uff08\u6da1\u8f6e\u673a\u3001\u53d1\u52a8\u673a\uff09<\/li>\n\n\n\n<li>\u7cbe\u5bc6\u673a\u5e8a\u4e3b\u8f74\u7cfb\u7edf<\/li>\n\n\n\n<li>\u667a\u80fd\u63d0\u5347\u7cfb\u7edf\uff08\u81ea\u52a8\u9632\u6447\u6446\u63a7\u5236\uff09<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"\u8d77\u91cd\u673a\u52a8\u6001\u8f7d\u8377\u8ba1\u7b97\u5668\u7684\u6838\u5fc3\u4ef7\u503c\u5728\u4e8e\u53cd\u6620\u5b9e\u9645\u8fd0\u884c\u4e2d\u4ea7\u751f\u7684\u989d\u5916\u8f7d\u8377\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u9759\u6001\u8d77\u91cd\u91cd\u91cf\uff0c\u4ece\u800c\u7cbe\u786e\u8bc4\u4f30\u8d77\u5347\u542f\u52a8\u3001\u5236\u52a8\u3001\u8fd0\u884c\u51b2\u51fb\u3001\u632f\u52a8\u548c\u8d1f\u8f7d\u6446\u52a8\u7b49\u52a8\u6001\u884c\u4e3a\u5bf9\u8d77\u91cd\u673a\u7ed3\u6784\u548c\u673a\u6784\u7684\u5f71\u54cd\u3002\u5b83\u6709\u6548\u652f\u6301\u4e3b\u6881\u5f3a\u5ea6\u548c\u6320\u5ea6\u6821\u6838\u3001\u7aef\u6881\u538b\u529b\u548c\u8f68\u9053\u5e94\u529b\u5206\u6790\uff0c\u4ee5\u53ca\u7535\u673a\u3001\u5236\u52a8\u5668\u548c\u5176\u4ed6\u5173\u952e\u90e8\u4ef6\u7684\u9009\u578b\u548c\u5b89\u5168\u9a8c\u8bc1\uff0c\u5e76\u4f5c\u4e3a\u7b26\u5408ISO\u3001FEM\u3001EN\u548cGB\u6807\u51c6\u7684\u6865\u5f0f\u8d77\u91cd\u673a\u548c\u95e8\u5f0f\u8d77\u91cd\u673a\u7ed3\u6784\u8bbe\u8ba1\u3001\u5bff\u547d\u8bc4\u4f30\u548c\u5b89\u5168\u8ba4\u8bc1\u7684\u91cd\u8981\u4f9d\u636e\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\/zh\/wp-json\/wp\/v2\/posts\/17030"}],"collection":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/comments?post=17030"}],"version-history":[{"count":6,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts\/17030\/revisions"}],"predecessor-version":[{"id":17039,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/posts\/17030\/revisions\/17039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/media\/17038"}],"wp:attachment":[{"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/media?parent=17030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/categories?post=17030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcrane.com\/zh\/wp-json\/wp\/v2\/tags?post=17030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}