input运用当中的方法和技巧

PC项目当中遇到的input方法和技巧

// 笔筒高度
$("#depth").on("input", function () {
    penholder.depth = Number(this.value);
    $(".depth-content").text(this.value);
    applyFill("depth");
});
$("#depth").change(function () {
    penholder.depth = Number(this.value);
    grid.position.y = -penholder.depth * 0.5;//动态计算地板跟随高度
    updateMesh();
});

说明

在上面代码当中，可以同时使用两种方式，input代表的是拖动时只改变数值的变化，change代表的是功能的变化，所以加起来使用更加的流畅，分开写的方式也使得开发者更好的阅读和理解，方便使用和管理代码。

函数方法封装，方便调用，可直接使用

// 修改拖动条样式
const sliderProps = {
    fill: "#E88E73",//拖动部分橙色
    background: "#156F92",//填充部分，蓝色
};
function applyFill(sliderName) {
    let slider = document.getElementById(sliderName);
    let percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
    let bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
        0.1}%)`;
    $("#" + sliderName).css('background', bg);
}

//方法整合
function updateMesh() {
    penholder.makeModel();
    incRenderCount();
}