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

 

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>