前言
这是一个综合性的单位换算工具，提供了多种常用计量单位之间的转换功能。不断完善 style 各页面风格统一 ， 格式一致。
容量单位换算
- 支持在公制单位（升、毫升、立方厘米）
- 美制容量单位（加仑、夸脱、品脱、杯、液体盎司）
- 厨房计量单位（汤匙、茶匙、米杯）之间相互转换
长度单位换算
- 公制单位：毫米、厘米、分米、米
- 美制单位：英寸、英尺、码、英里
- 中国传统单位：厘、分、寸、尺、丈、里
温度单位换算
- 支持摄氏度(°C)
- 华氏度(°F)
- 开尔文(K)之间的转换
重量单位换算
- 公制重量：毫克、公克、公斤、公吨
- 美制重量：格令、打兰、盎司、磅、美吨(短吨)、英吨(长吨)
- 中国传统重量单位：分、钱、两、斤、担
气压单位换算
- 支持多种气压单位：巴(bar)、磅力/平方英寸(psi)、千帕(kPa)、标准大气压(atm)、毫米汞柱(mmHg)
特点：
- 界面简洁，操作简单
- 一次性显示所有转换结果
- 分组显示不同计量体系的单位
- 提供清除功能，方便重新输入
- 中英文单位名称显示
这个工具特别适合：
- 烹饪爱好者（在不同食谱单位间转换）
- 国际单位换算
- 工程日常计算
公制 - 美制 - 大中华 之间的：容量 长度 温度 重量 气压 之间的转换
| 公制 - 美制 - 大中华 单位间转换 | |
| 容量 | 升 加仑 汤匙 杯 等 |
| 长度 | 厘米 英寸 毫 厘 等 |
| 温度 | 摄氏 华氏 开尔文 |
| 重量 | 克 磅 大小吨 担 钱 两 等 |
| 气压 | PSI BAR mmHg 等 |
页面展示
其它部分更改
styles.css
完全理解这个文件为什么会越来越大
app.py
加了路由
新建文件
| liquid_measures.html 页面 |
| liquid_measures.js javascript |
| pressure-diagram.svg 这复制来的 因 AI 图不给力 |
| styles.css |
完整代码
1. app.py
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/converters/time')
def time_converter():# 渲染位于 templates/converters/time.html 的模板return render_template('converters/time.html')@app.route('/converters/agecal')
def age_calculator():# 渲染位于 templates/converters/age calculator 的模板return render_template('converters/agecal.html')@app.route('/converters/workhours')
def work_hours():return render_template('converters/workhours.html')@app.route('/coverters/metric_converter')
def metric_converter():return render_template('converters/metric_converter.html')@app.route('/coverters/liquid_measures')
def liquid_measures():return render_template('converters/liquid_measures.html')if __name__ == '__main__':app.run(host='0.0.0.0', port=9007, debug=True)
2. converters/liquid_measures.html
<!DOCTYPE html>
<!--liquid_measures.html-->
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><link rel="icon" href="{{ url_for('static', filename='favicon.jpg') }}" type="image/x-icon"><div class="nav-buttons"><a href="#" onclick="history.back()">返回上一页</a><a href="{{ url_for('index') }}">返回主页</a></div>
</head>
<body><!-- 内容区 --><div class="content"><div class="calculator-container boxed-container"><!-- 容量换算器 --><div class="calculator button_liqui boxed-container" id="liquid-calculator"><h2 class="rendered">容量单位换算器</h2><div class="input-group"><input type="number" id="liquid-value" placeholder="输入数值"><select id="liquid-unit"><optgroup label="公制单位"><option value="l">升(L)</option><option value="ml">毫升(mL)</option><option value="cm3">立方厘米(cm³)</option></optgroup><optgroup label="美制容量"><option value="gal">加仑(gal)</option><option value="qt">夸脱(qt)</option><option value="pt">品脱(pt)</option><option value="cup">杯(cup)</option><option value="floz">液体盎司(fl oz)</option></optgroup><optgroup label="厨房计量"><option value="tbsp">汤匙(tbsp)</option><option value="tsp">茶匙(tsp)</option><option value="rice_cup">米杯(mug)</option></optgroup></select><button class="convert-btn" onclick="convertLiquid()">转换</button><button class="clear-btn-liquid" onclick="clearLiquid()">清除</button></div><div id="liquid-results" class="results_liquid"></div></div><!-- 长度换算器 --><div class="calculator button_liqui boxed-container" id="length-calculator"><h2 class="rendered">长度单位换算器</h2><div class="input-group"><input type="number" id="length-value" placeholder="输入数值"><select id="length-unit"><optgroup label="公制单位"><option value="mm">毫米(mm)</option><option value="cm">厘米(cm)</option><option value="dm">分米(dm)</option><option value="m">米(m)</option></optgroup><optgroup label="英制单位"><option value="inch">英寸(inch)</option><option value="ft">英尺(ft)</option><option value="yd">码(yd)</option><option value="mi">英里(mi)</option></optgroup><optgroup label="大中华单位"><option value="cs_li">厘(li)</option><option value="cs_fen">分(fen)</option><option value="cs_in">寸(cun)</option><option value="cs_ft">尺(chi)</option><option value="cs_yd">丈(zhang)</option><option value="cs_mi">里(li)</option></optgroup></select><button class="convert-btn" onclick="convertLength()">转换</button><button class="clear-btn-liquid" onclick="clearLength()">清除</button></div><div id="length-results" class="results_liquid"></div></div><!-- 温度换算器 --><div class="calculator button_liqui boxed-container" id="temperature-calculator"><h2 class="rendered">温度单位换算器</h2><div class="input-group"><input type="number" id="temperature-value" placeholder="输入数值"><select id="temperature-unit"><option value="C">摄氏度(°C)</option><option value="F">华氏度(°F)</option><option value="K">开尔文(K)</option></select><button class="convert-btn" onclick="convertTemperature()">转换</button><button class="clear-btn-liquid" onclick="clearTemperature()">清除</button></div><div id="temperature-results" class="results_liquid"></div></div><!-- 重量换算器 --><div class="calculator button_liqui boxed-container" id="weights-calculator"><h2 class="rendered">重量单位换算器</h2><div class="input-group"><input type="number" id="weights-value" placeholder="输入数值"><select id="weights-unit"><optgroup label="公制重量单位"><option value="mg">毫克(mg)</option><option value="gram">公克(g)</option><option value="kg">公斤(kg)</option><option value="ton">公砘(t)</option> </optgroup><optgroup label="美制重量单位"><option value="gr">格令(gr)</option><option value="dram">打兰(dr)</option><option value="ounce">盎司(oz)</option><option value="lb">磅(lb)</option><option value="s_ton">美吨(短吨 ton)</option><option value="l_ton">英吨(长吨 ton)</option></optgroup> <optgroup label="大中华重量单位"><option value="wfen">分(fen)</option><option value="qian">钱(qian)</option><option value="liang">两(liang)</option><option value="jin">斤(jin)</option><option value="dan">担(dan)</option></optgroup></select><button class="convert-btn" onclick="convertWeight()">转换</button><button class="clear-btn-liquid" onclick="clearWeight()">清除</button></div><div id="weights-results" class="results_liquid"></div></div><!-- 气压换算器 --><div class="calculator button_liqui boxed-container" id="atm-calculator"><h2 class="rendered">气压换算器</h2><h3 class="rendered">气压单位换算关系图</h3><div class="svg-container"><img src="{{ url_for('static', filename='liquid_measures/pressure-diagram.svg') }}" alt="气压单位换算关系图" style="width: 100%; max-width: 500px; display: block; margin: 0 auto;"></div><div class="input-group"><input type="number" id="atm-value" placeholder="输入数值"><select id="atm-unit"><option value="bar">巴(bar)</option><option value="psi"> 磅力/平方英寸(psi)</option><option value="kpa">千帕(kPa)</option><option value="atm">标准大气压(atm)</option><option value="mmhg">毫米汞柱(mmHg)</option></select><button class="convert-btn" onclick="convertAtm()">转换</button><button class="clear-btn-liquid" onclick="clearAtm()">清除</button></div><div id="atm-results" class="results_liquid"></div></div> <div class="description"><p>将烹饪中液体和干性体积、重量、温度和长度的单位转换。转换可在美国标准和公制标准之间进行。</p><p>废弃或使用很少的英制液体单位没有加入。</p><p>保留四位小数，如果改 -> liquid_measures.js .toFixed() 值 0-4 即可</p><h3>参考资料/进一步阅读：</h3><ul><li><a href="http://www.goodcooking.com/conversions/liq_dry.htm">Good Cooking</a></li><li>美国国家标准与技术研究院（NIST）<a href="https://physics.nist.gov/cuu/pdf/sp811.pdf"><em>《国际单位制使用指南》</em></a>附录B，<a href="https://www.nist.gov/pml/special-publication-811/nist-guide-si-appendix-b-conversion-factors/nist-guide-si-appendix-b8">B.8 按字母顺序列出的单位因素</a> 和 <a href="https://www.nist.gov/pml/special-publication-811/nist-guide-si-appendix-b-conversion-factors/nist-guide-si-appendix-b9"> B.9按数量种类或科学领域列出的单位因素。</a></li><li>Lide, David R., Daniel (主编)。《CRC化学与物理手册》第89版，纽约：CRC出版社，2008年，第1-28页。</li><li>维基百科贡献者。<a href="https://en.wikipedia.org/wiki/Conversion_of_units">《单位换算》</a>维基百科，自由百科全书。维基百科，自由百科全书，最后访问时间：2011年6月26日。</li><li>维基百科贡献者。<a href="http://en.wikipedia.org/wiki/Cooking_weights_and_measures">《烹饪中的重量和度量单位》</a>维基百科，自由百科全书。维基百科，自由百科全书，最后访问时间：2011年6月29日。</li><li>后两个问AI 得到的换算关系</li><li>有个 bug 困半数时间，直到添加 toLowerCase() 在 liquid_measures.js line:293 299. 不然选中 mmHg 结果就是 NaN，还是没想通。可以试一下，是不是也这样，还是浏览器问题。</li></ul></div></div></div><!-- reference --><div class="description content"><script src="{{ url_for('static', filename='liquid_measures/liquid_measures.js') }}"></script><div class="references"><p>资料来源：</p><p><a href="https://www.goodcooking.com/conversions/liq_dry.htm" target="_blank">Good Cooking's Cooking Measure Converter</a></p><p><a href="https://www.calculatorsoup.com/calculators/conversions/cooking.php" target="_blank">Cooking Conversion Calculator</a></p></div></div></div></body>
</html>3. pressure-diagram.svg
<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg"><!-- Title --><!-- Central unit: mmHg --><circle cx="400" cy="250" r="70" fill="#4A90E2" opacity="0.2"/><circle cx="400" cy="250" r="65" fill="#4A90E2" opacity="0.1"/><text x="400" y="240" text-anchor="middle" font-size="20" fill="#333">mmHg</text><text x="400" y="265" text-anchor="middle" font-size="14" fill="#666">基准单位</text><!-- Surrounding units --><!-- ATM --><circle cx="400" cy="100" r="50" fill="#82C091" opacity="0.2"/><text x="400" y="95" text-anchor="middle" font-size="16" fill="#333">atm</text><text x="400" y="115" text-anchor="middle" font-size="12" fill="#666">1 atm = 760 mmHg</text><line x1="400" y1="150" x2="400" y2="180" stroke="#999" stroke-width="1" stroke-dasharray="5,5"/><!-- PSI --><circle cx="200" cy="250" r="50" fill="#E6A23C" opacity="0.2"/><text x="200" y="245" text-anchor="middle" font-size="16" fill="#333">psi</text><text x="200" y="265" text-anchor="middle" font-size="12" fill="#666">1 psi = 51.715 mmHg</text><line x1="250" y1="250" x2="330" y2="250" stroke="#999" stroke-width="1" stroke-dasharray="5,5"/><!-- bar --><circle cx="600" cy="250" r="50" fill="#F56C6C" opacity="0.2"/><text x="600" y="245" text-anchor="middle" font-size="16" fill="#333">bar</text><text x="600" y="265" text-anchor="middle" font-size="12" fill="#666">1 bar = 750.062 mmHg</text><line x1="550" y1="250" x2="470" y2="250" stroke="#999" stroke-width="1" stroke-dasharray="5,5"/><!-- kPa --><circle cx="400" cy="400" r="50" fill="#909399" opacity="0.2"/><text x="400" y="395" text-anchor="middle" font-size="16" fill="#333">kPa</text><text x="400" y="415" text-anchor="middle" font-size="12" fill="#666">1 kPa = 7.50062 mmHg</text><line x1="400" y1="350" x2="400" y2="320" stroke="#999" stroke-width="1" stroke-dasharray="5,5"/><!-- Legend --><rect x="50" y="430" width="700" height="2" fill="#eee"/><text x="50" y="460" font-size="14" fill="#666">注: 图中显示了各单位与毫米汞柱(mmHg)的换算关系。虚线连接表示可相互转换。</text>
</svg>4.styles.css
/* Root CSS variables for easy theme management */
body {font-family: Arial, sans-serif;margin: 0 auto;padding: 20px;background-color: #f4f4f4;
}
.tools-list {list-style: none;padding: 0;margin: 0;display: block;width: 100%;
}.tools-list a {display: inline-block;width: 100%; /* 让按钮宽度填满父容器 */max-width: 180px; /* 设置最大宽度，避免按钮过大 */padding: 10px 15px;font-size: 1.2em;color: #007BFF;border: 1px solid #007BFF;border-radius: 5px;text-align: center; /* 水平居中 */text-decoration: none;transition: background-color 0.3s, color 0.3s;background-color: white; /* 按钮背景色 */margin-left: auto;margin-right: auto;
}
.tools-list a:hover {background-color: #007BFF;color: white;
}
.tools-list li {margin-bottom: 20px; /* 增加底部外边距 */
}/* 右上角导航按钮 */
.nav-buttons {position: absolute;top: 20px;right: 20px;
}.nav-buttons a, .nav-buttons button {text-decoration: none;font-size: 0.9em;color: white;background-color: #007BFF;border: none;padding: 8px 15px;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;margin-left: 10px;
}.nav-buttons a:hover, .nav-buttons button:hover {background-color: #0056b3;
}.nav-buttons button {font-size: 0.9em;
}h1, h2 {text-align: center;color: #333;
}.content {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 20px;
}.calculator-container {flex: 1;min-width: 300px;background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin-top: 40px;align-items: center;
}.description {flex: 2;min-width: 500px;background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin-top: 40px;
}table {width: 33%;margin: 0 auto;border-collapse: collapse;margin-top: 20px;
}th, td {border: 1px solid #ddd;padding: 8px;text-align: left;
}th {background-color: #f0f0f0;
}.sidereal {margin-top: 40px;font-size: 0.9rem;line-height: 1.6;
}.references {margin-top: 20px;font-size: 0.85rem;
}.references a {color: blue;text-decoration: none;
}.boxed-container {border: 1px solid #87CEEB;padding: 10px;background-color: #f0f8ff;border-radius: 10px;box-shadow: 3px 3px 15px rgba(135, 206, 235, 0.5);margin-bottom: 20px;align-items: center;
}.styled-input {padding: 10px;width: 100%;margin-top: 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 5px;font-size: 1.1em;box-sizing: border-box;
}.unit-buttons {margin: 10px 0;
}.unit-btn {padding: 10px 20px;margin: 5px;background-color: #f0f0f0;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;
}.unit-btn.active {background-color: #87CEEB;border-color: #007BFF;color: white;
}.unit-btn:hover {background-color: #007BFF;
}.clear-btn {/*margin-top: 20px;margin-bottom: 10px;*/padding: 12px 16px;font-size: 1.2em;background-color: #ff4c4c;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;justify-content:space-between ;
}.clear-btn:hover {background-color: #ff3333;
}.clear-btn-liquid {/*margin-top: 20px;margin-bottom: 10px;*/padding: 8px 10px;font-size: 1.2em;background-color: #ff4c4c;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;justify-content:space-between ;
}
.clear-btn-liquid:hover {background-color: #ff3333;
}.calculator-btn {/*margin-top: 20px;margin-bottom: 10px;*/padding: 15px 30px;font-size: 1.2em;background-color: #0056b3;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;justify-content:space-between ;
}.calculator-btn:hover {background-color:#0056b3;
}th, td {white-space: nowrap;
}.table-section-title {font-size: 1.5em;font-weight: bold;color: #333;margin-top: 40px;text-align: center;
}.conversion-table {width: 33%;margin: 0 auto;border-collapse: collapse;margin-top: 20px;margin-bottom: 40px;
}.conversion-table th, .conversion-table td {border: 1px solid #ddd;padding: 12px;text-align: center;
}.conversion-table th {background-color: #f0f8ff;font-weight: bold;font-size: 1.2em;
}.conversion-table td {font-size: 1em;
}.conversion-table tr:nth-child(even) {background-color: #f9f9f9;
}.conversion-table tr:nth-child(odd) {background-color: #ffffff;
}h1 {text-align: left;color: #333;font-size: 2em;margin: 10px 0;
}h2.rendered {background: linear-gradient(90deg, #87CEEB, #4b79a1);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 2em;font-weight: bold;text-align: center;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);margin: 6px 0;padding: 4px;display: inline-block;width: 100%;
}h3.rendered {background: linear-gradient(90deg, #87CEEB, #4b79a1);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 1.6em;font-weight: bold;text-align: center;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);margin: 10px 0;padding: 8px;display: inline-block;width: 100%;
}label, .styled-input {margin-top: 10px;margin-bottom: 10px;
}
label[for="input_value"] {font-size: 1.5em;font-weight: bold;color: #000000;display: block;margin-bottom: 10px;
}
.formatted-result {text-align: center; /* 水平居中 */font-size: 1.5em; /* 适当调整字体大小 */font-weight: normal; /* 粗体显示 */margin: 10px 0; /* 上下增加一些间距 */
}
.button-container {display: flex;
}
.alignCenter{
text-align: center;
}
.clock-container {display: flex;align-items: center; /* 水平居中 */justify-content: center; /* 垂直居中 */gap: 20px; /* 设置两个按钮之间的间距 */margin-bottom: 10px; /* 各个元素之间添加空行 */
}.button-group {display: flex;justify-content: space-between; /* 左右对齐 */margin-top: 20px; /* 为按钮与上面内容添加空行 */
}button {padding: 10px 20px; /* 调整按钮的内边距，减小按钮大小 */font-size: 1rem; /* 控制按钮内文字的大小 */
}#result {text-align: center;flex: 2; /* 确保结果区域在两个按钮之间有足够的空间 */
}.floatLeft, .floatRight {display: inline-block; /* 保持按钮的内联块布局 */margin-top: 10px; /* 控制每个按钮与其他元素之间的间距 */
}.note {font-weight: 400;color: #666 !important; /* 强制灰色 */
}.small {font-size: 1rem !important; /* 强制较小的字体 */
}input[type="text"]{width: 80px; /* 设置输入框的宽度为 80px，调整为你需要的尺寸 */padding: 5px; /* 控制输入框内边距 */font-size: 1em; /* 控制文字大小 */box-sizing: border-box; /* 确保 padding 不会影响宽度 */
}
input[type="number"] {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 120px;
}select {width: 120px; /* 减小默认宽度 */padding: 4px 20px 4px 8px; /* 右边留更多空间给下拉箭头 */font-size: 0.9em; /* 稍微减小字体 */box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;background-color: white;appearance: none; /* 移除默认的下拉箭头样式 */background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 4px center;background-size: 16px;
}/* 特定的select样式 */
#liquid-unit,
#length-unit,
#temperature-unit {width: 120px; /* 统一宽度 */margin: 0 5px;
}table{margin:0;
}/*.centered{width:auto;margin-left:auto;margin-right:auto;}*/
.centered {display: flex;width: 100%;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中，如果需要 */flex-direction: column; /* 垂直排列内容 */text-align: center; /* 确保文本也居中 */margin-left: auto;margin-right: auto;
}.centered h2 {margin-bottom: 10px; /* 减少 h2 标题的底部外边距 */
}.prettytable {width: 100%;border-collapse: collapse;background-color: #fcfcfc;margin: 1em 0;border: 1px solid #aaa;table-layout: fixed
}.prettytable th, .prettytable td {padding: 10px;border: 1px solid #aaa;text-align: center;
}.prettytable th {background-color: #eee;font-weight: 700;
}.normaltable {background-color: #fcfcfc;margin: 1em 0;border: 1px solid #aaa;margin-top: 0; /* 取消表格容器的顶部外边距 */}
.normaltable th, .normaltable td {padding: 10px;border: 1px solid #aaa;text-align: center;
}
.normaltable th {background-color: #eee;font-weight: 700;
}
.normaltable table {width: 100%;table-layout: fixed;margin-top: 0; /* 确保表格的顶部外边距为 0 */padding-top: 0; /* 确保没有额外的内边距 */
}.cell {display: flex;align-items: center; /* 确保内容垂直居中 */
}#startAmPmContainer, #endAmPmContainer {margin-left: 10px; /* 给 AM/PM 选择框留出适当的左边距 */
}.celleft {margin-right: 10px; /* 留出一些右边距 */
}
.unit-category {font-weight: bold;background-color: #e9ecef;
}
.results-table {width: 100%;border-collapse: collapse;margin-top: 20px;
}
.results-table th, .results-table td {border: 1px solid #ddd;padding: 8px;text-align: left;
}
.results-table th {background-color: #f5f5f5;
}
.calculator {background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 20px;
}
.calculator h2 {text-align: center;color: #007bff;margin-bottom: 20px;
}.unit-section {margin-bottom: 20px;padding: 15px;border: 1px solid #ddd;border-radius: 5px;
}
.input-group {display: flex;gap: 10px;align-items: center;justify-content: center;margin-bottom: 20px;flex-wrap: nowrap;
}
.input-field {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 150px;
}
select {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 200px;
}
.button_liquid {padding: 10px 20px;background-color: #007BFF;color: white;border: none;border-radius: 4px;cursor: pointer;
}
.convert-btn {background-color: #007bff;color: white;padding: 8px 10px;font-size: 1.2em;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;justify-content:space-between ;
}
.convert-btn:hover {background-color: #0056b3;
}
.unit-group {background-color: #f8f9fa;font-weight: bold;
}
option {padding: 4px;font-size: 0.9em;
}
optgroup {font-weight: bold;color: #333;font-size: 0.9em;
}
.input-group {display: flex;align-items: center;gap: 8px; /* 减小间距 */margin-bottom: 12px;
}
.input-group select {flex: 0 0 120px;
}
@media (max-width: 768px) {select,#liquid-unit,#length-unit,#temperature-unit {width: 100px; /* 移动设备上更窄 */}.input-group {flex-wrap: wrap;}
}/* 悬停时临时展开宽度，提升可读性 */
select:hover,
select:focus {width: 160px;transition: width 0.3s ease;
}
.results_liquid {margin-top: 20px;width: 33%;margin: 0 auto;display: flex;border-collapse: collapse;justify-content: center
}
.results_liquid table {width: auto; /* 让表格宽度适应内容 */min-width: 300px; /* 设置最小宽度，避免表格太窄 */max-width: 600px; /* 设置最大宽度，避免表格太宽 */margin: 0 auto; /* 表格本身的居中 */
}.results_liquid td, .results_liquid th {padding: 8px 15px; /* 增加单元格内边距，使内容更易读 */
}/* 确保表格内容对齐方式统一 */
.results_liquid td:first-child {text-align: left; /* 第一列左对齐 */
}.results_liquid td:last-child {text-align: right; /* 数值靠右对齐 */
}
.unit-group td {text-align: center !important; /* 组标题居中 */background-color: #f8f9fa;font-weight: bold;
}/* 温度转换表格的特殊样式 */
#temperature-results table th {text-align: center;
}#temperature-results table td:nth-child(2) {text-align: left; /* "到"这一列左对齐 */
}
5. liquid_measures.js
// 容量换算率const liquidConversionRates = {'l': 1000,'ml': 1,'cm3': 1,'gal': 3785.41,'qt': 946.353,'pt': 473.176,'cup': 236.588,'floz': 29.5735,'tbsp': 14.7868,'tsp': 4.92892,'rice_cup': 180};// 长度换算率const lengthConversionRates = {'mm': 1,'cm': 10,'dm': 100,'m': 1000,'inch': 25.4000,'ft': 304.8000,'yd': 914.4000,'mi': 1609344.0000,'cs_li': 0.3333,'cs_fen': 3.3333,'cs_in': 33.3333,'cs_ft': 333.3333,'cs_yd': 3333.3333,'cs_mi': 500000.0000};//重量换算率 基数 gram 克const weightsConversionRates = {'mg': 0.001,'gram': 1,'kg': 1000,'ton': 1000000,'gr': 0.0648,'dram': 1.7718,'ounce': 28.3495,'lb': 453.5924,'s_ton': 907184.7400,'l_ton': 1016046.9088,'wfen': 0.5,'qian': 5,'liang': 50,'jin': 500,'dan':50000};// 气压换算率const atmsConversionRates = {'psi': 1/51.715,'bar': 1/750.062,'kpa': 1/750.062,'atm': 1/760, 'mmhg': 1};// 容量单位分组const liquidUnitGroups = {'公制单位': ['l', 'ml', 'cm3'],'美制容量': ['gal', 'qt', 'pt', 'cup', 'floz'],'厨房计量': ['tbsp', 'tsp', 'rice_cup']};// 长度单位分组const lengthUnitGroups = {'公制单位': ['mm', 'cm', 'dm', 'm'],'美制单位': ['inch', 'ft', 'yd', 'mi'],'大中华单位': ['cs_li', 'cs_fen', 'cs_in', 'cs_ft', 'cs_yd', 'cs_mi']};//重量单位分组const weightsUnitGroups = {'公制重量单位': ['mg', 'gram', 'kg', 'ton'],'美制重量单位': ['gr', 'dram', 'ounce', 'lb', 's_ton', 'l_ton'],'大中华重量单位': ['wfen', 'qian', 'liang', 'jin', 'dan']};const atmsUnitGroups = {'气压转换': ['psi', 'bar', 'kpa', 'atm', 'mmhg']};// 单位显示名称const unitNames = {'l': '升(L)','ml': '毫升(mL)','cm3': '立方厘米(cm³)','gal': '加仑(gal)','qt': '夸脱(qt)','pt': '品脱(pt)','cup': '杯(cup)','floz': '液体盎司(fl oz)','tbsp': '汤匙(tbsp)','tsp': '茶匙(tsp)','rice_cup': '米杯','mm': '毫米(mm)','cm': '厘米(cm)','m': '米(m)','inch': '英寸(inch)','ft': '英尺(ft)','yd': '码(yd)','mi': '英里(mi)','cs_li': '厘(li)','cs_fen': '分(fen)','cs_in': '寸(cun)','cs_ft': '尺(chi)','cs_yd': '丈(zhang)','cs_mi': '里(li)','C': '摄氏度(°C)','F': '华氏度(°F)','K': '开尔文(K)','mg': '毫克(mg)','gram': '公克(g)','kg': '公斤(kg)','ton': '公砘(t)','gr': '格令(gr)','dram': '打兰(dr)','ounce': '盎司(oz)','lb': '磅(lb)','s_ton': '美吨(短吨 ton)','l_ton': '英吨(长吨 ton)','wfen': '分(fen)','qian': '钱(qian)','liang': '两(liang)','jin': '斤(jin)','dan': '担(dan)','psi': '磅力/平方英寸(psi)','bar': '巴(bar)','kpa': '千帕(kPa)','atm': '标准大气压(atm)','mmhg': '毫米汞柱(mmHg)',};// 容量换算function convertLiquid() {const value = parseFloat(document.getElementById('liquid-value').value);const unit = document.getElementById('liquid-unit').value;if (isNaN(value)) {alert('请输入有效的数值');return;}const baseValue = value * liquidConversionRates[unit];let html = '<table><tbody>';Object.entries(liquidUnitGroups).forEach(([groupName, units]) => {html += `<tr class="unit-group"><td colspan="2">${groupName}</td></tr>`;units.forEach(toUnit => {const converted = baseValue / liquidConversionRates[toUnit];html += `<tr><td>${unitNames[toUnit]}</td><td style="text-align: right">${converted.toFixed(4)}</td></tr>`;});});html += '</tbody></table>';document.getElementById('liquid-results').innerHTML = html;}// 长度换算function convertLength() {const value = parseFloat(document.getElementById('length-value').value);const unit = document.getElementById('length-unit').value;if (isNaN(value)) {alert('请输入有效的数值');return;}const baseValue = value * lengthConversionRates[unit];let html = '<table><tbody>';Object.entries(lengthUnitGroups).forEach(([groupName, units]) => {html += `<tr class="unit-group"><td colspan="2">${groupName}</td></tr>`;units.forEach(toUnit => {const converted = baseValue / lengthConversionRates[toUnit];html += `<tr><td>${unitNames[toUnit]}</td><td style="text-align: right">${converted.toFixed(4)}</td></tr>`;});});html += '</tbody></table>';document.getElementById('length-results').innerHTML = html;}// 温度换算function convertTemperature() {const value = parseFloat(document.getElementById('temperature-value').value);const unit = document.getElementById('temperature-unit').value;if (isNaN(value)) {alert('请输入有效的数值');return;}// 先转换为摄氏度let celsius;switch(unit) {case 'C':celsius = value;break;case 'F':celsius = (value - 32) * 5/9;break;case 'K':celsius = value - 273.15;break;}// 转换为其他单位const conversions = {'C': celsius,'F': celsius * 9/5 + 32,'K': celsius + 273.15};let html = '<table><tbody>';// 添加标题行html += `<tr class="unit-group"><td colspan="2">温度单位</td></tr>`;Object.entries(conversions).forEach(([toUnit, converted]) => {//display all. if (toUnit !== unit) { // 只显示不同于输入单位的转换结果html += `<tr><td>${unitNames[toUnit]}</td><td style="text-align: right">${converted.toFixed(4)}</td></tr>`;});html += '</tbody></table>';document.getElementById('temperature-results').innerHTML = html;
}// 重量换算器function convertWeight() {const value = parseFloat(document.getElementById('weights-value').value);const unit = document.getElementById('weights-unit').value;if (isNaN(value)) {alert('请输入有效的数值');return;}const baseValue = value * weightsConversionRates[unit];let html = '<table><tbody>';Object.entries(weightsUnitGroups).forEach(([groupName, units]) => {html += `<tr class="unit-group"><td colspan="2">${groupName}</td></tr>`;units.forEach(toUnit => {const converted = baseValue / weightsConversionRates[toUnit];html += `<tr><td>${unitNames[toUnit]}</td><td style="text-align: right">${converted.toFixed(4)}</td></tr>`;});});html += '</tbody></table>';document.getElementById('weights-results').innerHTML = html;}// 气压换算function convertAtm() {const value = parseFloat(document.getElementById('atm-value').value);const unit = document.getElementById('atm-unit').value;if (isNaN(value)) {alert('请输入有效的数值');return;}const baseValue = value / atmsConversionRates[unit.toLowerCase()]; let html = '<table><tbody>';Object.entries(atmsUnitGroups).forEach(([groupName, units]) => {html += `<tr class="unit-group"><td colspan="2">${groupName}</td></tr>`;units.forEach(toUnit => {const converted = baseValue * atmsConversionRates[toUnit.toLowerCase()];html += `<tr><td>${unitNames[toUnit]}</td><td style="text-align: right">${converted.toFixed(4)}</td></tr>`;});});html += '</tbody></table>';document.getElementById('atm-results').innerHTML = html;} // 清除函数function clearLiquid() {document.getElementById('liquid-value').value = '';document.getElementById('liquid-results').innerHTML = '';}function clearLength() {document.getElementById('length-value').value = '';document.getElementById('length-results').innerHTML = '';}function clearTemperature() {document.getElementById('temperature-value').value = '';document.getElementById('temperature-results').innerHTML = '';}function clearWeight() {document.getElementById('weights-value').value = '';document.getElementById('weights-results').innerHTML = '';}function clearAtm() {document.getElementById('atm-value').value = '';document.getElementById('atm-results').innerHTML = '';}6. 目录结构
11.Calculator/
├── app.py # Flask 应用主程序
├── Dockerfile # Docker 容器配置文件
├── requirements.txt # Python 依赖包列表
├── static/ # 静态资源文件夹
│ ├── agecal/ # 年龄计算器相关文件
│ ├── liquid_measures/ # 液体度量转换器相关文件
│ ├── metric_converter/# 公制单位转换器相关文件
│ ├── time/ # 时间计算器相关文件
│ ├── workhours/ # 工作时间计算器相关文件
│ ├── favicon.jpg # 网站图标
│ └── styles.css # 全局样式表
└── templates/ # HTML 模板文件夹├── index.html # 主页面└── converters/ # 各种转换器的 HTML 模板├── agecal.html├── liquid_measures.html├── metric_converter.html├── time.html└── workhours.html总结
- 有个 bug 困半数时间，直到添加 toLowerCase() 在 liquid_measures.js line:293 299. 不然选中 mmHg 结果就是 NaN，还是没想通。可以试一下，是不是也这样，还是浏览器问题。
- js 第一次动态生成格式化的 HTML 表格，上隐后又做了 4 遍。