最近在时间很忙，在弄一个B2B商城，运用到的easyUI【后台系统】+javaWEB(maven)+JQuery【前台系统】+Scss+JavaScript+其他框架(sea.js模块化等),我负责前端这块：后期的重要的前端代码，都会发布出来
1、60s短信验证码发送code：
//60s无效 forget 要引用的话，后期如果，jquey代码庞大的话，就考虑在封装的基础上，在进行封装、压缩精简代码。
$('.forget span.btn-small').on('click',function(){
!$(this).hasClass('btn-gray') && sendCode($(this),60);
}); //发送验证码方法封装
function sendCode(obj,cur){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(cur>0) {
obj.addClass('btn-gray').html('(' + (cur--)+ 's后获取)');
}else{
clearInterval(obj.timer);
obj.removeClass('btn-gray').html('获取验证码');
}
},1000);
}
验证码
2、购物车数量、金额、统计
//计算每行的小计金额
function lineMoney(oCur){
var $oCur=oCur.parents('.order-tr'); //当前单击的选中行
var cNum=parseInt($oCur.find('.key-3 input').val());
var cCoupon=Math.abs(parseFloat($oCur.find('.key-4 div').text()));
var cPrice=parseFloat($oCur.find('.key-2 em').text());
var cLineMoney=(cPrice-cCoupon)*cNum;
toFix(cLineMoney+'', $oCur.find('.key-5'), 'em');
} //统计：应付款、总优费 pObj当前对象----->对应的就是选中的那一行
function moneyCount(pObj){
//单击选中店铺下的所有商品 优费金额：x_total,,,,,应付金额：z_total
var x_total=0,z_total=0;
var $$oo=pObj.parents('.order-note-border').find('.order-tr :checked');
$.each($$oo, function(inx, obj) { //遍历所有已选中的商品，并累计价格
var $cur=$(obj).parents('.order-tr');
var iNum=parseInt($cur.find('.key-3 input').val());
var iCoupon=Math.abs(parseFloat($cur.find('.key-4 div').text()));
x_total+=iCoupon*iNum;
z_total+=parseFloat($cur.find('.key-5 em').text());
});
toFix('-'+x_total,$('li.pdu-money'),'em','¥');
toFix(''+z_total,$('li.go-wind'),'em','¥');
} //购买件数
function buy_Num(pClass,fClass){
var buy=0;
$(pClass).each(function(inx, ele){
if(!$(this).hasClass(fClass)) {
buy+=$(this).find('input[type="checkbox"]').filter(':checked').size();
}
});
$('.pdu-select em').text(buy);
buy>0?$('.cart-count a').removeClass('gen-dis'):$('.cart-count a').addClass('gen-dis');
} //固定金额小数后2位toFix() str格式的字符串 pObj父对象 sClass：指定输出的位置上的selector ---> class要带上'.'
function toFix(str,pObj,sClass,$){
var dInx=str.indexOf('.');
var $$=$||'';
if(dInx>0)
if(str.charAt(dInx+1) && str.charAt(dInx+2)) {
pObj.find(sClass).text($$+str.substring(0,dInx+3));
} else {
pObj.find(sClass).text($$+str.substring(0,dInx+3)+'0');
}
else {
pObj.find(sClass).text($$+str+'.00');
}
}
购物车统计金额、数目
3、静态化模板artTemplate(传说中性能很有优势的一个模板化，此商城自然少不了这个东西引入，，，呵呵！！！)
<!----//店铺--------->
<script id="submitOrders_ShopsTpl" type="text/html">
<div class="order-note">
<div class="note-tit">
<span>{{bUserSellerName}}</span>
<i class="order-em">满100减20</i>
<div class="ps-ipt"><input type="text" placeholder="备注"></div>
</div>
<div class="order-details">
<div class="order-tbody">
<!--具体商品列表----->
</div>
<div class="order-ifs">
<div class="order-stat">
<div class="other-count">
<div class="other-sel">
<span>配送方式:</span>
<span><a href="javascript:;" class="font-on">包邮</a></span>
</div>
<div class="other-doller">
<ul>
<li>
<span>运费:</span>
<span><em>0.00</em></span>
<span>元</span>
</li>
<li>
<span>优惠:</span>
<span><em>200.00</em></span>
<span>元</span>
</li>
</ul>
</div>
</div>
<div class="order-counts">
<span>小计:</span>
<span><em>40006.10</em></span>
<span>元</span>
</div>
</div>
</div>
</div>
</div>
</script>
<!----//店铺下已选购的商品--------->
<script type="text/html" id="shopListTpl">
<div class="order-tr">
<div class="key-0">
<div class="order-pic">
<img src="img/pdu/b1.jpg" alt="{{skuName}}">
</div>
<div class="order-describe">
{{skuName}}
<div class="order-em">{{skuCommodity_price}}</div>
</div>
</div>
<div class="key-1">
<div>
<span>1段</span>
<span>800g</span>
</div>
</div>
<div class="key-2">
<div>
<s>{{skuCommodity_price}}</s>
<div>
<em>{{skuCommodity_price}}</em>
</div>
</div>
</div>
<div class="key-3">
<div>{{skuCommodity_surplus_count}}</div>
</div>
<div class="key-4">
<div>
-20.00
</div>
</div>
<div class="key-5">
<div>
<em>{{skuCommodity_price}}</em>
</div>
</div>
</div>
</script>
<script>
$(function(){
$.ajax({
url: "json/subOrder.json",
//data:params或者data, /***async：是否同步 datatype:数据类型*******/
async:false,
dataType:"json",
beforeSend:function(){},
success: function(data){ //此data---->json的整个的数据data
if(data.code == 100){
if(data.content.rows){
for(var i = 0; i < data.content.rows.length; i++){
//具体行------>父节点数据
var fatherData = data.content.rows[i];
var fatherShopNameTpl = $(template('submitOrders_ShopsTpl', fatherData)); //将fatherData数据渲染到template中
var sonList = fatherData.userList; //得到相应店铺下已选购的商品list数组列表
var sonLength = sonList.length; //此处定义一个临时变量存储商品列表的长度，为防止重复访问变量，而做此步
for(var j = 0; j< sonLength; j++){ //遍历每一个list
var sonData = sonList[j]; //要是一个数组:sonData
var sonShopsTpl = $(template('shopListTpl', sonData)); //渲染店铺下对应的数据到商品template中
fatherShopNameTpl.find(".order-tbody").append(sonShopsTpl); //添加子到父，---->对应到商品添加到相应店铺中
}
$(".order-note-border").append(fatherShopNameTpl); //最后添加所有的数据到页面里
}
}
}
},
error:function(){}
});
});
</script>
artTemplate
4、购物车数据渲染到提交的订单页面（这个功能吭的要命，主要原因是之前全部写好了，都要从库中拿数据，结果一个项目负责人一个无厘头要求，要购物车提交的订单不能经过从库中到提交页面，说白了，不访问数据库哇，这个功能吭的要命，明理就是ajax，但是厌烦那种拼串的日子，怎么弄，，，结果是弄出来了，因为这个项目是artTemplatejs模板渲染数据，妈的直接封装一个专门的渲染数据的方法，执行ajax请求成功的时候，让其也执行一遍。详细过程，大家看代码，2个静态页面通过js传值。
//单击‘去下单’按钮并执行将购物车的数据通过js模板渲染到submit.html页面中
$(function(){
$('a.red-def-btn').click(function(){
var aFatherData=[],aSonData=[];
//店铺列表
$.each($('.note-tit .checked'),function(){
aFatherData.push($(this).find('input').data('fData'));
//这里清空userList 数组的长度，主要是为了清空userList下的数据，为后面动态加入数据辅助
$(this).find('input').data('fData').userList.length=0;
}); //商品列表
$.each($('.order-tr .key-0 .checked'),function(){
for(var i=0; i<aFatherData.length; i++){
//在这通过判断选中的商品所属店铺然后动态插入数据
aFatherData[i].bUserSellerName==$(this).parents('.success-order-note').find('.note-tit span').text() && aFatherData[i].userList.push($(this).find('input').data('sData'));
}
}); //动态执行ajax,并动态渲染js模板数据到订单页面submitOrders.html
$.ajax({
url:"submitOrders.html",
type: 'get',
async:false,
dataType: 'html',
beforeSend:function(){},
success:function(data){
var $otherHTML=$(data);
$('body').html($otherHTML);
tplData(aFatherData);
},
error:function(){}
});
//console.log(JSON.stringify(aFatherData));
});
});
从购物车至订单页面通过js传值
5、css3动画
&::after{content: ""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:10px; box-shadow: inset 0 0 0.375em rgba(255,0,0,0.75); transform: scale(1); animation: rep 2s infinite ease;}
css3动画
//定义帧动画
@keyframes rep{
0% {opacity: 0;}
20% {opacity: 1; transform: scale(2);}
50%,100%{opacity: 0; transform: scale(3);}
} //解决ff/chrome 1px问题
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.ffox{padding-top: 4px !important;}
}
帧动画
6、网站地址重定向一个基准地址：base(href, target，域名可以解决ie8的兼容性问题)
function cStar(){
//每条评论星星显示控制，实时
$.each($('.toldDetail'), function(inx,ele){
var rule=$(ele).find('.toldRule').data('userscore');
for(var i=0; i<=5-rule; i++){
$(ele).find('.toldRule i').eq(5-i).addClass('rmR');
}
});
//商品满意度星星显示控制
var avg=$('.showS').data('avgscore')+'';
var ogg=parseInt(avg)-1;
var dott=Subtr(parseFloat(avg),parseInt(avg));
var w=accMul(dott,16)+'px'; //防止精度丢失
var $aFull=$('.full1 i'); //色块
$.each($('.showS i'), function(inx, ele) {
$(ele).css('left', inx*22+44+'px'); //布局转换思想
});
$.each($('.showS i'), function(inx, ele) {
$(ele).css('position', 'absolute');
if(inx<=ogg) {
//整数部分通用
$(ele).css('background-color', '#FF5F8A');
blockColor($aFull.eq(inx),inx);
}
if(ogg+1==inx){
//改变左边星星小数部分色块
var $em=$('<em style="left:'+(44+inx*22)+'px;width:'+w+'"></em>');
$(ele).after($em);
//改变右边色块小数部分
blockColor($aFull.eq(inx),inx);
$aFull.eq(inx).css('width',dott*80+'px');
}
});
function blockColor(obj,num){
switch(num){
case 0:obj.addClass('bkOne'); break;
case 1:obj.addClass('bkTwo'); break;
case 2:obj.addClass('bkThr'); break;
case 3:obj.addClass('bkFor'); break;
case 4:obj.addClass('bkFive'); break;
}
}
}
//这里同时绑定了多个鼠标事件 星星评价
$('li.de-tail').on('mouseover mouseout click', '.de-star>i', function(e){
var $this=$(this); //单击了，就保存当前对象
var $aI=$this.parent('.de-star').find('i');
if(e.type=='mouseover'){
for(var i=1; i<=5; i++){
$aI.eq(i-1).removeClass('red-star');
for(var j=1; j<=$this.attr('ipos'); j++) {
$aI.eq(j-1).addClass('red-star');
}
}
$this.attr('cFlag',0);
}else if(e.type=='mouseout'){
if(!parseInt($this.attr('cFlag'))){
for(var i=1; i<=5; i++){
$aI.eq(i-1).removeClass('red-star');
for(var j=1; j<=$this.parents('li.de-tail').attr('ix'); j++){
$aI.eq(j-1).addClass('red-star');
}
}
}
}else{
$this.parents('li.de-tail').attr('ix',$this.attr('ipos'));
$this.attr('cFlag',1);
$.each($aI,function(inx, ele){
for(var i=1; i<=5; i++){
$aI.eq(i-1).removeClass('red-star');
for(var j=1; j<=$this.parents('li.de-tail').attr('ix'); j++){
$aI.eq(j-1).addClass('red-star');
}
}
});
}
});
满意度实时更新；星星评价动态改变
7、ajax回退历史记录（回退之前保存记录、并返回刷新、跳转）
//提交支付回退至购物车 另外jQ中$(function(){})|$(document).ready(function($){})：载入 (function($){})(jQuery)：匿名写法 自执行
//history.pushState|replaceState(state, title, url)
//state：与要跳转到的URL对应的状态信息。title：标题(现在是被忽略，未作处理)。url：要跳转到的URL地址，不能跨域。
if (window.history && window.history.pushState) { //这里做下兼容处理，因为jq不存在history封装，只能通过原生
$(window).on('popstate', function () { //点击回退，就会触发这个操作
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
window.location.reload();
}
}
});
window.history.pushState('forward', null, 'stc/customer/ahtmls/order/back_fullOrderCart.html');
}
function goHisCart(){
var his=$.getCookie('uHis');//主要为了给回退购物车历史做辅助
var hef=Request('hef'); //截取地址栏的参数
if(his||hef){
$('.asideItem li').each(function(inx,ele){
if($(ele).data('his')==his||$(ele).data('his')==hef) {
$(".asideItem li").removeClass('as-on');
$(ele).addClass("as-on").trigger('click');
}
});
}else{
return;
}
}
Ajax回退历史记录
8、