如何基于Python后端返回值阈值在HTML/CSS/JS前端显示不同颜色？

1. 后端接口封装 #

先把你的Python函数封装为HTTP接口，以下是基于Flask的实现示例：

from flask import Flask, request, jsonify
import re
from datetime import datetime
# 请导入你的Root_class类
from your_module import Root_class

app = Flask(__name__)

def zulu_extracts(weather_input, datis=None):
    raw_utc = Root_class().date_time(raw_utc='HM')[-4:]
    raw_utc_dt = datetime.strptime(raw_utc, "%H%M")
    
    zulu_item_re = re.findall('[0-9]{4}Z', weather_input)
        
    if zulu_item_re:
        zulu_weather = zulu_item_re[0][:-1]
        zulu_weather_dt = datetime.strptime(zulu_weather, "%H%M")
        diff = raw_utc_dt - zulu_weather_dt
        diff = int(diff.seconds/60)
        return diff
    else:
        return 'N/A'

@app.route('/get-zulu-diff', methods=['POST'])
def get_zulu_diff():
    data = request.get_json()
    weather_input = data.get('weather_input')
    datis = data.get('datis', None)
    result = zulu_extracts(weather_input, datis)
    return jsonify({'diff': result})

if __name__ == '__main__':
    app.run(debug=True)

2. 前端实现（HTML+CSS+JS） #

创建前端页面，请求后端数据并根据阈值设置显示颜色：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Zulu差值展示</title>
    <style>
        .diff-box {
            font-size: 24px;
            font-weight: bold;
            padding: 12px 20px;
            border: 1px solid #eee;
            display: inline-block;
        }
        .red {
            color: #dc3545;
        }
        .green {
            color: #28a745;
        }
        .gray {
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div id="diffDisplay" class="diff-box">加载中...</div>

    <script>
        // 替换为实际业务场景的请求参数
        const requestParams = {
            weather_input: "示例气象数据 1420Z",
            datis: false
        };

        // 请求后端接口
        fetch('/get-zulu-diff', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(requestParams)
        })
        .then(res => res.json())
        .then(data => {
            const displayEl = document.getElementById('diffDisplay');
            const diff = data.diff;

            if (typeof diff === 'number') {
                displayEl.textContent = `差值：${diff}分钟`;
                // 根据阈值切换颜色类
                displayEl.classList.add(diff >= 15 ? 'red' : 'green');
            } else {
                displayEl.textContent = diff;
                displayEl.classList.add('gray');
            }
        })
        .catch(err => {
            console.error('请求失败:', err);
            const displayEl = document.getElementById('diffDisplay');
            displayEl.textContent = '加载失败';
            displayEl.classList.add('gray');
        });
    </script>
</body>
</html>

核心逻辑说明 #

• 后端：将原有函数封装为POST接口，接收参数后返回JSON格式的差值结果
• 前端：
  • 通过fetch发起请求获取后端数据
  • 判断返回值类型：数字则对比阈值（≥15）添加对应颜色类，N/A则设置灰色文本
  • 用CSS类控制颜色，后续扩展阈值规则只需新增类和判断逻辑即可

内容的提问来源于stack exchange，提问作者ismail sakhani