MTU阶梯定价计算器开发：解决NaN错误及优化方案咨询

问题概述 #

开发MTU价格估算计算器，计价规则如下：

• 1000 MTU：单价0.035，总价35
• 2000 MTU：单价0.034，总价67
• 3000 MTU：单价0.0329，总价98.79
• 以此类推

现有代码运行时出现NaN错误，需修复并优化代码效率。

错误原因分析 #

1. 未调用计算函数：change事件监听中定义了calculateCost函数但未执行，cost变量始终为undefined，执行value * cost时返回NaN。
2. 类型不匹配：滑块获取的value是字符串类型，直接参与乘法运算易引发类型错误。
3. 扩展性差：仅硬编码两个档位，无法支持后续“以此类推”的多档位需求。
4. 事件监听冗余：同时使用oninput属性、slider.oninput和addEventListener，易引发逻辑冲突。

优化后的完整代码 #

HTML代码 #

<p id="rangeValue"></p>
<div class="range-wrap">
    <div class="range-value" id="rangeV"></div>
    <input id="myinput" type="range" name="points" min="1000" max="100000" value="1000">
</div>

CSS代码 #

#myinput {
    border-radius: 8px;
    height: 8px;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0080FF;
}

.range-wrap {
    width: 500px;
    position: relative;
}

.range-value {
    position: absolute;
    top: 150%;
}

.range-value span {
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: transparent;
    color: #0A0E1C;
    font-size: 20px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}

.range-value span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}

JavaScript代码 #

const slider = document.getElementById("myinput");
const rangeV = document.getElementById("rangeV");
const totalCostEl = document.getElementById("rangeValue");

// 定义计价档位：键为MTU数量，值为对应单价，新增档位直接在此添加
const priceTiers = {
    1000: 0.035,
    2000: 0.034,
    3000: 0.0329
};

// 初始化页面状态
updateSliderBackground(slider.value);
updateRangeValueDisplay(slider.value);
calculateAndDisplayTotal(slider.value);

// 统一滑块输入事件处理
slider.addEventListener('input', function() {
    const currentValue = this.value;
    updateSliderBackground(currentValue);
    updateRangeValueDisplay(currentValue);
});

// 滑块确认选择后计算总价（若需实时计算可移至input事件）
slider.addEventListener('change', function() {
    calculateAndDisplayTotal(this.value);
});

// 更新滑块背景渐变样式
function updateSliderBackground(value) {
    const percentage = ((value - slider.min) / (slider.max - slider.min)) * 100;
    slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${percentage}%, #596680 ${percentage}%, #596680 100%)`;
}

// 更新滑块上方的数值提示框位置与内容
function updateRangeValueDisplay(value) {
    const newValue = Number((value - slider.min) * 100 / (slider.max - slider.min));
    const newPosition = 10 - (newValue * 0.2);
    rangeV.innerHTML = `<span>${value}</span>`;
    rangeV.style.left = `calc(${newValue}% + ${newPosition}px)`;
}

// 计算并显示总价，自动匹配对应档位单价
function calculateAndDisplayTotal(value) {
    const mtuAmount = Number(value);
    let unitPrice = priceTiers[mtuAmount];
    
    // 处理未定义档位：自动匹配小于等于当前数量的最高档位单价
    if (!unitPrice) {
        const availableTiers = Object.keys(priceTiers).map(Number).sort((a,b) => b - a);
        unitPrice = priceTiers[availableTiers.find(tier => tier <= mtuAmount)] || 0;
    }
    
    const totalCost = (mtuAmount * unitPrice).toFixed(2);
    totalCostEl.textContent = totalCost;
}

优化说明 #

1. 修复NaN错误：确保调用计算函数并转换数据类型，避免未初始化变量参与运算。
2. 提升扩展性：用对象存储计价档位，新增档位只需添加键值对，无需修改核心逻辑。
3. 简化事件逻辑：合并冗余监听，将样式更新、数值显示、总价计算拆分为独立函数，提高代码可读性与可维护性。
4. 处理边界情况：针对未定义的MTU数量，自动匹配最近的低价档位单价，符合“以此类推”的计价规则。
5. 结构优化：封装重复逻辑，减少代码冗余，便于后续功能扩展。

内容的提问来源于stack exchange，提问作者Skill Up