＜Project-11 Calculator＞计算器 0.5 液体、长度、温度单位转换器 liquid_measures HTML JS

标签：11 liquid color margin html value HTML background border

前言

这是一个综合性的单位换算工具，提供了多种常用计量单位之间的转换功能。不断完善 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_template

app = 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 遍。

标签：11,liquid,color,margin,html,value,HTML,background,border
From： https://blog.csdn.net/davenian/article/details/143218930

＜Project-11 Calculator＞计算器 0.5 液体、长度、温度单位转换器 liquid_measures HTML JS

前言

容量单位换算

长度单位换算

温度单位换算

重量单位换算

气压单位换算

特点：

这个工具特别适合：

页面展示

其它部分更改

styles.css

app.py

新建文件

完整代码

1. app.py

2. converters/liquid_measures.html

3. pressure-diagram.svg

4.styles.css

5. liquid_measures.js

6. 目录结构

总结

相关文章

赞助商

阅读排行

＜Project-11 Calculator＞ 计算器 0.5 液体、长度、温度单位 转换器 liquid_measures HTML JS

前言

容量单位换算

长度单位换算

温度单位换算

重量单位换算

气压单位换算

特点：

这个工具特别适合：

页面展示

其它部分更改

styles.css

app.py

新建文件

完整代码

1. app.py

2. converters/liquid_measures.html

3. pressure-diagram.svg

4.styles.css

5. liquid_measures.js

6. 目录结构

总结

相关文章

赞助商

阅读排行

＜Project-11 Calculator＞计算器 0.5 液体、长度、温度单位转换器 liquid_measures HTML JS