消费金额进度条

[css]代码库

/*我的年度消费金额模块*/

        $(function () {

            var dangqian = $('.Avatar_r b').eq(1).html();

            var moneySpan = $('.money span');

            var moneyZero = $('.money .zero');

            var moneyEight = $('.money .eight');

            var moneyFiften = $('.money .fiften');

            var moneyThrity = $('.money .thrity');

            var moneytopdiv = $('.moneywarptop div');




            var spanmaxwidth = 693;




            $('.moneywarptop span').html(dangqian);

            toSpanWidth(parseInt(dangqian));




            function toSpanWidth(money) {

                if (money >= 0 && money < 800) {

                    moneySpan.width(money / 800 * 188);

                    moneyZero.removeClass('grey').addClass('yellow');

                    moneytopdiv.css("left", "69px").css("top", "-24px");

                }

                else if (money >= 800 && money < 1500) {

                    moneySpan.width((money - 800) / 700 * 188 + 224);

                    moneyZero.removeClass('grey').addClass('yellow');

                    moneyEight.removeClass('grey').addClass('yellow');

                    moneytopdiv.css("left", "286px").css("top", "-24px");

                }

                else if (money >= 1500 && money < 3000) {

                    moneySpan.width((money - 1500) / 1500 * 184 + 450);

                    moneyZero.removeClass('grey').addClass('yellow');

                    moneyEight.removeClass('grey').addClass('yellow');

                    moneyFiften.removeClass('grey').addClass('yellow');

                    moneytopdiv.css("left", "509px").css("top", "-24px");

                }

                else if (money == 3000) {

                    moneySpan.width(640);

                    moneyZero.removeClass('grey').addClass('yellow');

                    moneyEight.removeClass('grey').addClass('yellow');

                    moneyFiften.removeClass('grey').addClass('yellow');

                    moneyThrity.removeClass('grey').addClass('yellow');

                    moneytopdiv.css("left", "509px").css("top", "-24px");

                }

                else {

                    moneySpan.width(spanmaxwidth);

                    moneyZero.removeClass('grey').addClass('yellow');

                    moneyEight.removeClass('grey').addClass('yellow');

                    moneyFiften.removeClass('grey').addClass('yellow');

                    moneyThrity.removeClass('grey').addClass('yellow');

                    moneytopdiv.css("left", "509px").css("top", "-24px");

                }

            }

        });