＜Project-11 Calculator＞计算器 0.4 公制单位转换器 Metric Units Converter HTML JS

前言

这个参考的是时间转换器＜Project-11 Calculator＞计算器 0.1时间换算器 Time Conversion Calculator-CSDN博客，主要就是替换内容，相当于找不同。

改新内容

index.html 加了新页面链接

添加了 favicon.jpg 橘猫就当是我家老猫年轻照 midjourney created

app.py 添加route for 0.4

展示

完整代码

1. templates\converters\metric_converter.html

<!DOCTYPE html>
<!--metric_converter.html-->
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公制单位转换器</title><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><link rel="icon" href="{{ url_for('static', filename='favicon.jpg') }}" type="image/x-icon"><!-- 使用 Flask 的 url_for 函数来引用静态文件 -->
</head>
<div class="nav-buttons"><a href="#" onclick="history.back()">返回上一页</a><a href="{{ url_for('index') }}">返回主页</a>
</div><!-- 内容区 -->
<div class="content"><div class="calculator-container boxed-container"><h2 class="rendered">公制单位转换器</h2><!-- 改为"从"并统一输入框风格 --><label for="input_value">输入数值：</label><input type="number" id="input_value" class="styled-input" oninput="convertMetric()" placeholder="输入要转换的数值" required><!-- 单位选择按钮 --><div class="unit-buttons"><button type="button" class="unit-btn" onclick="selectUnit('quetta')">Quetta 昆 (Q)</button><button type="button" class="unit-btn" onclick="selectUnit('ronna')">Ronna 仑 (R)</button><button type="button" class="unit-btn" onclick="selectUnit('yotta')">Yotta 尧 (Y)</button><button type="button" class="unit-btn" onclick="selectUnit('zetta')">Zetta 泽 (Z)</button><button type="button" class="unit-btn" onclick="selectUnit('exa')">Exa 艾 (E)</button><button type="button" class="unit-btn" onclick="selectUnit('peta')">Peta 拍 (P)</button><button type="button" class="unit-btn" onclick="selectUnit('tera')">Tera 太 (T)</button><button type="button" class="unit-btn" onclick="selectUnit('giga')">Giga 吉 (G)</button><button type="button" class="unit-btn" onclick="selectUnit('mega')">Mega 兆 (M)</button><button type="button" class="unit-btn" onclick="selectUnit('kilo')">Kilo 千 (k)</button><button type="button" class="unit-btn" onclick="selectUnit('hecto')">Hecto 百 (h)</button><button type="button" class="unit-btn" onclick="selectUnit('deca')">Deca 十 (da)</button><button type="button" class="unit-btn" onclick="selectUnit('base')">Base 基本单位</button><button type="button" class="unit-btn" onclick="selectUnit('deci')">Deci 分 (d)</button><button type="button" class="unit-btn" onclick="selectUnit('centi')">Centi 厘 (c)</button><button type="button" class="unit-btn" onclick="selectUnit('milli')">Milli 毫 (m)</button><button type="button" class="unit-btn" onclick="selectUnit('micro')">Micro 微 (µ)</button><button type="button" class="unit-btn" onclick="selectUnit('nano')">Nano 纳 (n)</button><button type="button" class="unit-btn" onclick="selectUnit('pico')">Pico 皮 (p)</button><button type="button" class="unit-btn" onclick="selectUnit('femto')">Femto 飞 (f)</button><button type="button" class="unit-btn" onclick="selectUnit('atto')">Atto 阿 (a)</button><button type="button" class="unit-btn" onclick="selectUnit('zepto')">Zepto 仄 (z)</button><button type="button" class="unit-btn" onclick="selectUnit('yocto')">Yocto 幺 (y)</button><button type="button" class="unit-btn" onclick="selectUnit('ronto')">Ronto 柔 (r)</button><button type="button" class="unit-btn" onclick="selectUnit('quecto')">Quecto 渠 (q)</button></div><div class="button-container"><button class="clear-btn" onclick="clearFields()">清除</button></div><div class="centered"><h2>转换结果：</h2><div class="normaltable"><table><thead><tr><th>前缀</th><th>符号</th><th>换算值</th></tr></thead><tbody><tr><td>Quetta 昆</td><td>Q</td><td><span id="result_quetta">0</span></td></tr><tr><td>Ronna 仑</td><td>R</td><td><span id="result_ronna">0</span>   </td></tr><tr><td>Yotta 尧</td><td>Y</td><td><span id="result_yotta">0</span></td></tr><tr><td>Zetta 泽</td><td>Z</td><td><span id="result_zetta">0</span></td></tr><tr><td>Exa 艾</td><td>E</td><td><span id="result_exa">0</span></td></tr><tr><td>Peta 拍</td><td>P</td><td><span id="result_peta">0</span></td></tr><tr><td>Tera 太</td><td>T</td><td><span id="result_tera">0</span></td></tr><tr><td>Giga 吉</td><td>G</td><td id="result_giga">0</td></tr><tr><td>Mega 兆</td><td>M</td><td id="result_mega">0</td></tr><tr><td>Kilo 千</td><td>k</td><td id="result_kilo">0</td></tr><tr><td>Hecto 百</td><td>h</td><td id="result_hecto">0</td></tr><tr><td>Deca 十</td><td>da</td><td id="result_deca">0</td></tr><tr><td>Base 基数</td><td>-</td><td id="result_base">0</td></tr><tr><td>Deci 分</td><td>d</td><td id="result_deci">0</td></tr><tr><td>Centi 厘</td><td>c</td><td id="result_centi">0</td></tr><tr><td>Milli 毫</td><td>m</td><td id="result_milli">0</td></tr><tr><td>Micro 微</td><td>µ</td><td id="result_micro">0</td></tr><tr><td>Nano 纳</td><td>n</td><td id="result_nano">0</td></tr><tr><td>Pico 皮</td><td>p</td><td id="result_pico">0</td></tr><tr><td>Femto 飞</td><td>f</td><td id="result_femto">0</td></tr><tr><td>Atto 阿</td><td>a</td><td id="result_atto">0</td></tr><tr><td>Zepto 仄</td><td>z</td><td id="result_zepto">0</td></tr><tr><td>Yocto 幺</td><td>y</td><td id="result_yocto">0</td></tr><tr><td>Ronto 柔</td><td>r</td><td id="result_ronto">0</td></tr><tr><td>Quecto 渠</td><td>q</td><td id="result_quecto">0</td></tr></tbody></table></div></div></div><div class="description"><h2>公制单位换算说明</h2><p>公制前缀是国际单位制（SI）中用来表示单位的十进制倍数和分数的一组标准化前缀。这些前缀可以应用于任何SI基本单位（如米、克、秒等）和导出单位。</p><h3>如何使用公制单位转换器：</h3><ol><li>在输入框中输入您要转换的数值</li><li>选择您输入值的单位前缀（例如：千kilo-、兆mega-等）</li><li>点击"计算"按钮查看所有其他前缀的等效值</li></ol><h3>单位、符号和换算值说明</h3><div class="prettytable"><table><thead><tr><th>因数</th><th>前缀</th><th>符号</th><th class="description">数值</th><th>名称</th><th>中文名称</th></tr></thead><tbody><tr><td>10<sup>30</sup></td><td>quetta</td><td>Q</td><td>1 000 000 000 000 000 000 000 000 000 000</td><td>nonillion</td><td>昆</td></tr><tr><td>10<sup>27</sup></td><td>ronna</td><td>R</td><td>1 000 000 000 000 000 000 000 000 000</td><td>octillion</td><td>仑</td></tr><tr><td>10<sup>24</sup></td><td>yotta</td><td>Y</td><td>1 000 000 000 000 000 000 000 000</td><td>septillion</td><td>尧</td></tr><tr><td>10<sup>21</sup></td><td>zetta</td><td>Z</td><td>1 000 000 000 000 000 000 000</td><td>sextillion</td><td>泽</td></tr><tr><td>10<sup>18</sup></td><td>exa</td><td>E</td><td>1 000 000 000 000 000 000</td><td>quintillion</td><td>艾</td></tr><tr><td>10<sup>15</sup></td><td>peta</td><td>P</td><td>1 000 000 000 000 000</td><td>quadrillion</td><td>拍</td></tr><tr><td>10<sup>12</sup></td><td>tera</td><td>T</td><td>1 000 000 000 000</td><td>trillion</td><td>太</td></tr><tr><td>10<sup>9</sup></td><td>giga</td><td>G</td><td>1 000 000 000</td><td>billion</td><td>吉</td></tr><tr><td>10<sup>6</sup></td><td>mega</td><td>M</td><td>1 000 000</td><td>million</td><td>兆</td></tr><tr><td>10<sup>3</sup></td><td>kilo</td><td>k</td><td>1 000</td><td>thousand</td><td>千</td></tr><tr><td>10<sup>2</sup></td><td>hecto</td><td>h</td><td>100</td><td>hundred</td><td>百</td></tr><tr><td>10<sup>1</sup></td><td>deca</td><td>da</td><td>10</td><td>ten</td><td>十</td></tr><tr><td>10<sup>0</sup></td><td>-</td><td>-</td><td>1</td><td>one</td><td></td></tr><tr><td>10<sup>-1</sup></td><td>deci</td><td>d</td><td>0.1</td><td>tenth</td><td>分</td></tr><tr><td>10<sup>-2</sup></td><td>centi</td><td>c</td><td>0.01</td><td>hundredth</td><td>厘</td></tr><tr><td>10<sup>-3</sup></td><td>milli</td><td>m</td><td>0.001</td><td>thousandth</td><td>毫</td></tr><tr><td>10<sup>-6</sup></td><td>micro</td><td>µ</td><td>0.000 001</td><td>millionth</td><td>微</td></tr><tr><td>10<sup>-9</sup></td><td>nano</td><td>n</td><td>0.000 000 001</td><td>billionth</td><td>纳</td></tr><tr><td>10<sup>-12</sup></td><td>pico</td><td>p</td><td>0.000 000 000 001</td><td>trillionth</td><td>皮</td></tr><tr><td>10<sup>-15</sup></td><td>femto</td><td>f</td><td>0.000 000 000 000 001</td><td>quadrillionth</td><td>飞</td></tr><tr><td>10<sup>-18</sup></td><td>atto</td><td>a</td><td>0.000 000 000 000 000 001</td><td>quintillionth</td><td>阿</td></tr><tr><td>10<sup>-21</sup></td><td>zepto</td><td>z</td><td>0.000 000 000 000 000 000 001</td><td>sextillionth</td><td>仄</td></tr><tr><td>10<sup>-24</sup></td><td>yocto</td><td>y</td><td>0.000 000 000 000 000 000 000 001</td><td>septillionth</td><td>幺</td></tr><tr><td>10<sup>-27</sup></td><td>ronto</td><td>r</td><td>0.000 000 000 000 000 000 000 000 001</td><td>octillionth</td><td>柔</td></tr><tr><td>10<sup>-30</sup></td><td>quecto</td><td>q</td><td>0.000 000 000 000 000 000 000 000 000 001</td><td>nonillionth</td><td>渠</td></tr></tbody></table></div><div class="references"><h3>参考资料</h3><ul><li>International Bureau of Weights and Measures (BIPM) - <a href="https://www.bipm.org" target="_blank">The International System of Units (SI)</a></li><li>National Institute of Standards and Technology (NIST) - <a href="https://www.nist.gov/pml/weights-and-measures/metric-si-prefixes" target="_blank">Metric (SI) Prefixes</a></li></ul></div></div>
</div>
<script src="{{ url_for('static', filename='metric_converter/metric_converter.js') }}"></script>
<!--ref. https://www.calculatorsoup.com/calculators/conversions/metricunits.php-->>
</body>
</html>

2. static\metric_converter\metric_converter.js

// Initial default unit is base unit (no prefix)
let selectedUnit = 'base_unit';// Convert the input value based on selected prefix
function convertMetric() {const inputValue = parseFloat(document.getElementById('input_value').value) || 0;let totalValue = 0;// Convert input value to base unit valueswitch (selectedUnit) {case 'quetta': // Quetta (10^30)totalValue = inputValue * Math.pow(10, 30);break;case 'ronna': // Ronna (10^27)totalValue = inputValue * Math.pow(10, 27);break;case 'yotta': // Yotta (10^24)totalValue = inputValue * Math.pow(10, 24);break;case 'zetta': // Zetta (10^21)totalValue = inputValue * Math.pow(10, 21);break;case 'exa': // Exa (10^18)totalValue = inputValue * Math.pow(10, 18);break;case 'peta': // Peta (10^15)totalValue = inputValue * Math.pow(10, 15);break;case 'tera': // Tera (10^12)totalValue = inputValue * Math.pow(10, 12);break;case 'giga': // Giga (10^9)totalValue = inputValue * Math.pow(10, 9);break;case 'mega': // Mega (10^6)totalValue = inputValue * Math.pow(10, 6);break;case 'kilo': // Kilo (10^3)totalValue = inputValue * Math.pow(10, 3);break;case 'hecto': // Hecto (10^2)totalValue = inputValue * Math.pow(10, 2);break;case 'deca': // Deca (10^1)totalValue = inputValue * Math.pow(10, 1);break;case 'base': // Base unit (10^0)totalValue = inputValue;break;case 'deci': // Deci (10^-1)totalValue = inputValue * Math.pow(10, -1);break;case 'centi': // Centi (10^-2)totalValue = inputValue * Math.pow(10, -2);break;case 'milli': // Milli (10^-3)totalValue = inputValue * Math.pow(10, -3);break;case 'micro': // Micro (10^-6)totalValue = inputValue * Math.pow(10, -6);break;case 'nano': // Nano (10^-9)totalValue = inputValue * Math.pow(10, -9);break;case 'pico': // Pico (10^-12)totalValue = inputValue * Math.pow(10, -12);break;case 'femto': // Femto (10^-15)totalValue = inputValue * Math.pow(10, -15);break;case 'atto': // Atto (10^-18)totalValue = inputValue * Math.pow(10, -18);break;case 'zepto': // Zepto (10^-21)totalValue = inputValue * Math.pow(10, -21);break;case 'yocto': // Yocto (10^-24)totalValue = inputValue * Math.pow(10, -24);break;case 'ronto': // Ronto (10^-27)totalValue = inputValue * Math.pow(10, -27);break;case 'quecto': // Quecto (10^-30)totalValue = inputValue * Math.pow(10, -30);break;}// Calculate all prefix values from the base valueconst results = calculateMetricComponents(totalValue);updateUI(results);
}// Calculate all metric prefix values from base value
function calculateMetricComponents(base_unit) {return {quetta: base_unit * Math.pow(10, 30), // Quettaronna: base_unit * Math.pow(10, 27), // Ronnayotta: base_unit * Math.pow(10, 24), // Yottazetta: base_unit * Math.pow(10, 21), // Zettaexa: base_unit * Math.pow(10, 18), // Exapeta: base_unit * Math.pow(10, 15), // Petatera: base_unit * Math.pow(10, 12), // Teragiga: base_unit * Math.pow(10, 9),  // Gigamega: base_unit * Math.pow(10, 6),  // Megakilo: base_unit * Math.pow(10, 3),  // Kilohecto: base_unit * Math.pow(10, 2),  // Hectodeca: base_unit * Math.pow(10, 1), // Decabase: base_unit,                  // Base unitdeci: base_unit * Math.pow(10, -1),   // Decicenti: base_unit * Math.pow(10, -2),   // Centimilli: base_unit * Math.pow(10, -3),   // Millimicro: base_unit * Math.pow(10, -6),   // Micronano: base_unit * Math.pow(10, -9),   // Nanopico: base_unit * Math.pow(10, -12),  // Picofemto: base_unit * Math.pow(10, -15),  // Femtoatto: base_unit * Math.pow(10, -18),  // Attozepto: base_unit * Math.pow(10, -21),  // Zeptoyocto: base_unit * Math.pow(10, -24),  // Yoctoronto: base_unit * Math.pow(10, -27),  // Rontoquecto: base_unit * Math.pow(10, -30)   // Quecto};
}// Update the UI with calculated values
function updateUI(results) {// Update each result field with formatted numbersdocument.getElementById('result_quetta').textContent = results.quetta;document.getElementById('result_ronna').textContent = results.ronna;document.getElementById('result_yotta').textContent = results.yotta;document.getElementById('result_zetta').textContent = results.zetta;document.getElementById('result_exa').textContent = results.exa;document.getElementById('result_peta').textContent = results.peta;document.getElementById('result_tera').textContent = results.tera;document.getElementById('result_giga').textContent = results.giga;document.getElementById('result_mega').textContent = results.mega;document.getElementById('result_kilo').textContent = results.kilo;document.getElementById('result_hecto').textContent = results.hecto;document.getElementById('result_deca').textContent = results.deca;document.getElementById('result_base').textContent = results.base;document.getElementById('result_deci').textContent = results.deci;document.getElementById('result_centi').textContent = results.centi;document.getElementById('result_milli').textContent = results.milli;document.getElementById('result_micro').textContent = results.micro;document.getElementById('result_nano').textContent = results.nano;document.getElementById('result_pico').textContent = results.pico;document.getElementById('result_femto').textContent = results.femto;document.getElementById('result_atto').textContent = results.atto;document.getElementById('result_zepto').textContent = results.zepto;document.getElementById('result_yocto').textContent = results.yocto;document.getElementById('result_ronto').textContent = results.ronto;document.getElementById('result_quecto').textContent = results.quecto;
}// Set the selected unit and highlight the active button
function selectUnit(unit) {selectedUnit = unit;const buttons = document.querySelectorAll('.unit-btn');buttons.forEach(btn => {btn.classList.remove('active');if (btn.textContent.toLowerCase().includes(unit)) {btn.classList.add('active');}});convertMetric(); // Recalculate with new unit
}// Clear all fields and reset output
function clearFields() {document.getElementById('input_value').value = '';convertMetric(); // Recalculate to show zero values
}

3 index.html

<!DOCTYPE html>
<!-- index.html-->
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主页 - 单位换算工具</title><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><link rel="icon" href="static/favicon.jpg" type="image/x-icon"></head>
<body><div class="body"><div class="centered"><h1>单位换算工具</h1><p>请选择一个单位换算工具：</p></div><div class="content centered" ><ul class="tools-list"><li><a href="{{ url_for('time_converter') }}">时间换算器</a></li><li><a href="{{ url_for('work_hours') }}">工作小时计算器</a></li><li><a href="{{ url_for('age_calculator') }}">年龄计算器</a></li><!-- 您可以在这里添加更多链接到其他转换工具 --></ul></div><div class="content centered"><ul class="tools-list"><li><a href="{{ url_for('metric_converter') }}">公制单位转换器</a></li></div></div>
</body>
</html>

4. static\favicon.jpg

prompt: a long-haired orange cat face, centered on a plain white background. the cat face is vibrant and glossy, with a natural curve and a green stem. the focus is on the eyes of cat without additional elements or distractions

chatgpt: 完美创造了新的物种