求助前端大神们指点,弹出框与进度条整合,进度条无法显示 5C

(function() {
var mamture_progress = $('#mamture_progress');
var progress_content = $('#progress_content');
var l = 0;
var _number = progress_content.attr('data-progress');
var timer = null;
var pro = 0;

if (_number < 10) {
    lad(_number, 10, '.progress-box-1', function() {
        $('.progress-box-1').append(
                '<span>您需要处理的流程' + (_number) + '条<br/>影响发芽啦</span>');
    });
}
;

if (_number >= 10 && _number < 60) {
    lad(10, 10, '.progress-box-1', function() {
        mamture_progress.addClass('v1');
        lad(_number - 10, 60 - 10, '.progress-box-2', function() {
            $('.progress-box-2').addClass('active');
            $('.progress-box-2').append(
                    '<span>您需要处理的流程' + (_number) + '条<br/>影响长枝啦</span>');
        });
    });
}
;

if (_number >= 60 && _number < 150) {
    lad(10, 10, '.progress-box-1', function() {
        mamture_progress.addClass('v1')
        lad(60, 60, '.progress-box-2', function() {
            mamture_progress.addClass('v2');
            lad(_number - 60, 150 - 60, '.progress-box-3', function() {
                $('.progress-box-3').addClass('active');
                $('.progress-box-3')
                        .append(
                                '<span>您需要处理的流程' + (_number)
                                        + '条<br/>影响结果啦</span>');
            })
        });
    });
}
;

if (_number >= 150 && _number < 300) {
    lad(10, 10, '.progress-box-1', function() {
        mamture_progress.addClass('v1')
        lad(60, 60, '.progress-box-2', function() {
            mamture_progress.addClass('v2')
            lad(150, 150, '.progress-box-3', function() {
                mamture_progress.addClass('v3')
                lad(_number - 150, 300 - 150, '.progress-box-4',
                        function() {
                            $('.progress-box-4').addClass('active');
                            $('.progress-box-4').append(
                                    '<span>您需要处理的流程' + (_number)
                                            + '条<br/>我都不想说了</span>');
                        })
            })
        });
    });
}
;

if (_number >= 300) {
    lad(10, 10, '.progress-box-1', function() {
        mamture_progress.addClass('v1')
        lad(10, 10, '.progress-box-2', function() {
            mamture_progress.addClass('v2')
            lad(60, 60, '.progress-box-3', function() {
                mamture_progress.addClass('v3')
                lad(150, 150, '.progress-box-4', function() {
                    mamture_progress.addClass('v4')
                    lad(_number - 300, 650, '.progress-box-5')
                })
            })
        });
    });
}
;

/*
 * @number : 成长值 @max : 最大值 @callback : 回调方法
 */
function lad(number, max, cls, callback) {
    l = 0;
    timer = setInterval(function() {
        if (number <= 200) {
            l++;
        } else if (number > 200 && number <= 1000) {
            l += 5;
        } else if (number > 1000 && number <= 5000) {
            l += 10;
        } else if (number > 5000 && number <= 10000) {
            l += 20;
        } else {
            l += 30;
        }
        ;

        pro = (l / max) * 100; // 100为 div的长度
        if (l >= number) {
            clearInterval(timer);
            if (callback)
                callback(); // 回调
        }
        ;
        $(cls).css({
            width : pro + 'px'
        })
    }, 1)
}

})();


这个是简洁易用的弹框插件simpleAlert的地址:http://www.jq22.com/jquery-info16160,
在content的内容中加入html(其中包括引入的进读条)图片说明
就是进度条的js没生效,求助大神们指点;图片说明
(进度条的地址:http://www.jq22.com/jquery-info9173,会员等级显示)
引入的js图片说明

6个回答

看一下你引用进度条的script代码

one_girl
ygman 回复jackleeonlyone: 你的lad()方法里的数据还是用的原来的,根据你设置的_number的值为10往下走,执行不到这里就回调走了$(cls).css({ width : pro + 'px' })
2 年多之前 回复
jackleeonlyone
jackleeonlyone 你看下
2 年多之前 回复

这需要用JS来判断步长,计算好步长跟小图标、线条状态改变时间

图片说明
根据自己上面设的距离改一下这里的值就好了

jackleeonlyone
jackleeonlyone 好像不行,应该js是没起到作用
2 年多之前 回复

图片说明这个就是原始js位置,在HTML下面执行

这样就可以了
图片说明

jackleeonlyone
jackleeonlyone 就是这样不行,这个是放到head的位置,应该放到body的尾部,这个我已经弄好的了,你看下面,还是谢谢你
2 年多之前 回复

图片说明,我就是放到弹出框js中,也是HTML的尾部

jackleeonlyone
jackleeonlyone 回复一个慢: 就是请教一下,怎么把这个进度条整体缩小
2 年多之前 回复
jackleeonlyone
jackleeonlyone 回复一个慢: 就是你的可以给看看么,目前这个问题已经解决了
2 年多之前 回复
one_girl
ygman 照着你的方法,我把那两个插件融在一块,发现我的弹出框里的进度条能跑起来。。不知道你的是哪里出了问题,你再仔细检查看看吧
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问