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