前言
这个参考的是时间转换器 ＜Project-11 Calculator＞ 计算器 0.1时间换算器 Time Conversion Calculator-****博客，主要就是替换内容，相当于找不同。
改新内容
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 value
switch (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 value
const 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), // Quetta
ronna: base_unit * Math.pow(10, 27), // Ronna
yotta: base_unit * Math.pow(10, 24), // Yotta
zetta: base_unit * Math.pow(10, 21), // Zetta
exa: base_unit * Math.pow(10, 18), // Exa
peta: base_unit * Math.pow(10, 15), // Peta
tera: base_unit * Math.pow(10, 12), // Tera
giga: base_unit * Math.pow(10, 9), // Giga
mega: base_unit * Math.pow(10, 6), // Mega
kilo: base_unit * Math.pow(10, 3), // Kilo
hecto: base_unit * Math.pow(10, 2), // Hecto
deca: base_unit * Math.pow(10, 1), // Deca
base: base_unit, // Base unit
deci: base_unit * Math.pow(10, -1), // Deci
centi: base_unit * Math.pow(10, -2), // Centi
milli: base_unit * Math.pow(10, -3), // Milli
micro: base_unit * Math.pow(10, -6), // Micro
nano: base_unit * Math.pow(10, -9), // Nano
pico: base_unit * Math.pow(10, -12), // Pico
femto: base_unit * Math.pow(10, -15), // Femto
atto: base_unit * Math.pow(10, -18), // Atto
zepto: base_unit * Math.pow(10, -21), // Zepto
yocto: base_unit * Math.pow(10, -24), // Yocto
ronto: base_unit * Math.pow(10, -27), // Ronto
quecto: base_unit * Math.pow(10, -30) // Quecto
};
}
// Update the UI with calculated values
function updateUI(results) {
// Update each result field with formatted numbers
document.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: 完美创造了新的物种
