需求：
做商品的时候，要做商品金额，如下图所示
一共有四个部分，第一部分可能显示金钱符号￥，第二部分是金额整数部分，第三部分是金额小数部分，第四部分是金额的单位
从后台拿到的金额是一个整体，如果这样的场景用的很多，则每次都需要用js对数据处理一次，然后赋予不同的样式。
设计：
我们可以设计的HTML结构大概是这样的
<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">元</span>
</p>
事实上，p元素中的金额是处理好的，我们拿到的数据是9999.99，如果金额是99999.99元，则显示的应该是9.99万元了。因此，用纯粹的html难以处理
我们可以基于jquery制作一个插件，自动分解金额，然后赋予样式显示。
<p uipn="cccPrice" uipd="{price:‘9999.99‘,css:{integerPart:‘price-lg‘,decimalsPart:‘price-mid‘,unitPart:‘price-font‘}}"></p>
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);
js引入的顺序
1.jquery
2.ui.price.js
3.common.js