From 360a1bda94ac5c7329dfdb10a22b2d2ad8c69c9b Mon Sep 17 00:00:00 2001
From: K <k.yshtcn@gmail.com>
Date: Tue, 4 Mar 2025 17:54:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LiquidTempLab.html | 578 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 578 insertions(+)
 create mode 100644 LiquidTempLab.html
diff --git a/LiquidTempLab.html b/LiquidTempLab.html
new file mode 100644
index 0000000..0773934
--- /dev/null
+++ b/LiquidTempLab.html
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>热水和冷牛奶温度变化折线图</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .main-container {
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+        }
+        .chart-section {
+            width: 66.67%;
+            height: 100%;
+            padding: 10px;
+            box-sizing: border-box;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .controls-section {
+            width: 33.33%;
+            height: 100%;
+            padding: 10px;
+            box-sizing: border-box;
+            overflow-y: auto;
+            background-color: #f9f9f9;
+            border-left: 1px solid #ddd;
+        }
+        .chart-container {
+            flex: 1;
+            width: 100%;
+            position: relative;
+            margin-bottom: 10px;
+        }
+        .title-container {
+            padding: 10px 0;
+        }
+        .axis-controls {
+            display: flex;
+            flex-direction: column;
+            margin: 10px 0;
+            padding: 10px;
+            background: #f5f5f5;
+            border-radius: 5px;
+            width: 100%;
+            box-sizing: border-box;
+            transition: max-height 0.3s ease-out;
+            overflow: hidden;
+        }
+        .axis-controls.collapsed {
+            max-height: 0;
+            padding: 0;
+            margin: 0;
+        }
+        .toggle-button {
+            background: #4CAF50;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            width: 100%;
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .toggle-button:hover {
+            background: #45a049;
+        }
+        .toggle-button .arrow {
+            transition: transform 0.3s ease;
+        }
+        .toggle-button.collapsed .arrow {
+            transform: rotate(-90deg);
+        }
+        .axis-control-group {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 10px;
+            width: 100%;
+        }
+        .axis-label {
+            font-weight: bold;
+            margin-bottom: 5px;
+            width: 100%;
+            text-align: left;
+        }
+        .axis-inputs {
+            display: flex;
+            align-items: center;
+            width: 100%;
+        }
+        input {
+            padding: 8px;
+            font-size: 14px;
+            width: 70px;
+            margin: 0 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .record-section {
+            width: 100%;
+            margin-top: 10px;
+        }
+        .input-controls {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-bottom: 15px;
+        }
+        .input-group {
+            display: flex;
+            align-items: center;
+            margin: 5px 0;
+            width: 100%;
+        }
+        .input-group label {
+            flex: 1;
+            text-align: left;
+        }
+        .input-group input {
+            flex: 1;
+            max-width: 120px;
+        }
+        .buttons-container {
+            display: flex;
+            justify-content: space-between;
+            margin: 10px 0;
+        }
+        .record-list {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            max-height: 40vh;
+            overflow-y: auto;
+            width: 100%;
+        }
+        .record-list li {
+            cursor: pointer;
+            padding: 8px 10px;
+            background: #f0f0f0;
+            border-radius: 5px;
+            transition: background 0.2s;
+            text-align: left;
+            font-size: 14px;
+        }
+        .record-list li:hover {
+            background: #ddd;
+        }
+        button {
+            padding: 8px 15px;
+            font-size: 14px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            flex: 1;
+            margin: 0 5px;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        button.clear {
+            background: #f44336;
+        }
+        button.clear:hover {
+            background: #d32f2f;
+        }
+        .error-message {
+            color: #f44336;
+            font-size: 14px;
+            margin: 5px 0;
+            min-height: 20px;
+        }
+        .section-title {
+            margin: 10px 0;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 5px;
+        }
+        
+        /* 响应式设计 - 纵向屏幕 */
+        @media (max-width: 768px) {
+            .main-container {
+                flex-direction: column;
+                height: auto;
+                overflow: auto;
+            }
+            .chart-section {
+                width: 100%;
+                height: 60vh;
+                min-height: 300px;
+            }
+            .controls-section {
+                width: 100%;
+                height: auto;
+                border-left: none;
+                border-top: 1px solid #ddd;
+            }
+            .record-list {
+                max-height: 30vh;
+            }
+            .axis-inputs {
+                width: 100%;
+                justify-content: flex-start;
+            }
+            .axis-inputs span {
+                margin: 0 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="main-container">
+        <div class="chart-section">
+            <div class="title-container">
+                <h1>热水和冷牛奶温度变化折线图</h1>
+            </div>
+            <div class="chart-container">
+                <canvas id="temperatureChart"></canvas>
+            </div>
+        </div>
+        
+        <div class="controls-section">
+            <h2 class="section-title">坐标轴设置</h2>
+            <button class="toggle-button collapsed" onclick="toggleAxisControls()">
+                坐标轴设置
+                <span class="arrow">▼</span>
+            </button>
+            <div class="axis-controls collapsed" id="axisControls">
+                <div class="axis-control-group">
+                    <div class="axis-label">X轴范围 (分钟)</div>
+                    <div class="axis-inputs">
+                        <input type="number" id="xMin" placeholder="最小值" min="0" oninput="validateAxes()">
+                        <span>-</span>
+                        <input type="number" id="xMax" placeholder="最大值" min="0" oninput="validateAxes()">
+                    </div>
+                </div>
+                <div class="axis-control-group">
+                    <div class="axis-label">Y轴范围 (温度℃)</div>
+                    <div class="axis-inputs">
+                        <input type="number" id="yMin" placeholder="最小值" oninput="validateAxes()">
+                        <span>-</span>
+                        <input type="number" id="yMax" placeholder="最大值" oninput="validateAxes()">
+                    </div>
+                </div>
+            </div>
+            <div class="error-message" id="axisError"></div>
+            
+            <div class="record-section">
+                <h2 class="section-title">实验数据记录</h2>
+                <div class="input-controls">
+                    <div class="input-group">
+                        <label>时间（分钟）：</label>
+                        <input type="number" id="timeInput" value="0" min="0" step="1">
+                    </div>
+                    <div class="input-group">
+                        <label>热水温度（℃）：</label>
+                        <input type="number" id="hotWaterInput" step="0.1">
+                    </div>
+                    <div class="input-group">
+                        <label>冷牛奶温度（℃）：</label>
+                        <input type="number" id="coldMilkInput" step="0.1">
+                    </div>
+                </div>
+                
+                <div class="error-message" id="inputError"></div>
+                
+                <div class="buttons-container">
+                    <button onclick="addRecord()">添加数据</button>
+                    <button class="clear" onclick="clearRecords()">清空数据</button>
+                </div>
+                
+                <h3 class="section-title">已记录数据</h3>
+                <ul id="recordList" class="record-list"></ul>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        const ctx = document.getElementById('temperatureChart').getContext('2d');
+        let chart;
+        let timeValues = [], hotWaterValues = [], coldMilkValues = [];
+        
+        // 验证坐标轴值
+        function validateAxes() {
+            const xMin = document.getElementById('xMin').value;
+            const xMax = document.getElementById('xMax').value;
+            const yMin = document.getElementById('yMin').value;
+            const yMax = document.getElementById('yMax').value;
+            const axisError = document.getElementById('axisError');
+            
+            axisError.textContent = '';
+            
+            if (xMin && xMax && Number(xMin) >= Number(xMax)) {
+                axisError.textContent = 'X轴最小值必须小于最大值';
+                return false;
+            }
+            
+            if (yMin && yMax && Number(yMin) >= Number(yMax)) {
+                axisError.textContent = 'Y轴最小值必须小于最大值';
+                return false;
+            }
+            
+            if (xMin && Number(xMin) < 0) {
+                axisError.textContent = 'X轴最小值不能小于0';
+                document.getElementById('xMin').value = 0;
+                return false;
+            }
+            
+            updateChart();
+            return true;
+        }
+
+        function addRecord() {
+            const timeInput = document.getElementById('timeInput');
+            const hotWaterInput = document.getElementById('hotWaterInput');
+            const coldMilkInput = document.getElementById('coldMilkInput');
+            const inputError = document.getElementById('inputError');
+
+            const time = Math.round(Number(timeInput.value)); // 确保时间为整数
+            const hotWater = Number(hotWaterInput.value);
+            const coldMilk = Number(coldMilkInput.value);
+
+            // 重置错误消息
+            inputError.textContent = '';
+            
+            // 验证输入
+            if (isNaN(time) || isNaN(hotWater) || isNaN(coldMilk)) {
+                inputError.textContent = '请输入有效的数字';
+                return;
+            }
+            
+            if (time < 0) {
+                inputError.textContent = '时间不能为负值';
+                return;
+            }
+            
+            // 添加数据
+            timeValues.push(time);
+            hotWaterValues.push(hotWater);
+            coldMilkValues.push(coldMilk);
+
+            // 自动排序
+            sortRecords();
+            
+            // 更新输入框的默认值
+            timeInput.value = time + 1; // 增加整数分钟
+            hotWaterInput.value = '';
+            coldMilkInput.value = '';
+            
+            updateChart();
+        }
+
+        function removeRecord(element) {
+            if (confirm('确定要删除这条记录吗？')) {
+                const index = parseInt(element.getAttribute('data-index'));
+                
+                if (index > -1) {
+                    timeValues.splice(index, 1);
+                    hotWaterValues.splice(index, 1);
+                    coldMilkValues.splice(index, 1);
+                }
+                
+                element.remove();
+                updateRecordIndices();
+                updateChart();
+            }
+        }
+        
+        function updateRecordIndices() {
+            const items = document.querySelectorAll('#recordList li');
+            items.forEach((item, index) => {
+                item.setAttribute('data-index', index);
+            });
+        }
+
+        function clearRecords() {
+            if (confirm('确定要清空所有数据吗？')) {
+                timeValues = [];
+                hotWaterValues = [];
+                coldMilkValues = [];
+                document.getElementById('recordList').innerHTML = '';
+                document.getElementById('timeInput').value = '0';
+                updateChart();
+            }
+        }
+        
+        function sortRecords() {
+            // 获取所有的排序索引
+            let sortedIndices = timeValues.map((_, i) => i).sort((a, b) => timeValues[a] - timeValues[b]);
+            
+            // 更新排序后的数据
+            let newTimes = sortedIndices.map(i => timeValues[i]);
+            let newHotWater = sortedIndices.map(i => hotWaterValues[i]);
+            let newColdMilk = sortedIndices.map(i => coldMilkValues[i]);
+            
+            // 替换原数组
+            timeValues = newTimes;
+            hotWaterValues = newHotWater;
+            coldMilkValues = newColdMilk;
+            
+            // 更新显示的列表
+            const recordList = document.getElementById('recordList');
+            recordList.innerHTML = '';
+            
+            for (let i = 0; i < timeValues.length; i++) {
+                const listItem = document.createElement('li');
+                listItem.textContent = `时间: ${timeValues[i]}分钟, 热水: ${hotWaterValues[i].toFixed(1)}℃, 牛奶: ${coldMilkValues[i].toFixed(1)}℃`;
+                listItem.setAttribute('data-time', timeValues[i]);
+                listItem.setAttribute('data-hot', hotWaterValues[i]);
+                listItem.setAttribute('data-cold', coldMilkValues[i]);
+                listItem.setAttribute('data-index', i);
+                listItem.onclick = function() { removeRecord(this); };
+                recordList.appendChild(listItem);
+            }
+        }
+
+        function updateChart() {
+            let xMin = document.getElementById('xMin').value;
+            let xMax = document.getElementById('xMax').value;
+            let yMin = document.getElementById('yMin').value;
+            let yMax = document.getElementById('yMax').value;
+            
+            // 设置默认值和动态范围
+            xMin = xMin ? Number(xMin) : 0; // 时间最小值始终为0或更大
+            xMax = xMax ? Number(xMax) : (timeValues.length ? Math.max(...timeValues) + 1 : 10);
+            
+            let allTemps = [...hotWaterValues, ...coldMilkValues].filter(t => !isNaN(t));
+            let tempMin = allTemps.length ? Math.min(...allTemps) : 0;
+            let tempMax = allTemps.length ? Math.max(...allTemps) : 50;
+            
+            // 为了更好的视觉效果，给温度范围添加一些余量
+            tempMin = Math.floor(tempMin - 5);
+            tempMax = Math.ceil(tempMax + 5);
+            
+            yMin = yMin ? Number(yMin) : tempMin;
+            yMax = yMax ? Number(yMax) : tempMax;
+
+            const data = {
+                labels: timeValues,
+                datasets: [
+                    {
+                        label: '热水温度（℃）',
+                        data: timeValues.map((time, i) => ({x: time, y: hotWaterValues[i]})),
+                        borderColor: 'red',
+                        backgroundColor: 'rgba(255, 0, 0, 0.1)',
+                        borderWidth: 2,
+                        fill: false,
+                        tension: 0.2,
+                        pointRadius: 4,
+                        pointHoverRadius: 6
+                    },
+                    {
+                        label: '冷牛奶温度（℃）',
+                        data: timeValues.map((time, i) => ({x: time, y: coldMilkValues[i]})),
+                        borderColor: 'blue',
+                        backgroundColor: 'rgba(0, 0, 255, 0.1)',
+                        borderWidth: 2,
+                        fill: false,
+                        tension: 0.2,
+                        pointRadius: 4,
+                        pointHoverRadius: 6
+                    }
+                ]
+            };
+
+            if (chart) {
+                chart.destroy();
+            }
+
+            chart = new Chart(ctx, {
+                type: 'line',
+                data: data,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '热水和冷牛奶温度随时间变化',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false
+                        },
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                boxWidth: 40,
+                                padding: 10
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            title: { 
+                                display: true, 
+                                text: '时间（分钟）',
+                                font: {
+                                    weight: 'bold'
+                                }
+                            },
+                            min: xMin,
+                            max: xMax,
+                            ticks: {
+                                stepSize: 1
+                            }
+                        },
+                        y: {
+                            type: 'linear',
+                            title: { 
+                                display: true, 
+                                text: '温度（℃）',
+                                font: {
+                                    weight: 'bold'
+                                }
+                            },
+                            min: yMin,
+                            max: yMax
+                        }
+                    },
+                    interaction: {
+                        mode: 'nearest',
+                        axis: 'x',
+                        intersect: false
+                    },
+                    animation: {
+                        duration: 500
+                    }
+                }
+            });
+        }
+
+        // 页面加载完成后初始化图表
+        document.addEventListener('DOMContentLoaded', function() {
+            updateChart();
+        });
+        
+        // 屏幕大小变化时重新调整图表
+        window.addEventListener('resize', function() {
+            updateChart();
+        });
+
+        // 控制坐标轴设置区域的显示/隐藏
+        function toggleAxisControls() {
+            const controls = document.getElementById('axisControls');
+            const button = document.querySelector('.toggle-button');
+            controls.classList.toggle('collapsed');
+            button.classList.toggle('collapsed');
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
