移动端购物车全部s+css代码-html代码-BFW代码库

代码语言：html
所属分类：电商
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=zepto.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
    (function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
        bready(function() {
          /*计算总钱数*/

/*给单选框或复选框添加样式*/

	hide();
	total();
/*编辑*/
$("header span").click(function(){
       if ($(this).html()=="编辑") {
       	$(this).html("完成");
       	$(".bottom").eq(1).show();
       }else{
       	$(this).html("编辑");
       	$(".bottom").eq(1).hide();
       }
       hide();   
});
/*编辑*/
/*底部全选*/
$('.bottom-label input').change(function(){
		if ($(this).attr("checked")=="checked") {
			$(".con input[type='checkbox']").removeAttr("checked");
			$(".con input[type='checkbox']").next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
		}else{
			$(".con input[type='checkbox']").attr("checked","checked");
			$(".con input[type='checkbox']").next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
		}
		checkbox($(this));
})
/*底部全选*/
/*子项全选*/
$('.list input').change(function(){
	var $list_input=$(this).parents('.list').next('ul').find('input[type=checkbox]');
		if ($(this).attr("checked")==undefined) {
			$list_input.attr("checked","checked");
			$list_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
		}else{
			$list_input.removeAttr("checked");
			$list_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
		} 
		checkbox($(this));
		sum();
})
/*子项全选*/
$("ul input[type='checkbox']").change(function(){
	checkbox($(this));
	var $ul_input=$(this).parents('ul').prev('.list').find('input');
	if($(this).parents('ul').find("input[checked='checked']").length==$(this).parents("ul").children('li').length){	
		$ul_input.attr("checked","checked");
		$ul_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
	}else{
		$ul_input.removeAttr("checked");
		$ul_input.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
	} 
	sum();
})
/*点击加一*/
		$('.btn2').click(function(){
			$(this).prev('.number').html(parseInt($(this).prev('.number').html())+1);
			/*计算总钱数*/
		total();
		/*计算总钱数*/
		})
		/*点击加一*/
		/*点击减一*/
		$('.btn1').click(function(){
			if($(this).next('.number').html()==0)
				$(this).next('.number').html(0);
			else
				$(this).next('.number').html(parseInt($(this).next('.number').html())-1);	
				/*计算总钱数*/
				total();
				/*计算总钱数*/
		})
		/*点击减一*/
		$(".number").click(function(){
			$('.text1').css({"display":"flex","-webkit-display":"flex"}).attr({'ind':$(this).parents('li').index(),"ind_1":$(this).parents("ul").attr("ind")});
			$('.text1 input[type=number]').val($(this).html());
		})
		$('.text1 input[type="button"]').click(function(){
			if($('.text1 input[type=number]').val()==""){
				$('.alert').show().html('请输入数量！');
				 setTimeout(function(){$('.alert').hide();},2000);
				return false;
			}
			if ($('.text1 input[type=number]').val()>100) {
				$('.alert').show().html('超出库存了！');
				 setTimeout(function(){$('.alert').hide();},2000);
				return false;
			}
			$("ul").eq($('.text1').attr('ind_1')).find(".number").eq($('.text1').attr('ind')).html($('.text1 input[type=number]').val());
			$('.text1').css({"display":"none","-webkit-display":"none"});
			total();
		})
/*结算*/
$('.sett').click(function(){
	alert("你应付"+$(this).prev("span").html()+"元钱");
});
/*结算*/
/*删除*/
$('.delete').click(function(){
	$.each($('li'), function() {
		if ($(this).find("input[type=checkbox]").attr("checked")=="checked") {
			$(this).remove();
		}
	});
	$('input[type=checkbox]').attr("checked","checked");
	$('input[type=checkbox]').next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
	$.each($(".content"), function() {
		if ($(this).find("li").length==0) {
			$(this).remove();
		}
	});
	hide();
	total();
});
/*删除*/

        });
        function total(){
	setTimeout(function(){
		var S=0;
	    $.each($('.total'), function() {
	    	var $ul_total=$(this).prev('ul').find("input[type='checkbox']");
	    	var s=0;
	        var n1=0;
	    	$.each($(this).prev('ul').find(".number"), function(i) {
		if($ul_total.eq(i).attr("checked")=="checked"){
			s=s+parseInt($(this).html())*parseInt($(this).parent().prev().html().replace("￥",""));
			n1=n1+parseInt($(this).html());
		}
	});
	$(this).children("span").html("￥"+s.toFixed(1));
	$(this).children("number").html(n1);
	S=S+s;
	    });
	$(".bottom span").html(S.toFixed(1));
	},100)
}
/*计算总钱数*/
/*判断有无数据*/
function hide(){
	if ($(".content").length==0) {
		$(".bottom").hide();
		$(".no").css("display","-webkit-box");
		return;
	}else{
		$(".bottom").eq(0).show();
		$(".no").css("display","none");
	}
}
/*判断有无数据*/
/*判断是否全选*/
function sum(){
	if ($("ul input[checked='checked']").length==$("li").length) {
		$(".bottom input[type=checkbox]").attr("checked","checked");
		$(".bottom input[type=checkbox]").next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
	}else{
		$(".bottom input[type=checkbox]").removeAttr("checked");
		$(".bottom input[type=checkbox]").next("img").attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
	}
}
/*判断是否全选*/
/*给单选框或复选框添加样式*/
function checkbox($this){
	if($this.attr('type')=="checkbox"){
		   if ($this.attr('checked')=="checked") {
		   	$this.removeAttr("checked");
		   	 $this.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14e08dd3.png");
		   }else{
		   	 $this.attr("checked","checked");
		   	$this.next('img').attr("src","http://repo.bfw.wiki/bfwrepo/icon/5e0ea14247c73.png");
		   }
		}
		/*计算总钱数*/
		total();
		/*计算总钱数*/
}
    </script>
     <style>
     html { 
	font-family: "Helvetica Neue",Helvetica, sans-serif;
	/*谷歌浏览器字体最小字体12px*/
	-webkit-text-size-adjust: none;/*100%/none 关闭字体大小自动调整功能*/
	/*a标签及拥有 :active伪类的元素有默认的高亮框*/
	-webkit-tap-hightlight-color: transparent;
	/*禁止文本被选中*/
	-webkit-user-select: none;
	height: 100%;
}
*{
	margin: 0;
	padding:0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Microsoft YaHei";
	font-size: .67rem;
}
body{
	overflow-x:hidden;
	height: 100%;
	/*开启moblie网页快速滚动和回弹的效果*/
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	-webkit-text-size-adjust: none !important;
}
a{
	color: #333;
	text-decoration: none;
}
img{
	border: 0;
	display: block;
	width: 100%;
	vertical-align: middle;
}
button,input{
	        appearance: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	     outline: none;
	     border: none;
	     text-align: center;
}
.fl{
	float:left;
}
.fr{
	float:right;
}
.clearfix:after{
	content:"";
	display:block;
	width:100%;
	height:0;
	clear:both;
}
   h1,h2,h3,h4,h5,h6{
   	font-weight: normal;
   }
 .relative{
 	position: relative;
 }
 .absolute{
 	position: absolute;
 }
 .fixed{
 	position: fixed;
 }
 body{
	background: rgba(238,238,238,.5);
}
/*澶撮儴*/
header{
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	padding: 0 .5rem;
	position: relative;
	color: #666;
	border-bottom: .02rem solid gray;
}
header span{
	position: absolute;
	right: .67rem;
}
/*澶撮儴*/
.con{
	margin-bottom: 3rem;
}
.content{
	border-bottom: .8rem solid #c3c1c1;
}
input[type="checkbox"]{
	display: none;
}
/*鍒楄〃*/
.list{
	width: 100%;
	height: 2rem;
	padding: .6rem;
	border-bottom: .02rem solid gray;
}
.list p{
	margin-left: 1.4rem;
}
ul li{
	width: 100%;
	height: 3.2rem;
	padding: .6rem 0;
	border-bottom: .02rem solid gray;
}
ul li .label{
	width: 2rem;
	height: 2rem;
	padding: .6rem;
	overflow: hidden;
}
ul li .img{
	width: 2rem;height: 2rem;
}
ul li .text{
	width: 10rem;
	margin-left: .5rem;
}
ul li .text p{
	width: 100%;
}
ul li .text p input,.number{
	display: inline-block;
	text-align: center;
	width: 1rem;height: 1rem;
	line-height: 1rem;
	background: rgba(255,255,255,.7);
	color: #666;
	font-size: .53rem;
}
.overflow{
	margin-bottom: .2rem;
	text-overflow: ellipsis;
	overflow: hidden;white-space: nowrap;
}
.red{color: #701c17;}
ul li .img img{width: 100%;height: 100%;}
ul li label img,.list label img{
	width: .8rem;
	height: .8rem;
	}
.total{
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	background: white;
	text-align: right;
    color: #666;
	padding-right: .6rem;
}
.total span{
	color: #701C17;
}
/*鍒楄〃*/
/*搴曢儴缁撶畻*/
.bottom{
		bottom: 0;
		width: 100%;height: 2.6rem;
		color: #701C17;
		padding:.6rem;
		background: white;
	}
.bottom-label{
	height: 2rem;
	line-height: 1.4rem;
}
.bottom img{
	width: .8rem;
	height: .8rem;
	margin-top: .3rem;
	margin-right: .3rem;
}
.bottom button{
	width: 3rem;
	height: 1.5rem;
	background: #701C17;
	color: white;
	font-size: .53rem;
	margin-left: .4rem;
}
/*搴曢儴缁撶畻*/
/*寮规1*/
.text1{
	width: 100%;
	height: 100%;
	top: 0;left: 0;
	background: rgba(200,200,200,.7);
	display: none;
	-webkit-display: none;
    justify-content: center;
    align-items:center;
}
.text1 form{
	width: 70%;
	height: 5rem;
	background: white;
}
.text1 for.........完整代码请登录后点击上方下载按钮下载查看