利用jQuery实现淘宝产品选择信息代码



53 210 71



特效描述:利用jQuery实现 淘宝产品 选择信息代码,利用jQuery实现淘宝产品选择信息代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

3. HTML代码

<div class="container-fluid">
	<div class="row" style="position:relative;">
		<div class="col-lg-3"></div>
		<div class="col-xs-12 col-lg-6 hotproduct" id="body"><img src="images/fengjing.jpg" class="img-responsive"></div>
		<div class="col-lg-3"></div>
	</div>
	<div class="row" id="bodys">
		<div class="row dollor">
			<div class="col-lg-3"></div>
			<div class="col-lg-6">
				风景画
			</div>
			<div class="col-lg-3"></div>
		</div>
		<div class="row sellp">
			<div class="col-lg-3"></div>
			<div class="col-lg-6">
				售价:1088.00
			</div>
			<div class="col-lg-3"></div>
		</div>
		<div class="row miho">
			<div class="col-lg-3"></div>
			<div class="col-lg-6">
				<img src="images/sanbao-01.png" class="img-responsive" style="width:35%;">
			</div>
			<div class="col-lg-3"></div>
		</div>
		<div class="row">
			<div class="col-lg-3"></div>
			<div class="col-xs-12  col-lg-6 gray"></div>
			<div class="col-lg-3"></div>
		</div>
		<div class="row model" id="chose">
			<div class="col-lg-3"></div>
			<div class="col-xs-6 col-lg-6" >选择 商品型号</div>
			<div class="col-xs-4 hidden-lg"></div>
			<div class="col-xs-2  col-lg-2"><img src="images/jiantou-01.png" class="img-responsive" style="width: 10px;"></div>
			<div class="col-lg-1"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-3"></div>
		<div class="col-xs-12  col-lg-6 gray"></div>
		<div class="col-lg-3"></div>
	</div>
	<div class="row evaluate">
	</div>
	<div class="row">
		<div class="col-lg-3"></div>
		<div class="col-xs-12  col-lg-6 gray"></div>
		<div class="col-lg-3"></div>
	</div>
	<div class="row evaluate1"></div>
	<!--仿淘宝开始-->
	<div class="taobao">
		<div class="col-lg-3"></div>
		<div class="col-lg-6">
			<div class="row poward">
				<div class="imitation"><img src="images/fengjing.jpg" class="img-responsive" style="width: 93px; height: 93px; padding-top: 5px; padding-left: 5px;"></div>
				<div class="col-xs-4 chose_a"></div>
				<!--开始-->
				<div class="col-xs-6 chose_b">
					<div class="row concent_a">¥198</div>
					<div class="row concent_b">库存120件</div>
					<div class="row concent_c">请选择 颜色分类 尺码</div>
				</div>
				<!--结束-->
				<!--开始-->
				<div class="col-xs-6 chose_noll">
					<div class="row concent_a">¥98</div>
					<div class="row concent_b">库存20件</div>
					<div class="row concent_c">请选择 颜色分类 尺码</div>
				</div>
				<!--结束-->
				<div class="col-xs-2 chose_c"><img src="images/chose-01-01.png" class="img-responsive" style="width: 30px;" id="close1"></div>
			</div>
			<div class="row laisi">颜色:</div>
			<div class="row laisigo">
				<div class="col-xs-5">
					<button type="button" class="btn btn-default" id="btnp1" style="font-size: 12px;">红色</button>
				</div>
				<div class="col-xs-4">
					<button type="button" class="btn btn-default" id="btnp2" style="font-size: 12px;">黄色</button>
				</div>
				<div class="col-xs-3"></div>
			</div>
			<div class="row laisi1">尺寸:</div>
			<div class="row laisigo">
				<div class="col-xs-6 sosos">
					<button type="button" class="btn btn-default" id="btnp3">xxxxx</button>
				</div>
				<div class="col-xs-6 sosos">
					<button type="button" class="btn btn-default" id="btnp4">xxxxxxxxl</button>
				</div>
			</div>
			<div class="row laisi1">选择快递:</div>
			<div class="row laisigo">
				<div class="col-xs-6 sosos">
					<button type="button" class="btn btn-default" id="btn1" id="btnp4" style="width: 148px;"><a href="javascript:;" onClick="jQuery('.rr').show()" class="open" style="text-decoration: none; color: #000000;">申通快递</a></button>
				</div>
				<div class="col-xs-6 sosos">
					<button type="button" class="btn btn-default" id="btnp5">韵达快递</button>
				</div>
			</div>
			<div class="row shuliang">
				<ul style="list-style-type: none;">
					<li>
						<button>-</button>
						<strong>0</strong>
						<button>+</button> 单价:
						<em>198元</em> 总计:
						<span>0元</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-lg-3"></div>
	</div>
	<!--仿淘宝结束-->
	<!--手机版权开始-->
	<div class="row footerp hidden-lg">
		<div class="row fot">
			<!--<div class="col-xs-1"></div>-->
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/qq-01.png" class="img-responsive" style="width:21px;"></div>
				<div class="row textp">在线客服</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/tell-01.png" class="img-responsive" style="width:25px;"> </div>
				<div class="row textp">咨询热线</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/home-01.png" class="img-responsive" style="width: 28px;"></div>
				<div class="row textp">进入店铺</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/text-01.png" class="img-responsive" style="width: 25px;"></div>
				<div class="row textp">我的订单</div>
			</div>
			<div class="col-xs-4"><button class="btn btn-danger" style="margin-top: 3px; margin-left: 20px;">立即购买</button></div>
		</div>
	</div>
	<!--版权结束-->
	<!--电脑版权开始-->
	<div class="row footerp hidden-xs" style="width:50%; margin-left:25%;">
		<div class="row fot">
			<div class="col-xs-1"></div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/qq-01.png" class="img-responsive" style="width:21px;"></div>
				<div class="row textp">在线客服</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/tell-01.png" class="img-responsive" style="width:25px;"> </div>
				<div class="row textp">咨询热线</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/home-01.png" class="img-responsive" style="width: 28px;"></div>
				<div class="row textp">进入店铺</div>
			</div>
			<div class="col-xs-2">
				<div class="row fot_a"><img src="images/text-01.png" class="img-responsive" style="width: 25px;"></div>
				<div class="row textp">我的订单</div>
			</div>
			<div class="col-xs-3"><button class="btn btn-danger" style="margin-top: 3px; margin-left: 8px;">立即购买</button></div>
		</div>
	</div>
	<!--版权结束-->
</div>
<script>
	//		$().ready(function(){
	//			$("#btnp1").click(function() {
	//				$("#btnp1").css("background-color", "#f085224");
	//		});
	window.onload = function() {
		var lis = document.querySelectorAll("li");
		var p = document.querySelector("p");
		for(var i = 0; i < lis.length; i++) {
			count(i);
		}
		//计数的函数,参数为每一个Li对应的下标(在函数里通过下标去取到对应的Li)
		function count(n) {
			//获取到对应li里的相关元素
			var btns = lis[n].querySelectorAll('button');
			var strong = lis[n].querySelector('strong');
			var span = lis[n].querySelector('span');
			var em = lis[n].querySelector('em');
			console.log(em);
			var num = 0; //对应选择到商品的数量
			//给+添加点击事件
			btns[1].onclick = function() {
				/*
				 * 1、商品的数量要累加
				 * 2、小计的值也要累加
				 * 3、改变下面p标签里的内容
				 */
				num++;
				strong.innerHTML = num;
				span.innerHTML = num * parseFloat(em.innerHTML) + '元';
				sum(); //第三件事情
			}
			//给-添加点击事件
			btns[0].onclick = function() {
				/*
				 * 1、商品的数量要累加
				 * 2、小计的值也要累加
				 * 3、改变下面p标签里的内容
				 */
				num--;
				/*
				 * 减到0的时候就不能再减了
				 */
				if(num < 0) {
					num = 0;
				}
				strong.innerHTML = num;
				span.innerHTML = num * parseFloat(em.innerHTML) + '元';
				sum(); //第三件事情
			};
		};
		function sum() {
			/*
			 * 这个函数里要做的事情
			 * 1、修改共购买的数量
			 * 2、算出最贵的
			 * 3、算出一共多少钱
			 */
			var buyNum = 0; //共购买的数量
			var expensive = 0; //最贵的单价
			var total = 0; //出一共多少钱
			for(var i = 0; i < lis.length; i++) {
				var strongInner = lis[i].querySelector('strong').innerHTML;
				var emInner = lis[i].querySelector('em').innerHTML;
				var spanInner = lis[i].querySelector('span').innerHTML;
				if(strongInner > 0) {
					/*
					 * 要算最贵单价,前提是这个商品必需被购买了,也就是它对应的strongInner要大于0
					 * 
					 */
					if(parseFloat(emInner) > expensive) {
						expensive = parseFloat(emInner);
					}
				}
				buyNum = buyNum + parseFloat(strongInner);
				total = total + parseFloat(spanInner);
			}
			p.innerHTML = '共购买了 <strong>' + buyNum + '</strong> 件商品,单价最贵是:<strong>' + expensive + '</strong>元,合计 <strong>' + total + '</strong> 元;';
		}
	};
	$().ready(function() {
		$("#chose").click(function() {
			$(".taobao").slideDown();
			$("#body").css("background-color", "#ffffff");
			$("#body").css("opacity", "0.5");
			//				$("#bodys").css("background-color", "#000");
			//				$("#bodys").css("opacity", "0.8");
		});
		$("#close1").click(function() {
			$(".taobao").hide();
			$("#body").css("background-color", "#ffffff");
			$("#body").css("opacity", "1");
			//				$("#bodys").css("background-color", "#ffffff");
			//				$("#bodys").css("opacity", "1");
		});
	})
	$().ready(function() {
		$("#btns").click(function() {
			$(".rr").hide();
		})
		$("#btns2").click(function() {
			$(".zcxs").hide();
		})
	})
	$().ready(function() {
		$("#btnp1").click(function() {
			$(".chose_b").hide();
			$(".chose_noll").show();
		})
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到