摘要：$(function() { //初始化 doPrice() // 鼠标移上全选框变色效果 $('.fa-check').mouseover(function() { if ($(this).attr('class') != 'fa fa-check checked&
$(function() {
//初始化
doPrice()
// 鼠标移上全选框变色效果
$('.fa-check').mouseover(function() {
if ($(this).attr('class') != 'fa fa-check checked') {
$(this).css('color', '#ff6700')
}
})
$('.fa-check').mouseleave(function() {
$(this).css('color', '#fff')
})
//普通选择
$('.fa-check').click(function() {
var cla = $(this).attr('class')
if (cla != 'fa fa-check checked') {
$(this).attr('class', 'fa fa-check checked')
} else {
$(this).attr('class', 'fa fa-check')
}
doCheckAll()
doPrice()
})
// 全选选择
$('#check-all').click(function() {
var cla = $(this).attr('class')
if (cla != 'fa fa-check checked') {
$('.fa-check').attr('class', 'fa fa-check checked')
} else {
$('.fa-check').attr('class', 'fa fa-check')
}
doPrice()
})
// 检查是否全选
function doCheckAll() {
var allitem = $('.list-item i[class*="fa-check"]').length
var checkeditem = $('.list-item i[class$="checked"]').length
if (allitem != checkeditem) {
$('#check-all').attr('class', 'fa fa-check')
} else {
$('#check-all').attr('class', 'fa fa-check checked')
}
}
//加减按钮
$('.plus').click(function() {
var nowvalue = $(this).siblings('input').val()
var nowvalue = parseInt(nowvalue)
// var currentvalue=0
var currentvalue = nowvalue + 1
$(this).siblings('input').val(currentvalue)
var danjia = parseFloat($(this).parents('.good-num').siblings('.good-price').html())
var xiaoji = danjia * currentvalue
//页面中输出
$(this).parents('.good-num').siblings('.good-total-price').html(xiaoji + '元')
doPrice()
})
$('.minus').click(function() {
var nowvalue = $(this).siblings('input').val()
var nowvalue = parseInt(nowvalue)
var currentvalue = 0
nowvalue <= 1 ? currentvalue = 1 : currentvalue = nowvalue - 1
$(this).siblings('input').val(currentvalue)
var danjia = parseFloat($(this).parents('.good-num').siblings('.good-price').html())
var xiaoji = danjia * currentvalue
//页面中输出
$(this).parents('.good-num').siblings('.good-total-price').html(xiaoji + '元')
doPrice()
})
//统计所有勾选的值
function doPrice() {
var items = $('.list-item i[class*="fa-check"]')
var checkeditems = $('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price') //选中小计的价钱
var totalprice = 0 //储存总计
for (var i = 0; i < checkeditems.length; i++) {
totalprice += parseFloat(checkeditems[i].innerHTML)
}
$('.sum-price').html(totalprice)
//选中多少件
$('.select-count').html(checkeditems.length)
//总商品数
$('.all-count').html(items.length)
}
//删除当前商品
$('.operation').click(function() {
$(this).parents('.list-item').remove()
})
})<!DOCTYPE html> <html> <head> <title>小米商城</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png" /> <link rel="stylesheet" type="text/css" href="static/css/style.css"> <link rel="stylesheet" href="static/css/cart.css"> <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"> <script src="static/js/jq_3.3.1_mi.js"></script> <script src="static/js/cart.js"></script> </head> <body> <!-- 购物车头部 --> <div> <div> <div> <a href=""></a> <h1>我的购物车</h1> <h6>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h6> </div> <div> <div> <div> <a href="javascript:void(0)">我是某某某</a> <ul> <li>个人中心</li> <li>评价晒单</li> <li>我的喜欢</li> <li>小米账户</li> <li>退出登录</li> </ul> </div> <i class="fa fa-angle-down fa-1x"></i> </div> <div><a href="order.html">我的订单</a></div> </div> </div> </div> <!-- 购物车躯干部分 --> <div> <!--购物车--> <div> <div class="list list-title"> <div class="select select-all"><i class="fa fa-check" id="check-all"></i>全选</div> <div></div> <div style="font-size:14px; ">商品名称</div> <div>单价</div> <div>数量</div> <div style="color:#424242;">小计</div> <div>操作</div> </div> <div class="list list-item"> <div><i class="fa fa-check"></i></div> <div><img src="static/images/phone/phone1.png" alt=""></div> <div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div>3199元</div> <div> <div> <button>-</button> <input type="text" value="1"> <button>+</button> </div> </div> <div>3199元</div> <div><i class="fa fa-times"></i></div> </div> <div class="list list-item"> <div><i class="fa fa-check"></i></div> <div><img src="static/images/phone/phone1.png" alt=""></div> <div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div>3199元</div> <div> <div> <button>-</button> <input type="text" value="1"> <button>+</button> </div> </div> <div>3199元</div> <div><i class="fa fa-times"></i></div> </div> <div class="list list-item"> <div><i class="fa fa-check"></i></div> <div><img src="static/images/phone/phone1.png" alt=""></div> <div> 小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB </div> <div>3199元</div> <div> <div> <button>-</button> <input type="text" value="1"> <button>+</button> </div> </div> <div>3199元</div> <div><i class="fa fa-times"></i></div> </div> <div class="list list-total"> <div> <span><a href="">继续购物</a></span> <span>共 <span>0</span> 件商品，已选择 <span>0</span> 件</span> </div> <div> <div>合计: <span>0</span> 元</div> <a href="./close.html"><button>去结算</button></a> </div> </div> </div> <!--其他商品推荐--> <div style="margin-top: 60px;"> <p>买购物车中商品的人还买了</p> </div> <div> <div> <div></div> <div> <div style="margin-right: 12.7px;"> <img src="static/images/buy/手机1.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style="margin-right: 12.7px;"> <span>享八折</span> <img src="static/images/buy/手机2.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style="margin-right: 12.7px;"> <img src="static/images/buy/手机3.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div> <span>享八折</span> <img src="static/images/buy/手机4.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style="margin-right: 12.7px; margin-top:12.7px; "> <img src="static/images/buy/手机1.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style="margin-right: 12.7px; margin-top:12.7px;"> <img src="static/images/buy/手机1.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style="margin-right: 12.7px; margin-top:12.7px;"> <img src="static/images/buy/手机1.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> <div style=" margin-top:12.7px;"> <img src="static/images/buy/手机1.jpg"> <h3><a href="">小米5X 4G+64GB</a></h3> <p>光学变焦双摄，拍人更美</p> <p><span style="color: #ff6700;">1499 元</span></p> </div> </div> </div> </div> <!--——————————————————————————————————————————————————————————————— 底部——————————————————————————————————————————————————————————————————————————— --> <div> <div> <div> <div> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span></span> <div> <div> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> <div> <p>Feir-520-1314</p> <p>周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> </div> <div></div> </div> <div> <div style="margin-right: 15px;"> <img src="static/images/footlogo.png" alt=""> </div> <div style="margin-right:50px;"> <div> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <div> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div> <img src="static/images/footericon1.png" alt="" style="margin-right: 10px;"> <img src="static/images/footericon2.png" alt="" style="margin-right: 10px;"> <img src="static/images/footericon3.png" alt="" style="margin-right: 10px;"> <img src="static/images/footericon4.png" alt="" style="margin-right: 10px;"> <img src="static/images/footericon5.png" alt=""> </div> <div> 探索黑科技，小米为发烧而生！ </div> </div> </div> </div> </body> </html>
批改老师：天蓬老师批改时间：2019-04-22 09:18:15
老师总结：通过这个作业, 你学到了什么呢, 不想聊聊吗? 作业写完, 最好有一个小总结 , 利于后面的学习
