就是这个样的粗爆，手搓一个计算器：自行车分段计算器

线上运行，可以直接打开：自行车分段计算器 (在线计算器)

       作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator"><div id="segments"><div class="input-group segment"><label>分段 1</label> <input class="distance" min="0.1" step="0.1" type="number" placeholder="距离（公里）"> <input class="time" min="1" type="number" placeholder="时间（分钟）"></div></div><div class="add-segment"><button onclick="addSegment()">添加分段</button></div><button onclick="calculateSegments()">计算总计</button><div id="result" class="result"></div></div>

JS:

let segmentCount = 1;

        function addSegment() {
            segmentCount++;
            const segmentsDiv = document.getElementById("segments");

            const segmentDiv = document.createElement("div");
            segmentDiv.classList.add("input-group", "segment");
            segmentDiv.innerHTML = `
                <label>分段 ${segmentCount}</label>
                <input type="number" class="distance" placeholder="距离（公里）" step="0.1" min="0.1">
                <input type="number" class="time" placeholder="时间（分钟）" min="1">
            `;
            segmentsDiv.appendChild(segmentDiv);
        }

        function calculateSegments() {
            const distances = document.querySelectorAll(".distance");
            const times = document.querySelectorAll(".time");
            const resultDiv = document.getElementById("result");

            let totalDistance = 0;
            let totalTime = 0;
            let segmentResults = "";

            for (let i = 0; i < distances.length; i++) {
                const distance = parseFloat(distances[i].value);
                const time = parseFloat(times[i].value);

                if (isNaN(distance) || isNaN(time) || distance <= 0 || time <= 0) {
                    resultDiv.innerHTML = "请确保所有分段的距离和时间都为有效值！";
                 
                    return;
                }

                totalDistance += distance;
                totalTime += time;

                const avgSpeed = (distance / (time / 60)).toFixed(2);
                segmentResults += `<div>分段 ${i + 1}: 距离 ${distance} 公里，时间 ${time} 分钟，平均速度 ${avgSpeed} 公里/小时</div>`;
            }

            const overallAvgSpeed = (totalDistance / (totalTime / 60)).toFixed(2);

            resultDiv.innerHTML = `
                ${segmentResults}
                <div>总距离：${totalDistance.toFixed(2)} 公里</div>
                <div>总时间：${totalTime.toFixed(2)} 分钟</div>
                <div>总平均速度：${overallAvgSpeed} 公里/小时</div>
            `;
 
        }

  CSS:

.calculator {
    width: 100%;
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}

input, select {
    width: 100%!important;
    padding: 10px!important;
    margin-bottom: 20px;
       color: #000000; 
    border-radius: 5px;
    border: 1px solid #555;
    font-size: 16px!important;
    background-color: #ffffff!important;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom:10px;
}

button:hover {
    background-color: orange;
}

.result {
  font-size: 18px;
    margin-top: 20px;
    text-align: center;
}

option {
        background-color: #ffffff;
}


p {
    font-size: 18px;
        margin-top: 5px!important;
}