The jquery plug-in that handles symbols, integers, decimals, and units showing different styles in the amount

Demand:

When making a product, make a product amount, as shown in

A total of four parts, the first part may display the money symbol ￥, the second part is the amount integer part, the third part is the amount fractional part, the Part IV is the unit of the amount

The amount received from the background is a whole, if such a scene with a lot of, then each time you need to use JS to data processing once, and then give different styles.

Design:

The HTML structure we can design is probably like this.

<style>

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

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

. Price-font {color: #595757; font-family: "Microsoft Yahei"; font-size: 16px; }

</style>

<p>

<span class= "PRICE-LG" >9999</span>

<span class= "Price-mid" >.99</span>

<span class= "Price-font" > Yuan </span>

</p>

In fact, the amount in P element is handled well, we get the data is 9999.99, if the amount is 99999.99 yuan, then the display should be 99,900 yuan. So it's hard to handle with pure HTML

We can create a plugin based on jquery that automatically decomposes the amount and then gives the style a display.

<p uipn= "Cccprice" uipd= "{price: ' 9999.99 ', Css:{integerpart: ' Price-lg ', Decimalspart: ' Price-mid ', UnitPart: ' Price-font '}} ' ></p>

UIPN is a custom attribute, the parameter is the method name of the plug-in

UIPD is a custom attribute and the parameter is the data required by the plug-in

Define an auto-execute common.js, this JS automatically obtains the element that has the UIPN attribute in the page, then looks for the plugin of the name in the attribute, automatically executes. The code is as follows:

$ (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 (' ERROR ' + e.name + ': ' + e.message+ ' pluginname not present, or Plugindata data parsing error! ");
}
});
}
}) (JQuery);

Define ui.price.js with the following code:

/** * for split amount * need to introduce jquery * need to introduce xr.ui.common.js, position placed behind the introduced plugin * Use example <p xrpn= "Cccprice" xrpd= "{price: ' 899999989.99 ', Css:{integerpart: ' Price-lg ', Decimalspart: ' Price-mid ', Unitpart: ' Price-font '} ' ></p>*/(function ($) {    varCSS ={integerpart:"Integerpart",//the integer portion of the amountDecimalspart: "Decimalspart",//number of decimal parts of the amountUnitpart: "Unitpart",//number portion of the amountSignpart: "Signpart"//symbol portion of amount    }    //Create a SPAN element    functionCSpan () {return$ ("<span></span>"); }    /** * Create HTML code*/    functionCreatehtml ($ This) {        varPrice = Options.price + ""; CSS= Options.css | |CSS; varIntegercss =Css.integerpart; varDecimalscss =Css.decimalspart; varUnitcss =Css.unitpart; varSigncss =Css.signpart; varPspanint =CSpan (); varPspandecimals =CSpan (); varPspanuint =CSpan (); //define an array of amounts        varPARR =NewArray (); 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]); }        //Process the amount.         varPlen = parr[0].length; //Note: If the amount is $88, the background should give the data 88.00 yuan, if it is 88.8 yuan, the data should be given 88.80 yuan. That is, no data after the decimal point should be 0        //The amount of the judgment is RMB 888888888.88 yuan--888 million yuan        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 ("Billion Yuan"). addclass (UNITCSS); }        //judgment amount is million yuan 88888.88 yuan--88800 yuan        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 ("Thousand Yuan"). addclass (UNITCSS); }        //determine the amount of the unit is RMB 8.88 yuan        Else{ Price= Price + ""; Pspanint.html (Price.split (".") [0]). addclass (INTEGERCSS); Pspandecimals.html ("." + Price.split (".") [1]). addclass (DECIMALSCSS); Pspanuint.html ("Yuan"). addclass (UNITCSS); }        $ This. HTML (""); if(options.bshowmoneysign) {varSignspan =CSpan (); Signspan.html ("￥"). addclass (SIGNCSS); $ This. Append (Signspan); }        $ This. Append (Pspanint). Append (Pspandecimals). Append (Pspanuint); }    /** Public method Body * @type {{init:function, destroy:function, option:function}}*/    varMethods = {        /** * Initialization function * @param initoptions * @returns {*}*/Init:function(initoptions) {var$ This= $( This); return  This. each (function() {Options=$.extend ({}, Options, $.fn.cccprice.defaults, initoptions); Createhtml ($ This);        }); },        /** Reserved function * @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                returnOptions[key]; }    }    varMethodName = "Cccprice"; varOptions = {}; /** Plugin Entry * @returns {*}*/$.fn.cccprice=function () {        varmethod = Arguments[0]; if(Methods[method]) {method=Methods[method]; Arguments= Array.prototype.slice.call (arguments, 1); } Else if(typeofmethod = = = "Object" | | !method) {Method=Methods.init; } Else{$.error ("Method (" + Method + ") does not exist on" +methodName); return  This; }        returnMethod.apply ( This, arguments); }    /** * The data used by the plugin * @type {{data:array, classname:string, postload:null}}*/$.fn.cccprice.defaults={bshowmoneysign:false  //whether to display the ￥ symbol in front of the amount, which is not displayed by default    };}) (jQuery);

View Code

JS introduced in order

1.jquery

2.ui.price.js

3.common.js

The jquery plug-in that handles symbols, integers, decimals, and units showing different styles in the amount