处理金额中符号、整数、小数、单位显示不同样式的jquery插件

浏览数：38 / 时间：2015年06月09日

需求：

做商品的时候，要做商品金额，如下图所示

技术分享

一共有四个部分，第一部分可能显示金钱符号￥，第二部分是金额整数部分，第三部分是金额小数部分，第四部分是金额的单位

从后台拿到的金额是一个整体，如果这样的场景用的很多，则每次都需要用js对数据处理一次，然后赋予不同的样式。

设计：

我们可以设计的HTML结构大概是这样的

<style>

.price-lg {color: #e50013;font-size: 56px;font-family: "arial";}

.price-mid {color: #e50013;font-size: 42px;font-family: "arial";}

</style>

9999

.99

元

事实上，p元素中的金额是处理好的，我们拿到的数据是9999.99，如果金额是99999.99元，则显示的应该是9.99万元了。因此，用纯粹的html难以处理

我们可以基于jquery制作一个插件，自动分解金额，然后赋予样式显示。

uipn为自定义属性，参数为插件的方法名字

uipd为自定义属性，参数为插件需要的数据

定义一个自动执行的common.js，这个js自动获取到页面中拥有uipn属性的元素，然后寻找属性中名字的插件，自动执行。代码如下：

$(function () {
　　$.fn.xrPluginInit();
});

(function ($) {
$.fn.uiPluginInit = function () {
　　var uiPlugin = $("[uipn]");

　　$.each(uiPlugin, function (i, p) {
　　　　var pluginName = $(p).attr("uipn");
　　　　var pluginData = $(p).attr("uipd");
　　　　var initPluginStatement = ‘$(p).‘ + pluginName + ‘(‘ + pluginData + ‘)‘;
　　　　try {
　　　　　　eval(initPluginStatement);
　　　　} catch (e) {
　　　　　　console.log(‘错误‘ + e.name + ‘:‘ + e.message+"pluginName不存在，或者pluginData数据解析有误！");
　　　　}
　　});
}
})(jQuery);

定义ui.price.js,代码如下：

/**
 * 用于分割金额
 * 需要引入jquery
 * 需要引入xr.ui.common.js ,位置放到引入的插件后面
 * 使用示例   <p xrpn="cccPrice" xrpd="{price:‘899999989.99‘,css:{integerPart:‘price-lg‘,decimalsPart:‘price-mid‘,unitPart:‘price-font‘}}"></p>
 */
(function ($) {
    var css = {
        integerPart: "integerPart", //金额的整数部分
        decimalsPart: "decimalsPart", //金额的小数部分
        unitPart: "unitPart",  //金额的数字部分
        signPart: "signPart" //金额的符号部分
    }
    //创建一个span元素
    function cSpan() {
        return $("<span></span>");
    }

    /**
     * 创建html代码
     */
    function createHtml($this) {
        var price = options.price + "";
        css = options.css || css;
        var integerCss = css.integerPart;
        var decimalsCss = css.decimalsPart;
        var unitCss = css.unitPart;
        var signCss = css.signPart;
        var pSpanInt = cSpan();
        var pSpanDecimals = cSpan();
        var pSpanUint = cSpan();
        //定义一个金额数组
        var pArr = new Array();
        if (price.indexOf(".") > -1) {
            pArr.push(price.split(".")[0]);
            pArr.push(price.split(".")[1]);
            if (pArr[1].length < 2) {
                price = price + "0";
                pArr[1] = pArr[1] + "0";
            }
        } else {
            price = price + ".00";
            pArr.push(price.split(".")[0]);
            pArr.push(price.split(".")[1]);
        }
        //处理金额。
        var pLen = pArr[0].length;

        //注：如果金额是88元，后台应给出数据88.00元；如果是88.8元，应给出数据88.80元。即小数点后无数据应补零

        //判断金额单位是亿元   888888888.88元 --8.88亿元
        if (pLen > 8) {
            price = parseFloat(price) / 100000000;
            price = price + "";
            pSpanInt.html(price.split(".")[0]).addClass(integerCss);
            pSpanDecimals.html("." + price.split(".")[1].substring(0, 2)).addClass(decimalsCss);
            pSpanUint.html("亿元").addClass(unitCss);
        }
        //判断金额单位是万元   88888.88元 --8.88万元
        else if (pLen > 4) {
            price = parseFloat(price) / 10000;
            price = price + "";
            pSpanInt.html(price.split(".")[0]).addClass(integerCss);
            pSpanDecimals.html("." + price.split(".")[1].substring(0, 2)).addClass(decimalsCss);
            pSpanUint.html("万元").addClass(unitCss);
        }
        //判断金额单位是元   8.88元
        else {
            price = price + "";
            pSpanInt.html(price.split(".")[0]).addClass(integerCss);
            pSpanDecimals.html("." + price.split(".")[1]).addClass(decimalsCss);
            pSpanUint.html("元").addClass(unitCss);
        }
        $this.html("");
        if (options.bShowMoneySign) {
            var signSpan = cSpan();
            signSpan.html("￥").addClass(signCss);
            $this.append(signSpan);
        }
        $this.append(pSpanInt).append(pSpanDecimals).append(pSpanUint);
    }

    /**
     * 公共方法体
     * @type {{init: Function, destroy: Function, option: Function}}
     */
    var methods = {
        /**
         * 初始化函数
         * @param initOptions
         * @returns {*}
         */
        init: function (initOptions) {
            var $this = $(this);
            return this.each(function () {
                options = $.extend({}, options, $.fn.cccPrice.defaults, initOptions);
                createHtml($this);
            });
        },
        /**
         *预留函数
         * @returns {*}
         */
        destroy: function () {
            return this.each(function () {
            });
        },

        /**
         *
         * @param key
         * @param value
         * @returns {*}
         */
        option: function (key, value) {
            if (arguments.length == 2)
                return this.each(function () {
                    if (options[key]) {
                        options[key] = value;
                    }
                });
            else
                return options[key];
        }
    }

    var methodName = "cccPrice";

    var options = {};

    /**
     * 插件入口
     * @returns {*}
     */
    $.fn.cccPrice = function () {
        var method = arguments[0];
        if (methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if (typeof method === "object" || !method) {
            method = methods.init;
        } else {
            $.error("Method(" + method + ") does not exist on " + methodName);
            return this;
        }
        return method.apply(this, arguments);
    }

    /**
     * 插件使用的数据
     * @type {{data: Array, className: string, postLoad: null}}
     */
    $.fn.cccPrice.defaults = {
        bShowMoneySign: false  //是否显示金额前面的￥符号,默认不显示
    };
})(jQuery);