最近在时间很忙，在弄一个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>
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)); }); });
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;}
//定义帧动画 @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; } }
8、
