html+js=车速与油耗关系分析



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车速油耗分析</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .input-group {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        input {
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            flex: 1;
            min-width: 200px;
        }

        .vehicle-types {
            display: flex;
            gap: 10px;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .vehicle-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            background: #f0f0f0;
            cursor: pointer;
            transition: all 0.3s;
        }

        .vehicle-btn.active {
            background: #4CAF50;
            color: white;
            transform: scale(1.05);
        }

        #chartContainer {
            margin: 20px 0;
            height: 400px;
        }

        #history {
            margin-top: 30px;
        }

        .history-item {
            background: #f8f9fa;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            display: grid;
            grid-template-columns: repeat(3, 1fr) auto;
            gap: 10px;
            align-items: center;
        }

        .error-message {
            color: #e53935;
            margin: 10px 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>车速油耗分析</h1>
        <div class="input-group">
            <input type="number" id="speedInput" placeholder="输入车速 (km/h)" step="5">
            <div class="vehicle-types">
                <button class="vehicle-btn" data-type="car">轿车</button>
                <button class="vehicle-btn" data-type="suv">SUV</button>
                <button class="vehicle-btn" data-type="truck">卡车</button>
            </div>
        </div>
        <div class="error-message" id="errorMsg"></div>
        <div id="chartContainer">
            <canvas id="chart"></canvas>
        </div>
        
        <h2>历史记录</h2>
        <div id="history"></div>
    </div>

    <script>
        const vehicleTypes = {
            car: {
                name: '轿车',
                calc: v => 0.012 * v**2 - 1.2 * v + 40,
                color: '#2196F3'
            },
            suv: {
                name: 'SUV',
                calc: v => 0.015 * v**2 - 1.0 * v + 45,
                color: '#4CAF50'
            },
            truck: {
                name: '卡车',
                calc: v => 0.018 * v**2 - 0.8 * v + 50,
                color: '#FF9800'
            }
        };

        let chart;
        let currentVehicle = 'car';
        const speeds = Array.from({length: 30}, (_, i) => i * 5 + 20);

        function initChart() {
            const ctx = document.getElementById('chart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: speeds,
                    datasets: [{
                        label: '油耗曲线',
                        data: [],
                        borderColor: vehicleTypes[currentVehicle].color,
                        tension: 0.4,
                        fill: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: '车速与油耗关系' }
                    },
                    scales: {
                        x: { title: { display: true, text: '车速 (km/h)' } },
                        y: { title: { display: true, text: '油耗 (L/100km)' } }
                    }
                }
            });
            updateChart();
        }

        function updateChart() {
            chart.data.datasets[0].data = speeds.map(v => 
                vehicleTypes[currentVehicle].calc(v)
            );
            chart.data.datasets[0].borderColor = vehicleTypes[currentVehicle].color;
            chart.update();
        }

        function showError(msg) {
            const error = document.getElementById('errorMsg');
            error.textContent = msg;
            error.style.display = 'block';
            setTimeout(() => error.style.display = 'none', 3000);
        }

        function saveRecord(speed, consumption) {
            const history = JSON.parse(localStorage.getItem('fuelHistory') || '[]');
            history.unshift({
                vehicle: vehicleTypes[currentVehicle].name,
                speed: speed,
                consumption: consumption.toFixed(1),
                time: new Date().toLocaleTimeString()
            });
            localStorage.setItem('fuelHistory', JSON.stringify(history.slice(0, 10)));
            updateHistory();
        }

        function updateHistory() {
            const history = JSON.parse(localStorage.getItem('fuelHistory') || '[]');
            document.getElementById('history').innerHTML = history.map(item => `
                <div class="history-item">
                    <div>${item.vehicle}</div>
                    <div>${item.speed} km/h</div>
                    <div>${item.consumption} L</div>
                    <div class="time">${item.time}</div>
                </div>
            `).join('');
        }

        // 事件监听
        document.querySelectorAll('.vehicle-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                currentVehicle = this.dataset.type;
                document.querySelectorAll('.vehicle-btn').forEach(b => 
                    b.classList.remove('active')
                );
                this.classList.add('active');
                updateChart();
            });
        });

        document.getElementById('speedInput').addEventListener('change', function() {
            const speed = parseFloat(this.value);
            if (isNaN(speed) || speed < 20 || speed > 150) {
                showError('请输入20-150之间的有效车速');
                return;
            }
            
            const consumption = vehicleTypes[currentVehicle].calc(speed);
            saveRecord(speed, consumption);
            this.value = '';
            updateHistory();
        });

        // 初始化
        document.querySelector('.vehicle-btn').classList.add('active');
        initChart();
        updateHistory();
    </script>
</body>
</html>
done
posted @ 2025-04-21 18:05 liskov_design 阅读(12) 评论(0) 收藏举报
刷新页面返回顶部
engine2x表单引擎和流程引擎wx:chibachi6

html+js=车速与油耗关系分析

公告
