Question

所以我试图在两个数字之间得到一个值的百分比。

这是我的代码：

var easeMethod = 'easeOutCubic';        // Mathematical curve.
var easeTime = 1250;                    // In milliseconds.
var easeTime_Fill = easeTime + 500;     // Extra time for fills.

function clip(value, min, max)
{
    //var valueInBoundaries = Math.max(valueMin, Math.min(value, valueMax));

    if(value < min) value = min;
    if(value > max) value = max;

    return value;
}

function rangePercentage(value, min, max)
{
    value = clip(value, min, max);

    return ((value - min) * 100) / (max - min);
}

$('.fill').each(function()
{
    var valueMin = $(this).attr('data-valueMin');
    var valueMax = $(this).attr('data-valueMax');
    var value = $(this).attr('data-value');

    if(typeof value !== typeof undefined && value !== false)
    {
        if(typeof valueMin == typeof undefined || valueMin == false) valueMin = "0";
        if(typeof valueMax == typeof undefined || valueMax == false) valueMax = "100";

        var percentage = rangePercentage(value, valueMin, valueMax);

        $(this).animate({
            width: percentage + "%"
        }, easeTime_Fill, easeMethod);
    }
});

由于某种原因，它不起作用。当我执行alert时，它给了我正确的百分比，但当我将它插入JQuery函数时，nada，就像它是0一样。

Answer 1

您可以尝试在JQuery函数中调用该方法，而不是为百分比创建单独的变量吗？

$(this).animate({    
    width: rangePercentage(value, valueMin, valueMax) + "%"    
}, easeTime_Fill, easeMethod);

Answer 2

您的裁剪方法仍有错误，因此它会转换每个值＆lt;最大到最大

function clip(value, min, max){
    //this version may behave weird if you don't pass in numbers
    //so you have to take care of the types!
    //but to me it's more readable than the min-max-version
    return value > min? value < max? value: max: min;

    //this will convert everything to numbers
    return Math.max(min, Math.min(max, value));
}

function rangePercentage(value, min, max){
    //the subtractions convert all inputs to numbers.
    //therefore this version is a bit more tolerant than clipping the value,
    //because we can ensure that we always pass numbers to clip()
    return clip( (value - min) / (max - min) * 100, 0, 100 );
}

$('.fill').each(function(){
    //don't do the same task over and over again, if you don't have to
    var $this = $(this);

    //the `+` converts everything to numbers.*
    //but it's not very flexible when dealing with leading whitespace
    //in such cases you might want to use parseFloat() instead, 
    //or trim() the string first.
    var valueMin = +$this.attr('data-valueMin');
    var valueMax = +$this.attr('data-valueMax');
    var value = +$this.attr('data-value');

    //better check wether you actually have a number, instead of
    //this big bulk of condition wich still doesn't ensure you valid inputs
    if(!isNaN(value)){
        if(isNaN(valueMin)) valueMin = 0;
        if(isNaN(valueMax)) valueMax = 100;

        var percentage = rangePercentage(value, valueMin, valueMax);
        $(this).animate({
            width: percentage + "%"
        }, easeTime_Fill, easeMethod);
    }
});

+将所有内容转换为数字，但在这种情况下处理前导空格时，它可能不太灵活，您可能需要先使用parseFloat（），或先修剪（）字符串。 / p>

仅为了方便

//to convert everything to numbers, converts NaN's to 0.
function number(value){ return +value || 0 }
function int(value){ return value | 0 } //only last 32 bits (sign + 31 bits)
function uint(value){ return value >>> 0 }  //last 32 bits

Javascript函数返回不可用的值

2 个答案: