悠择商城项目之涉及知识点二

 

1，页面滚动实现方式一：（分页加载内容）

　　

//有个小bug，滚动条滑动到底部，然后再往上滑动的时候也会加载数据，待优化，
jsp页面A

<script>
        var page=1;
        
        $(document).ready(function () {
　　　　
　　　　　　　　$(window).scroll(function(){

var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrollTop;
var docHeight = document.body.clientHeight;
var pageHeight = window.innerHeight;
var go = parseInt(docHeight) - parseInt(pageHeight);
if (nowScrolledHeight >= go) {
　　page++;
　　request_data={
　　　　page:page,
　　　　pageSize:pageSize,
　　}
　　$.post(request_url,request_data,function(back_data){
　　　　$("#scroll_load_merchantbasicDataList").append(back_data);
　　});
　　/* ajax_post(request_url,request_data,function(back_data){
　　　　$("#scroll_load_merchantbasicDataList").append(back_data);

　　}); */
}

 

});

        });
     </script>

jsp页面B
　　　请求到页面jsp页面B后，B页面会将整个页面响应给页面A的ajax请求

 2.页面校验

    <!-- 手机号码校验 -->    <script type="text/javascript">

        //传入当前元素的jquery对象
          function isPoneAvailable(ele) {
             var $ele=$(ele);
             
             //每次输入一位进行校验,只能输入数字
             var reg_num=/^[0-9]+$/;
             if(!reg_num.test($ele.val())){
                 
                 //alert("请输入有效的手机号");
                 
                 layer.open({
                     content : '请输入有效的手机号',
                     area:["500px","400px"],
                     skin : 'msg',
                     time : 2
                 });
                 $ele.val("");
             }
             
             var phone_num=$ele.val().trim();
             var phone_num_length=phone_num.length;
             
             //长度为11位校验
             if(phone_num_length ==11){
                 var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                  if (!myreg.test($ele.val())) {
                     
　　　　
　　　　　　　　　　　　　　alert("请输入有效的手机号");

                      $ele.val("");
                      return false;
                  } else {
                      return true;
                  }
             }
              
          }


    </script>

　　//元素中要添加
　　onkeyup="isPoneAvailable(this)"　　事件

 3.购物车点击增加和勾选时价格的变化

 

　　//加商品到购物车
　　mui("body").on('tap','.add_product_to_shoppingCart_refresh',function(){　　//

mui在IOS下有时候会input会无法聚焦，要给input加上type="text"

　　　　var pro_id = $(this).attr("pro_id");
　　　　var count = $(this).attr("count");
　　　　var count=parseInt(count);
　　　　var pro_num_ele = $(this).siblings(".pro_num");

　　　　//点击加号或者减号后，页面显示的数量的显示
　　　　pro_num_ele=$(pro_num_ele);
　　　　var pro_num=parseInt(pro_num_ele.html().trim());
　　　　//不为零则显示
　　　　

//不为零则显示
　　　　if(pro_num+count !=0){
　　　　　　pro_num_ele.html(pro_num+count);


　　　　}
　　　　else{

　　　　　　/*//为一不能再减
　　　　　　pro_num_ele.html(1);*/


　　　　　　//一再减就删除整个节点删除整个节点
　　　　　　$(this).parent().parent().parent().detach();

　　　　　　//当购物车为空的时候 重新点击刷新本页
　　　　　　if($(".ck_box").length==0){
　　　　　　location.reload(); //刷新页面 true:无缓存刷新    页面回退回重新加载js，其余有待扩展
　　　　　　}
　　　　}

mui("body").on('tap','.checkbox_tap_event',function(event){
　　//阻止冒泡事件
　　event.stopPropagation(); 　

　　//阻止默认事件

　　//event.preventDefault()
　　var checkboxinput=$(this).find("#checkboxinput");
　　var $checkboxinput=$(checkboxinput);
　　var checked=$checkboxinput.prop("checked");
　　$checkboxinput.prop("checked",!checked);
　　sum_total_price();
})

　　　　sum_total_price();

　　　　var request_url=basePath+"tradeFront/add_product_to_shoppingCart.do";

　　　　　　var request_data = {
　　　　　　productId:pro_id,
　　　　　　count:count,
　　　　};

　　　　　　ajax_post(request_url,request_data,function(back_data){
　　
　　　　　　// window.location.href=basePath+"shop/shop_gouwuche2.jsp";
　　　　　　});
　　　　})
　　}

//计算页面上的被选中的商品的价格之和
function sum_total_price(){
        var sum=0;
     $(".ck_box").each(function(){
         
         var pro_price=$(this).attr("pro_price");
         
         pro_price=parseFloat(pro_price);
         //祖先节点
         var ele_tmp=$(this).parent().parent();
         
         //数量节点
         var pro_num_ele = $(ele_tmp).find(".pro_num");
         
         pro_num_ele=$(pro_num_ele);
         
         //数量节点的值
        var pro_num=parseInt(pro_num_ele.html().trim());
        
        //计算变化的总值
        var item_price=pro_num*pro_price;
        
         sum+=parseFloat(this.checked?item_price:0);//如果选中就加选中的那个复选框的值，否则就减去
         //固定两位小数，，，这里需要另外一个变量接收，否则会报错
        var  sum2=sum.toFixed(2);

         document.getElementById('total_price').innerHTML=sum2;
         
         }
     )
    }

 4，css相关小知识点

 

<!--    隐藏 -->
    style="visibility: hidden;"  :不可见但占空间
    style="display: none;"      :不展示但不占用空间         
    hidden="hidden"              :隐藏但占用空间

/* 阻止长按图片在微信端的默认事件*/
#speak_button img{ pointer-events: none; }

 5，jstl使用小知识点

jsp页面

取list长度
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%--        ${fn:length(list)}   取得list的长度 --%>


根据奇偶性控制输出的内容不同

　<c:if test="${not empty product_list }">　　
　　　　<c:forEach items="${product_list }" var="product" varStatus="status">
　　　　　　<c:if test="${status.index%2==0 }">

页面显示小数取整问题

　　<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

 <fmt:formatNumber type='number' value="${trade_dingdan.quantity/100}" maxFractionDigits='0'/> 

截取字符串

<!-- 商家可能含有（）也可能没有 -->
<c:choose>
　　<c:when test="${fn:contains(merchant_showName,'（')}">
　　　　<div class="shout_aa2 mui-row">
　　　　　　我想去${merchant_showName.substring(0,merchant_showName.indexOf("（")) }吃霸王餐
　　　　</div>
　　</c:when>
　　<c:otherwise>
　　　　<div class="shout_aa2 mui-row">
　　　　　　我想去${merchant_showName}吃霸王餐
　　　　</div>
　　</c:otherwise>
</c:choose>