商品详情页及价格总计
<div class="toubu">
<div class="toubu_content mc">
<div class="toubu_l l">
<label>小米8</label><span></span>
<a href="">小米8 SE</a>
</div>
<div class="toubu_r r">
<a href="">概述</a><span></span>
<a href="">图集</a><span></span>
<a href="">参数</a><span></span>
<a href="">F码通道</a><span></span>
<a href="">用户评价</a>
</div>
</div>
</div>
<div class="main_content mc">
<div class="main_content_l l" id="slideShowContainer">
<ul id="picUl">
<li><a href="#"><img src="img/lun/1.jpg" alt=""/></a></li>
</ul>
</div>
<div class="main_content_r r">
<div class="r1">
<h1>小米8</h1>
<p class="hui_s">12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>
<p class="r1_p">599</p>
</div>
<div class="r2">
<p class="mt20"><i class="layui-icon layui-icon-location"></i>北京 北京市 东城区 永定门外街道 <span>修改</span> </p>
<p style="color:#ff5700;">有现货</p>
</div>
<div class="r3">
<h2>选择版本</h2>
<p class="box_s">4GB+64GB 全网通 <span data-val="599">599元</span></p>
<p class="box_s">6GB+64GB 全网通 <span data-val="699">699元</span></p>
</div>
<div class="clear"></div>
<div class="r4">
<h2>选择颜色</h2>
<p class="box_s">金色</p>
<p class="box_s">深灰</p>
<p class="box_s">亮红</p>
<p class="box_s">亮蓝</p>
</div>
<div class="clear"></div>
<div class="r5">
<h2 style="float:left;">选择小米提供的保障服务</h2>
<a class="r5a">了解保障服务
<i class="layui-icon layui-icon-right"></i></a>
<div class="clear"></div>
<div class="box_m">
<div class="box_ml l">
<input type="checkbox">
<img src="img/bz.jpg">
</div>
<div class="box_mr l">
<h2>意外保障服务</h2>
<p class="hui_s">手机意外摔落/进水/碾压等损坏</p>
<p><input type="checkbox">我已阅读
<a href="">服务条款</a>|<a href="">服务条款</a>
<span data-val="99">99元</span>
</p>
</div>
</div>
<div class="box_m">
<div class="box_ml l">
<input type="checkbox">
<img src="img/bz.jpg">
</div>
<div class="box_mr l">
<h2>意外保障服务</h2>
<p class="hui_s">手机意外摔落/进水/碾压等损坏</p>
<p><input type="checkbox">我已阅读
<a href="">服务条款</a>|<a href="">服务条款</a>
<span data-val="179">179元</span>
</p>
</div>
</div>
</div>
<div class="clear"></div>
<div class="r6">
<p id="jx" style="font-size:14px;padding:30px 50px 10px;"></p>
<span id="dj"style="position:relative;left:-50px;top:-30px;">123</span>
<p id="jg" style="font-size:20px;color:#ff6700;padding:30px 50px;"></p>
</div>
<button>加入购物车</button>
<p class="hui_s"> 7天无理由退货 15天质量问题换货 365天保修</p>
</div>
</div>
头部与主页相同，不述。.css文件
.toubu{width:100%;height:60px;border:1px solid #e0e0e0;box-shadow:0 5px 10px 0 #eee;}
.toubu_content{height:60px;font-size:12px;color:#757575;text-align: center;line-height: 12px;padding:24px 0;}
.toubu_l label{font-weight: bold;color:black;float:left;}
.toubu span{width:0px;height:12px;border-right:2px solid #ccc;float:left;margin:0 7px;}
.toubu_content a:hover{color:#ff6700;}
.main_content{margin-top: 35px;}
.main_content_l{width:450px;height: 450px;}
.main_content_l img{width:450px;height: 450px;}
.main_content_r{width:600px;}
.main_content_r h2{padding:12px 0;}
.r1{width:600px;height:100px;border-bottom: 1px solid #e0e0e0;margin-bottom:40px;}
.r1_p{font-size:20px;color:#ff6700;margin:10px 0;}
.r2{width:600px;background-color:#fafafa;border: 1px solid #e0e0e0;}
.r2 p{padding:0 0 0 40px;}
.r2 span{color:#ff6700;}
.r2 span:hover{cursor:pointer;}
.r2{margin-bottom:20px;padding:35px 0;}
.r3{margin:18px 0;}
.r3 p{font-size:14px;float:left;}
.r3 span{font-size:14px;color:#ccc;float:right;}
.r4{margin:18px 0;}
.r4 p{font-size:14px;text-align: center;}
.r5{margin:18px 0;}
.r5a{float:right;color:#ff6700;position:relative;top:18px;}
.r5a:hover{cursor: pointer;}
.r6{width:600px;height:150px;background-color: #e0e0e0;margin:30px 0;}
.r6 span{font-size:14px;color:#656565;float:right;}
.box_s{width:252px;height:14px;padding:17px 20px;border: 1px solid #e0e0e0;float:left;margin-right:4px;margin-bottom:4px;}
.checked{border:1px solid #ff6700;}
.box_m{width:598px;height:150px;border: 1px solid #e0e0e0;}
.box_ml{width:150px;height:150px;line-height: 150px;text-align: center;}
.box_mr{width:400px;height:100px;line-height: 26px;padding-top:15px;}
.box_mr a{color:#ff6700;float:none;}
.box_mr span{font-size:14px;color:#ccc;float:right;}
.hui_s{font-size:12px;color:#ccc;}
h1,h2,h3{font-weight: 300px;}
.main_content_r button{font-size:20px;background-color:#ff6700;width:300px;height:50px;border:none;color:#fff;margin-bottom:20px;}
.main_foot{background:#f9f9fa;padding:35px 0 15px;font-size:25px;}
.main_foot img{padding:10px 0;}
.js文件
$(function(){
// 默认选中第一个版本/第一个颜色
$('.r3>p').eq(0).attr('class','box_s checked');
$('.r4>p').eq(0).attr('class','box_s checked');
updateTotalPrice()
//点击选中其他的颜色
$('.r3>p').click(function(){
$('.r3>p').attr('class','box_s');
$(this).attr('class','box_s checked');
updateTotalPrice()
});
//点击选中手机版本
$('.r4>p').click(function(){
$('.r4>p').attr('class','box_s');
$(this).attr('class','box_s checked');
updateTotalPrice();
})
//点击保障服务
$('.box_m').click(function(){
if($(this).find('input[type=checkbox]')[0].checked){
$(this).find('input[type=checkbox]')[0].checked=false;
$(this).find('input[type=checkbox]')[1].checked=false;
}else{
$(this).find('input[type=checkbox]')[0].checked=true;
$(this).find('input[type=checkbox]')[1].checked=true;
}
updateTotalPrice();
})
//统计总价格
function updateTotalPrice(){
//版本价钱
var bb=$(".r3>p[class$='checked']").text().substr(0,9);
var bbprice=$(".r3>p[class$='checked']").find('span').attr('data-val')*1;
var cc=$(".r4>p[class$='checked']").text();
//服务价钱
var svprice=0;
var svspan=$(':checked').parent().find('span[data-val]');
for(var i=0;i<svspan.length;i++){
svprice+=svspan[i].getAttribute('data-val')*1;
}
//总价值
var totalprice=bbprice+svprice;
$('#jg').html('总计 ： '+totalprice+'元');
$('#dj').html(bbprice+'元');
$('#jx').html('小米8 '+bb+cc);
}
})