Question

嗨，我很难解决这个问题。

我有一个传感器正在从它的z变量输出值，我用事件监听器捕获它 - event.z从20增加到100。

document.getElementById("size").style.width = event.z + "px";

当它与我的元素的.width属性绑定时，它会按比例增加元素的宽度。这非常有效。但是我希望它相反，在传感器的值递增时减小宽度。如何“反转”传感器的值以使宽度属性减小？

非常感谢

Answer 1

document.getElementById("size").style.width = 100 + (20 - event.z) + "px";

当你的event.z说20时，这将给出100px的宽度。当你的event.z表示100时，这将给出20px的宽度。

这种计算的一般功能是

function progress(start, finish, current) {
    if (start == finish) { return start; }

    var operator = 1;
    var min = start;
    if (start > finish) {
        operator = -1;
        min = finish;
    }

    return start + (Math.abs(current - min) * operator);
 }

当您使用此逻辑时，progress(20, 100, 30)将给出30而progress(100, 20, 30)将给出90。基本逻辑是：将您的较低值和当前值之间的差值添加（或减去）为初始值。

注意，一旦知道了开始值和结束值，就可以将此函数压缩为一行。虽然您可以将它用作代码，但它更像是伪代码，可以帮助您了解如何将其作为单行。使用这种一般形式，你的两个案例是：

20 +（当前 - 20）// ==当前，即您原来的代码行

和

100 - （当前 - 20）// == 100 - （ - （20 - 当前）== 100 +（20 - 当前），即我给出的答案。

反向映射传感器的值

1 个答案: