进度条算法

主要是百分比的换算,数值是否合法,造成了一连串的算法:

    var value=0,
        min=0,
        max=100,
        step=1,
        ratio=0;

    update();
    //更新进度只要调用setValue(_value)方法,比如setValue(35),就会显示35% 

    function setValue(_value) {
        value = _value;
        oldValue = value;
        console.log(value)
        update();
    };
    
    function update() {
        validateValue();
        ratio = calcRatio(value) * 100;
        $('.activeProgress').css('width', ratio + '%');
    };

    function calcRatio(_value) {
        var value = _value;
        return (clampValue(value) - min) / (max - min);
    };

    function clampValue(_value) {
        var value = _value;
        return Math.min(max, Math.max(min, calcStep(value)));
    };

    function calcStep(_value) {
        var value = _value;
        return step ? (Math.round(value / step) / (1 / step)) : value;
    };

    function validateValue() {
        var v = clampValue(value);
        value = oldValue = isNaN(v) ? oldValue : v;
        return value !== v;
    };

这里略去了第二进度以及setmax和setmin。

还有由于这段js原来写在命名空间中,没有发现直接引用形参的问题。

放出来作为全局变量以后,_value如果全部和value一样,不var拷贝一次就直接使用,setValue传参数就不会起作用了,返回undefin。

原文地址:https://www.cnblogs.com/haimingpro/p/4255594.html