Spaces:
Sleeping
Sleeping
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>營養液成分計算機</title> | |
| <style> | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .fertilizer-list { | |
| margin-top: 20px; | |
| border: 1px solid #e0e0e0; | |
| padding: 20px; | |
| border-radius: 12px; | |
| background-color: #ffffff; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .fertilizer-list h2 { | |
| margin-top: 0; | |
| color: #2c3e50; | |
| border-bottom: 2px solid #eef2f7; | |
| padding-bottom: 12px; | |
| margin-bottom: 20px; | |
| font-size: 1.4em; | |
| } | |
| .fertilizer-list ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .fertilizer-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 16px; | |
| margin-bottom: 10px; | |
| background-color: #f8fafc; | |
| border: 1px solid #edf2f7; | |
| border-radius: 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .fertilizer-list li:hover { | |
| background-color: #edf2f7; | |
| transform: translateX(2px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .fertilizer-list .fertilizer-info { | |
| flex-grow: 1; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-right: 24px; | |
| min-width: 0; | |
| gap: 16px; | |
| } | |
| .fertilizer-list .formula { | |
| font-weight: 500; | |
| color: #2d3748; | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-size: 0.95em; | |
| } | |
| .fertilizer-list .amount { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 120px; | |
| justify-content: flex-end; | |
| } | |
| .fertilizer-list .amount-display { | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| background-color: #edf2f7; | |
| color: #4a5568; | |
| font-family: monospace; | |
| transition: all 0.2s ease; | |
| } | |
| .fertilizer-list .amount-display:hover { | |
| background-color: #e2e8f0; | |
| } | |
| .fertilizer-list .amount-input { | |
| width: 100px; | |
| padding: 4px 8px; | |
| border: 1px solid #cbd5e0; | |
| border-radius: 4px; | |
| text-align: right; | |
| font-family: monospace; | |
| } | |
| .fertilizer-list .edit-controls { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .fertilizer-list .edit-btn { | |
| padding: 4px 8px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.2s ease; | |
| } | |
| .fertilizer-list .save-btn { | |
| background-color: #48bb78; | |
| color: white; | |
| } | |
| .fertilizer-list .save-btn:hover { | |
| background-color: #38a169; | |
| } | |
| .fertilizer-list .cancel-btn { | |
| background-color: #a0aec0; | |
| color: white; | |
| } | |
| .fertilizer-list .cancel-btn:hover { | |
| background-color: #718096; | |
| } | |
| .fertilizer-list .remove-btn { | |
| background-color: #fc8181; | |
| color: white; | |
| border: none; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-size: 0.9em; | |
| } | |
| .fertilizer-list .remove-btn:hover { | |
| background-color: #f56565; | |
| } | |
| .no-fertilizers { | |
| text-align: center; | |
| color: #718096; | |
| font-style: italic; | |
| padding: 24px; | |
| background-color: #f7fafc; | |
| border-radius: 8px; | |
| border: 1px dashed #cbd5e0; | |
| } | |
| .result-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 20px; | |
| } | |
| .result-table th, .result-table td { | |
| border: 1px solid #ccc; | |
| padding: 8px; | |
| text-align: center; | |
| } | |
| .fertilizer-selector select { | |
| width: 100%; | |
| margin: 10px 0; | |
| max-height: 200px; | |
| } | |
| #fertilizer-search { | |
| width: 100%; | |
| padding: 8px; | |
| margin-bottom: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .test-btn { | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| transition: background-color 0.2s; | |
| position: relative; | |
| } | |
| .test-btn:hover { | |
| background-color: #2980b9; | |
| } | |
| .test-btn .tooltip { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px 0; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; /* Position the tooltip above the button */ | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .test-btn .tooltip::after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; /* At the bottom of the tooltip */ | |
| left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: #555 transparent transparent transparent; | |
| } | |
| .test-btn:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* 添加導航按鈕樣式 */ | |
| .nav-button { | |
| display: none; | |
| padding: 8px 16px; | |
| background-color: #4299e1; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-button:hover { | |
| background-color: #3182ce; | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .clear-btn { | |
| background-color: #e53e3e; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| transition: background-color 0.2s; | |
| } | |
| .clear-btn:hover { | |
| background-color: #c53030; | |
| } | |
| #export-container { | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: white; | |
| border: 1px solid #ccc; | |
| padding: 20px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>營養液成分計算機</h1> | |
| <!-- 隱藏導航按鈕，但保留功能 --> | |
| <a href="reverse-calculator.html" class="nav-button" style="display: none;">反向計算機</a> | |
| <!-- 肥料選擇區域 --> | |
| <div class="fertilizer-selector"> | |
| <h2>選擇肥料</h2> | |
| <button id="preset-button-1" onclick="loadPreset1()" class="test-btn"> | |
| 預設配方 1 | |
| <span class="tooltip">台中農改場萵苣配方</span> | |
| </button> | |
| <button id="preset-button-2" onclick="loadPreset2()" class="test-btn"> | |
| 預設配方 2 | |
| <span class="tooltip">現代田園與養液栽培 p526 葉菜通用基本養液</span> | |
| </button> | |
| <button id="preset-button-3" onclick="loadPreset3()" class="test-btn"> | |
| 預設配方 3 | |
| <span class="tooltip">Hoagland Solution</span> | |
| </button> | |
| <button id="clear-button" onclick="clearFormula()" class="clear-btn">清空配方</button> | |
| <button id="export-button" onclick="exportFormula()" class="test-btn">匯出配方</button> | |
| <div id="export-container" style="display: none;"> | |
| <textarea id="export-textarea" readonly style="width: 100%; height: 100px; margin-top: 10px;"></textarea> | |
| <button onclick="copyToClipboard()" class="test-btn">一鍵複製</button> | |
| </div> | |
| <input type="text" id="fertilizer-search" placeholder="輸入肥料名稱或分子式搜尋..."> | |
| <select id="fertilizer-select" size="5"> | |
| <option value="">請選擇肥料...</option> | |
| </select> | |
| <input type="number" id="amount" placeholder="輸入用量(mg/L)" step="0.1"> | |
| <button onclick="addFertilizer()">添加</button> | |
| </div> | |
| <!-- 已選擇肥料清單 --> | |
| <div class="fertilizer-list"> | |
| <h2>已選擇的肥料</h2> | |
| <ul id="selected-fertilizers"></ul> | |
| </div> | |
| <!-- 計算結果 --> | |
| <div class="calculation-results"> | |
| <h2>養分含量</h2> | |
| <table class="result-table"> | |
| <tr> | |
| <th>元素</th> | |
| <th>ppm</th> | |
| <th>meq/L</th> | |
| <th>mmol/L</th> | |
| </tr> | |
| <tbody id="results-body"> | |
| <!-- 結果將由JavaScript動態填充 --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script> | |
| // 添加名稱對應表 | |
| const fertilizerAliases = { | |
| 'Fe-EDTA·3H2O': 'C10H12FeN2NaO8·3H2O', | |
| '螯合鐵': 'C10H12FeN2NaO8·3H2O', | |
| '酒石酸鐵': 'C12H12Fe2O18', | |
| }; | |
| // 分子量對照表 | |
| const molecularWeights = { | |
| // 化合物 | |
| 'Ca(NO3)2·4H2O': 236.149920, // 40.078 + 2(14.0067 + 3*15.999) + 4(18.015340) | |
| 'KNO3': 101.102530, // 39.0983 + 14.0067 + 3*15.999 | |
| 'MgSO4·7H2O': 246.474780, // 24.305 + 32.065 + 4*15.999 + 7(18.015340) | |
| 'NH4H2PO4': 115.025738, // 14.0067 + 4*1.007940 + 30.973762 + 4*15.999 | |
| 'Ca(H2PO4)2·H2O': 252.082802, // 40.078 + 2(2*1.007940 + 30.973762 + 4*15.999) + 18.015340 | |
| 'C10H12FeN2NaO8·3H2O': 412.147420, // Fe-EDTA·3H2O: 10*12.0107 + 12*1.007940 + 55.845 + 2*14.0067 + 22.989770 + 8*15.999 + 3(18.015340) | |
| 'C12H12Fe2O18': 555.895680, // 12*12.0107 + 12*1.007940 + 2*55.845 + 18*15.999 | |
| 'H3BO3': 61.833220, // 3*1.007940 + 10.811 + 3*15.999 | |
| 'MnCl2·4H2O': 197.905360, // 54.938045 + 2*35.453 + 4(18.015340) | |
| 'ZnSO4·7H2O': 287.539780, // 65.38 + 32.065 + 4*15.999 + 7(18.015340) | |
| 'CuSO4·5H2O': 249.685700, // 63.546 + 32.065 + 4*15.999 + 5(18.015340) | |
| 'Na2MoO4·2H2O': 241.950680, // 2*22.989770 + 95.96 + 4*15.999 + 2(18.015340) | |
| 'KH2PO4': 136.085838, // 39.0983 + 2*1.007940 + 30.973762 + 4*15.999 | |
| 'Ca(NO3)2': 164.088400, // 40.078 + 2(14.0067 + 3*15.999) | |
| 'MgSO4': 120.366000, // 24.305 + 32.065 + 4*15.999 | |
| '(NH4)6Mo7O24·4H2O': 1235.86, // 6(14.0067 + 4*1.007940) + 7*95.96 + 24*15.999 + 4(2*1.007940 + 15.999) | |
| '(NH4)2MoO4': 196.0354, // (2 * (14.0067 + 4 * 1.00794)) + 95.96 + (4 * 15.999) | |
| 'H2MoO4·H2O': 178.95068, // 2*1.00794 + 95.96 + 4*15.999 + 18.01534 | |
| // 元素 | |
| 'N': 14.006700, | |
| 'P': 30.973762, | |
| 'K': 39.098300, | |
| 'Ca': 40.078000, | |
| 'Mg': 24.305000, | |
| 'S': 32.065000, | |
| 'Fe': 55.845000, | |
| 'Mn': 54.938045, | |
| 'Zn': 65.380000, | |
| 'Cu': 63.546000, | |
| 'B': 10.811000, | |
| 'Mo': 95.960000, | |
| 'Cl': 35.453000, | |
| // 常用計算值 | |
| 'H': 1.007940, | |
| 'O': 15.999000, | |
| 'Na': 22.989770, | |
| 'C': 12.010700, | |
| 'H2O': 18.015340 // 2*1.007940 + 15.999 | |
| }; | |
| // 肥料成分對照表（以重量比例表示） | |
| const fertilizerComposition = { | |
| // 大量元素肥料 | |
| 'Ca(NO3)2·4H2O': { | |
| 'Ca': 0.169715, // 40.078 / 236.149920 = 16.97% Ca | |
| 'N': 0.118721 // (2 * 14.0067) / 236.149920 = 11.87% N | |
| }, | |
| 'KNO3': { | |
| 'K': 0.386716, // 39.0983 / 101.102530 = 38.67% K | |
| 'N': 0.138486 // 14.0067 / 101.102530 = 13.85% N | |
| }, | |
| 'MgSO4·7H2O': { | |
| 'Mg': 0.098611, // 24.305 / 246.474780 = 9.86% Mg | |
| 'S': 0.130095 // 32.065 / 246.474780 = 13.01% S | |
| }, | |
| 'NH4H2PO4': { | |
| 'N': 0.121773, // 14.0067 / 115.025738 = 12.18% N | |
| 'P': 0.269278, // 30.973762 / 115.025738 = 26.93% P | |
| 'H': 0.035023 // (4 * 1.007940) / 115.025738 = 3.50% H | |
| }, | |
| 'Ca(H2PO4)2·H2O': { | |
| 'Ca': 0.158987, // 40.078 / 252.082802 = 15.90% Ca | |
| 'P': 0.245848, // (2 * 30.973762) / 252.082802 = 24.58% P | |
| 'H': 0.008000 // (4 * 1.007940) / 252.082802 = 0.80% H | |
| }, | |
| 'KH2PO4': { | |
| 'K': 0.287305, // 39.0983 / 136.085838 = 28.73% K | |
| 'P': 0.227605, // 30.973762 / 136.085838 = 22.76% P | |
| 'H': 0.014819 // (2 * 1.007940) / 136.085838 = 1.48% H | |
| }, | |
| 'Ca(NO3)2': { | |
| 'Ca': 0.244497, // 40.078 / 164.088400 = 24.45% Ca | |
| 'N': 0.170744 // (2 * 14.0067) / 164.088400 = 17.07% N | |
| }, | |
| 'MgSO4': { | |
| 'Mg': 0.201927, // 24.305 / 120.366000 = 20.19% Mg | |
| 'S': 0.266393 // 32.065 / 120.366000 = 26.64% S | |
| }, | |
| // 微量元素肥料 | |
| 'C10H12FeN2NaO8·3H2O': { | |
| 'Fe': 0.135498 // 55.845 / 412.147420 = 13.55% Fe | |
| }, | |
| 'C12H12Fe2O18': { | |
| 'Fe': 0.200919 // (2 * 55.845) / 555.895680 = 20.09% Fe | |
| }, | |
| 'H3BO3': { | |
| 'B': 0.174842 // 10.811 / 61.833220 = 17.48% B | |
| }, | |
| 'MnCl2·4H2O': { | |
| 'Mn': 0.277595, // 54.938045 / 197.905360 = 27.76% Mn | |
| 'Cl': 0.358521 // (2 * 35.453) / 197.905360 = 35.85% Cl | |
| }, | |
| 'ZnSO4·7H2O': { | |
| 'Zn': 0.227379, // 65.38 / 287.539780 = 22.74% Zn | |
| 'S': 0.111515 // 32.065 / 287.539780 = 11.15% S | |
| }, | |
| 'CuSO4·5H2O': { | |
| 'Cu': 0.254504, // 63.546 / 249.685700 = 25.45% Cu | |
| 'S': 0.128421 // 32.065 / 249.685700 = 12.84% S | |
| }, | |
| 'Na2MoO4·2H2O': { | |
| 'Mo': 0.396610, // 95.96 / 241.950680 = 39.66% Mo | |
| 'Na': 0.190037 // 2*22.989770 / 241.950680 = 19.00% Na | |
| }, | |
| '(NH4)6Mo7O24·4H2O': { | |
| 'N': 0.068033, // (6 * 14.0067) / 1235.86 = 6.80% N | |
| 'Mo': 0.543754 // (7 * 95.96) / 1235.86 = 54.38% Mo | |
| }, | |
| '(NH4)2MoO4': { | |
| 'N': 0.142935, // (2 * 14.0067) / 196.0354 = 14.29% N | |
| 'Mo': 0.489497 // (1 * 95.96) / 196.0354 = 48.95% Mo | |
| }, | |
| 'H2MoO4·H2O': { | |
| 'Mo': 0.536, // 95.96 / 178.95068 = 53.6% Mo | |
| } | |
| }; | |
| // 離子價數對照表（用於 meq 計算） | |
| const ionicCharges = { | |
| 'N': -1, // NO3- 形式 | |
| 'P': -1, // H2PO4- 形式 | |
| 'K': +1, // K+ 形式 | |
| 'Ca': +2, // Ca2+ 形式 | |
| 'Mg': +2, // Mg2+ 形式 | |
| 'S': -2, // SO4-2 形式 | |
| 'Fe': +2, // Fe2+ 形式 | |
| 'Mn': +2, // Mn2+ 形式 | |
| 'Zn': +2, // Zn2+ 形式 | |
| 'Cu': +2, // Cu2+ 形式 | |
| 'B': +3, // B3+ 形式 | |
| 'Mo': -2, // MoO4-2 形式 | |
| 'Cl': -1, // Cl- 形式 | |
| 'Na': +1 // Na+ 形式 | |
| }; | |
| const selectedFertilizers = []; | |
| // 定義肥料清單 | |
| const fertilizerList = [ | |
| { value: 'Ca(NO3)2·4H2O', label: '硝酸鈣（四水） Ca(NO3)2·4H2O' }, | |
| { value: 'NH4H2PO4', label: '磷酸一銨 NH4H2PO4' }, | |
| { value: 'MgSO4·7H2O', label: '硫酸鎂（七水） MgSO4·7H2O' }, | |
| { value: 'Ca(H2PO4)2·H2O', label: '磷酸一鈣（一水） Ca(H2PO4)2·H2O' }, | |
| { value: 'Ca(NO3)2', label: '硝酸鈣 Ca(NO3)2' }, | |
| { value: 'KNO3', label: '硝酸鉀 KNO3' }, | |
| { value: 'MgSO4', label: '硫酸鎂 MgSO4' }, | |
| { value: 'KH2PO4', label: '磷酸二氫鉀 KH2PO4' }, | |
| { value: 'Fe-EDTA·3H2O', label: '螯合鐵（Fe-EDTA·3H2O）' }, | |
| { value: 'C12H12Fe2O18', label: '酒石酸鐵（C12H12Fe2O18）' }, | |
| { value: 'H3BO3', label: '硼酸 H3BO3' }, | |
| { value: 'MnCl2·4H2O', label: '氯化錳（四水） MnCl2·4H2O' }, | |
| { value: 'ZnSO4·7H2O', label: '硫酸鋅（七水） ZnSO4·7H2O' }, | |
| { value: 'CuSO4·5H2O', label: '硫酸銅（五水） CuSO4·5H2O' }, | |
| { value: 'Na2MoO4·2H2O', label: '鉬酸鈉（二水） Na2MoO4·2H2O' }, | |
| { value: '(NH4)6Mo7O24·4H2O', label: '仲鉬酸銨（四水） (NH4)6Mo7O24·4H2O' }, | |
| { value: '(NH4)2MoO4', label: '鉬酸銨 (NH4)2MoO4' }, | |
| { value: 'H2MoO4·H2O', label: '鉬酸（一水） H2MoO4·H2O' } | |
| ]; | |
| // 初始化肥料選單 | |
| function initializeFertilizerSelect() { | |
| const select = document.getElementById('fertilizer-select'); | |
| updateFertilizerOptions(fertilizerList); | |
| } | |
| // 更新肥料選項 | |
| function updateFertilizerOptions(options) { | |
| const select = document.getElementById('fertilizer-select'); | |
| select.innerHTML = '<option value="">請選擇肥料...</option>'; | |
| options.forEach(option => { | |
| const optElement = document.createElement('option'); | |
| optElement.value = option.value; | |
| optElement.textContent = option.label; | |
| select.appendChild(optElement); | |
| }); | |
| } | |
| // 搜尋肥料 | |
| function searchFertilizers(searchText) { | |
| const filteredList = fertilizerList.filter(fertilizer => { | |
| const searchLower = searchText.toLowerCase(); | |
| return fertilizer.label.toLowerCase().includes(searchLower) || | |
| fertilizer.value.toLowerCase().includes(searchLower); | |
| }); | |
| updateFertilizerOptions(filteredList); | |
| } | |
| // 添加事件監聽器 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initializeFertilizerSelect(); | |
| const searchInput = document.getElementById('fertilizer-search'); | |
| searchInput.addEventListener('input', function(e) { | |
| searchFertilizers(e.target.value); | |
| }); | |
| // 添加鍵盤快捷鍵支援 | |
| const select = document.getElementById('fertilizer-select'); | |
| searchInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'ArrowDown') { | |
| e.preventDefault(); | |
| select.focus(); | |
| if (select.options.length > 0) { | |
| select.selectedIndex = 0; | |
| } | |
| } | |
| }); | |
| // 添加 Enter 鍵支援 | |
| const amountInput = document.getElementById('amount'); | |
| amountInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter') { | |
| addFertilizer(); | |
| } | |
| }); | |
| }); | |
| function addFertilizer() { | |
| const select = document.getElementById('fertilizer-select'); | |
| const amount = document.getElementById('amount').value; | |
| if (select.value && amount) { | |
| const existingIndex = selectedFertilizers.findIndex(f => f.formula === select.value); | |
| if (existingIndex !== -1) { | |
| // 如果存在，加上新的數量 | |
| selectedFertilizers[existingIndex].amount = roundNumber( | |
| selectedFertilizers[existingIndex].amount + parseFloat(amount) | |
| ); | |
| } else { | |
| // 如果不存在，新增一條 | |
| selectedFertilizers.push({ | |
| formula: select.value, | |
| amount: roundNumber(parseFloat(amount)) | |
| }); | |
| } | |
| document.getElementById('amount').value = ''; | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| } | |
| function updateFertilizerList() { | |
| const list = document.getElementById('selected-fertilizers'); | |
| list.innerHTML = ''; | |
| if (selectedFertilizers.length === 0) { | |
| const emptyMessage = document.createElement('div'); | |
| emptyMessage.className = 'no-fertilizers'; | |
| emptyMessage.textContent = '尚未添加任何肥料'; | |
| list.appendChild(emptyMessage); | |
| return; | |
| } | |
| selectedFertilizers.forEach((fert, index) => { | |
| const li = document.createElement('li'); | |
| const infoDiv = document.createElement('div'); | |
| infoDiv.className = 'fertilizer-info'; | |
| // 查找肥料的中文名稱 | |
| const fertilizerInfo = fertilizerList.find(f => f.value === fert.formula); | |
| const displayName = fertilizerInfo ? fertilizerInfo.label : fert.formula; | |
| const formula = document.createElement('span'); | |
| formula.className = 'formula'; | |
| formula.textContent = displayName; // 使用中文名稱 | |
| const amountContainer = document.createElement('div'); | |
| amountContainer.className = 'amount'; | |
| // 顯示用量的元素 | |
| const amountDisplay = document.createElement('span'); | |
| amountDisplay.className = 'amount-display'; | |
| amountDisplay.textContent = `${formatNumber(fert.amount)} mg/L`; | |
| amountDisplay.onclick = () => startEditing(amountContainer, fert, index); | |
| amountContainer.appendChild(amountDisplay); | |
| infoDiv.appendChild(formula); | |
| infoDiv.appendChild(amountContainer); | |
| const removeBtn = document.createElement('button'); | |
| removeBtn.className = 'remove-btn'; | |
| removeBtn.textContent = '移除'; | |
| removeBtn.onclick = () => { | |
| selectedFertilizers.splice(index, 1); | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| }; | |
| li.appendChild(infoDiv); | |
| li.appendChild(removeBtn); | |
| list.appendChild(li); | |
| }); | |
| } | |
| function startEditing(container, fert, index) { | |
| // 清空容器 | |
| container.innerHTML = ''; | |
| // 創建輸入框 | |
| const input = document.createElement('input'); | |
| input.type = 'number'; | |
| input.className = 'amount-input'; | |
| input.value = fert.amount; | |
| input.step = '0.001'; | |
| // 創建按鈕容器 | |
| const buttonContainer = document.createElement('div'); | |
| buttonContainer.className = 'edit-controls'; | |
| // 創建保存按鈕 | |
| const saveBtn = document.createElement('button'); | |
| saveBtn.className = 'edit-btn save-btn'; | |
| saveBtn.textContent = '✓'; | |
| saveBtn.onclick = () => { | |
| const newAmount = roundNumber(parseFloat(input.value)); | |
| if (newAmount > 0) { | |
| selectedFertilizers[index].amount = newAmount; | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| }; | |
| // 創建取消按鈕 | |
| const cancelBtn = document.createElement('button'); | |
| cancelBtn.className = 'edit-btn cancel-btn'; | |
| cancelBtn.textContent = '✕'; | |
| cancelBtn.onclick = () => { | |
| updateFertilizerList(); | |
| }; | |
| // 添加到容器 | |
| buttonContainer.appendChild(saveBtn); | |
| buttonContainer.appendChild(cancelBtn); | |
| container.appendChild(input); | |
| container.appendChild(buttonContainer); | |
| // 聚焦到輸入框 | |
| input.focus(); | |
| input.select(); | |
| // 添加鍵盤事件處理 | |
| input.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter') { | |
| saveBtn.click(); | |
| } else if (e.key === 'Escape') { | |
| cancelBtn.click(); | |
| } | |
| }); | |
| } | |
| function calculateNutrients() { | |
| const results = { | |
| 'N': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'P': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'K': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Ca': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Mg': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'S': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Fe': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Mn': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Zn': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Cu': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'B': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Mo': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Cl': { ppm: 0, meq: 0, mmol: 0 }, | |
| 'Na': { ppm: 0, meq: 0, mmol: 0 } | |
| }; | |
| selectedFertilizers.forEach(fert => { | |
| // 使用實際的化學式進行查找 | |
| const actualFormula = fertilizerAliases[fert.formula] || fert.formula; | |
| const composition = fertilizerComposition[actualFormula]; | |
| if (composition) { | |
| for (let element in composition) { | |
| if (results[element]) { | |
| // 計算 ppm (mg/L) | |
| const ppm = roundNumber(fert.amount * composition[element], 4); | |
| results[element].ppm += ppm; | |
| // 計算 mmol/L | |
| const mmol = roundNumber(ppm / molecularWeights[element], 6); | |
| results[element].mmol += mmol; | |
| // 計算 meq/L | |
| const meq = roundNumber(mmol * Math.abs(ionicCharges[element]), 6); | |
| results[element].meq += meq; | |
| } | |
| } | |
| } | |
| }); | |
| // 更新結果表格 | |
| const tbody = document.getElementById('results-body'); | |
| tbody.innerHTML = ''; | |
| Object.entries(results).forEach(([element, values]) => { | |
| const tr = document.createElement('tr'); | |
| // 在元素符號後添加離子電荷標示 | |
| const chargeSymbol = ionicCharges[element] > 0 ? | |
| `<sup>${ionicCharges[element]}+</sup>` : | |
| `<sup>${Math.abs(ionicCharges[element])}-</sup>`; | |
| tr.innerHTML = ` | |
| <td>${element}${chargeSymbol}</td> | |
| <td>${formatNumber(values.ppm, 4)}</td> | |
| <td>${formatNumber(values.meq, 6)}</td> | |
| <td>${formatNumber(values.mmol, 6)}</td> | |
| `; | |
| tbody.appendChild(tr); | |
| }); | |
| } | |
| function loadPreset1() { | |
| selectedFertilizers.length = 0; | |
| const preset1 = [ | |
| { formula: 'Ca(NO3)2·4H2O', amount: 94.0 }, | |
| { formula: 'KNO3', amount: 484.0 }, | |
| { formula: 'NH4H2PO4', amount: 62.0 }, | |
| { formula: 'MgSO4·7H2O', amount: 394.0 }, | |
| { formula: 'Ca(H2PO4)2·H2O', amount: 67.0 }, | |
| { formula: 'Fe-EDTA·3H2O', amount: 20.0 }, | |
| { formula: 'H3BO3', amount: 1.2 }, | |
| { formula: 'MnCl2·4H2O', amount: 0.72 }, | |
| { formula: 'ZnSO4·7H2O', amount: 0.09 }, | |
| { formula: 'CuSO4·5H2O', amount: 0.04 }, | |
| { formula: 'Na2MoO4·2H2O', amount: 0.01 } | |
| ]; | |
| selectedFertilizers.push(...preset1); | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| function loadPreset2() { | |
| selectedFertilizers.length = 0; | |
| const preset2 = [ | |
| { formula: 'Ca(NO3)2·4H2O', amount: 950.0 }, | |
| { formula: 'KNO3', amount: 800.0 }, | |
| { formula: 'NH4H2PO4', amount: 150.0 }, | |
| { formula: 'MgSO4·7H2O', amount: 500.0 }, | |
| { formula: 'Fe-EDTA·3H2O', amount: 16.0 }, | |
| { formula: 'H3BO3', amount: 1.2 }, | |
| { formula: 'MnCl2·4H2O', amount: 0.72 }, | |
| { formula: 'ZnSO4·7H2O', amount: 0.09 }, | |
| { formula: 'CuSO4·5H2O', amount: 0.04 }, | |
| { formula: '(NH4)2MoO4', amount: 0.01 } | |
| ]; | |
| selectedFertilizers.push(...preset2); | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| function loadPreset3() { | |
| selectedFertilizers.length = 0; | |
| const preset3 = [ | |
| { formula: 'KNO3', amount: 505.0 }, | |
| { formula: 'Ca(NO3)2·4H2O', amount: 1180.0 }, | |
| { formula: 'MgSO4·7H2O', amount: 493.0 }, | |
| { formula: 'KH2PO4', amount: 136.0 }, | |
| { formula: 'H3BO3', amount: 2.86 }, | |
| { formula: 'MnCl2·4H2O', amount: 1.81 }, | |
| { formula: 'ZnSO4·7H2O', amount: 0.22 }, | |
| { formula: 'CuSO4·5H2O', amount: 0.08 }, | |
| { formula: 'Na2MoO4·2H2O', amount: 0.12 }, | |
| { formula: 'C12H12Fe2O18', amount: 5.0 } | |
| ]; | |
| selectedFertilizers.push(...preset3); | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| function clearFormula() { | |
| selectedFertilizers.length = 0; | |
| updateFertilizerList(); | |
| calculateNutrients(); | |
| } | |
| // 精度處理工具函數 | |
| function roundNumber(value, precision = 3) { | |
| if (typeof value !== 'number' || isNaN(value)) return 0; | |
| const multiplier = Math.pow(10, precision); | |
| // 使用四捨六入五成雙規則 | |
| const roundedValue = Math.round(value * multiplier) / multiplier; | |
| return roundedValue; | |
| } | |
| // 格式化顯示數值 | |
| function formatNumber(value, precision = 3) { | |
| const roundedValue = roundNumber(value, precision); | |
| // 確保顯示指定的小數位數 | |
| return roundedValue.toFixed(precision); | |
| } | |
| function exportFormula() { | |
| const exportContainer = document.getElementById('export-container'); | |
| const exportTextarea = document.getElementById('export-textarea'); | |
| const formulaJson = JSON.stringify(selectedFertilizers, null, 2); | |
| exportTextarea.value = formulaJson; | |
| exportContainer.style.display = 'block'; | |
| // Add event listener to hide the export container when clicking outside | |
| document.addEventListener('click', handleClickOutside, true); | |
| } | |
| function copyToClipboard() { | |
| const exportTextarea = document.getElementById('export-textarea'); | |
| exportTextarea.select(); | |
| document.execCommand('copy'); | |
| alert('配方已複製到剪貼簿'); | |
| } | |
| function handleClickOutside(event) { | |
| const exportContainer = document.getElementById('export-container'); | |
| if (!exportContainer.contains(event.target)) { | |
| exportContainer.style.display = 'none'; | |
| document.removeEventListener('click', handleClickOutside, true); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |