购物车效果实现

最新推荐文章于 2019-08-11 22:57:18 发布

噬魂灬龍若

最新推荐文章于 2019-08-11 22:57:18 发布

阅读量463

点赞数

分类专栏：视图层文章标签： jquery html 应用

本文链接：https://blog.csdn.net/u010215407/article/details/51377517

版权

视图层专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先放效果图：
效果图1
效果图2
还是jQuery的应用，猛然发现以前的笔记中还是有很多东西的；
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车的实现</title>
    <link rel="stylesheet" href="css/homework.css">
</head>
<body>
<div class="catbox">

    <table id="cartTable">
        <thead>
        <tr>
            <th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="images/cart1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="images/cart2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="images/cart3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="images/cart4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        </tbody>
    </table>

    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
        <a class="fl delete" id="deleteAll" href="#">删除</a>
        <div class="fr closing">结 算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
<!--<div><img src="images/cart1.jpg"><span>取消选择</span></div>-->
</div>
            <span class="arrow">◆<span>◆</span></span>
        </div>
    </div>

</div>

<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/homework_priceAndDel.js"></script>
<script type="text/javascript" src="js/homework_moneyAndChosen.js"></script>
</body>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    color: #666;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

body {
    color: #666;
    font: 12px/180% Arial, Helvetica, sans-serif, "微软雅黑";
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;/*visible是默认值，即是可见的*/
}

.clearfix {
    display: inline-table;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

* + html .clearfix {
    min-height: 1%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.catbox {
    width: 940px;
    margin: 0 auto;
}

.catbox table {
    text-align: center;
    width: 100%;
}

.catbox table th, .catbox table td {
    border: 1px solid #CADEFF;
}

.catbox table th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}

.catbox table td {
    padding: 10px;
    color: #444;
}

.catbox table tbody tr:hover {
    background: RGB(238, 246, 255);
}

.checkbox {
    width: 60px;
}

.goods {
    width: 300px;
}

.goods span {
    width: 180px;
    margin-top: 20px;
    text-align: left;
    float: left;
}

.goods img {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    float: left;
}

.price {
    width: 130px;
}

.count {
    width: 90px;
}

.count .add, .count input, .count .reduce {
    float: left;
    margin-right: -1px;
    position: relative;
    z-index: 0;
}

.count .add, .count .reduce {
    height: 23px;
    width: 17px;
    border: 1px solid #e5e5e5;
    background: #f0f0f0;
    text-align: center;
    line-height: 23px;
    color: #444;
    -webkit-user-select: none;
}

.count .add:hover, .count .reduce:hover {
    color: #f50;
    z-index: 3;
    border-color: #f60;
    cursor: pointer;
}

.count input {
    width: 50px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    z-index: 2;
}

.subtotal {
    width: 150px;
    color: red;
    font-weight: bold;
}

.operation span:hover, a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}

.foot {
    margin-top: 10px;
    color: #666;
    height: 48px;
    border: 1px solid #c8c8c8;
    background-color: #eaeaea;
    background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
    position: relative;
    z-index: 8;
}

.foot div, .foot a {
    line-height: 48px;
    height: 48px;
}

.foot .select-all {
    width: 100px;
    height: 48px;
    line-height: 48px;
    padding-left: 5px;
    color: #666;
}

.foot .closing {
    border-left: 1px solid #c8c8c8;
    width: 100px;
    text-align: center;
    color: #000;
    font-weight: bold;
    background: RGB(238, 238, 238);
    cursor: pointer;
}

.foot .total {
    margin: 0 20px;
    cursor: pointer;
}

.foot #priceTotal, .foot #selectedTotal {
    color: red;
    font-family: "Microsoft Yahei";
    font-weight: bold;
}

.foot .selected {
    cursor: pointer;
}

.foot .selected .arrow {
    position: relative;
    top: -3px;
    margin-left: 3px;
}

.foot .selected .down {
    position: relative;
    top: 3px;
    display: none;
}

.show .selected .down {
    display: inline;
}

.show .selected .up {
    display: none;
}

.foot .selected:hover .arrow {
    color: red;
    -webkit-user-select: none;
}

.foot .selected-view {
    width: 935px;
    border: 1px solid #c8c8c8;
    position: absolute;
    height: auto;
    background: #ffffff;
    z-index: 9;
    bottom: 48px;
    left: -1px;
    display: none;
}

.show .selected-view {
    display: block;
}

.foot .selected-view div {
    height: auto;
}

.foot .selected-view .arrow {
    font-size: 16px;
    line-height: 100%;
    color: #c8c8c8;
    position: absolute;
    right: 330px;
    bottom: -9px;
}

.foot .selected-view .arrow span {
    color: #ffffff;
    position: absolute;
    left: 0px;
    bottom: 1px;
}

#selectedViewList {
    padding: 10px 20px 10px 20px;
}

#selectedViewList div {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
    float: left;
}

#selectedViewList div img {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    float: left;
}

#selectedViewList div span {
    display: none;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: #000;
    cursor: pointer;
}

#selectedViewList div:hover span {
    display: block;
}

js1–价格和删除：

/**
 * Created by Administrator on 2016/3/15.
 */
$(document).ready(function(){
$(".price").each(function(){
var _this=this;//保存--得到对应行数单价的元素
//alert(+$(this).text());//获取当前的单价
//alert(+$(this).closest("tr").find(".subtotal").text());//获取小计
//alert($(this).next().find("input").val());//获得数量
//alter($(this).next(".add"));// 获得加的按钮（事实上不是按钮，只是一个div）
var count = $(this).next().find(".count-input").val();//得到对应的数量

//点击数量增加的时候的事件
$(this).next().find(".add").click(function(){
var num1 = +$(this).prev(".count-input").val();
if(num1==null||num1==""||num1==0||num1=="0"){
num1=1;
            }
num1++;
showReduce(_this);
$(this).prev(".count-input").val(num1);
total(_this);
        });
//点击数量减的时候的事件
$(this).next().find(".reduce").click(function(){
var num1 = +$(this).next(".count-input").val();
if(num1>1){
num1--;
$(this).next(".count-input").val(num1);
total(_this);
            }else{
hiddenReduce(_this);
return;
            }
        });
// 数量改变时触发事件（前提是失去焦点才会触发）-----键盘输入数字的时候
$(this).next().find(".count-input").change(function(){
if(check(_this)){
if((+$(this).val())>=1){
showReduce(_this);
                }
total(_this);
            }else{
hiddenReduce(_this);
$(this).val(1);
alert("输入错误,请重新输入!");
            }
        });
//点击删除的时候触发的事件
$(this).closest("tr").find(".delete").click(function(){
$(this).closest("tr").remove();
        });
    });
});
function showReduce(obj){
$(obj).next().find(".reduce").text("-");
$(obj).next().find(".reduce").css("cursor","pointer");
}
function hiddenReduce(obj){
$(obj).next().find(".reduce").text("");
$(obj).next().find(".reduce").css("cursor","default");
}
function check(obj){
var num = $(obj).next().find(".count-input").val();
if(isNaN(num)||parseInt(num)<=0){
hiddenReduce(obj);
return false;
    }else {
$(obj).next().find(".count-input").val(parseInt(num));
return true;
    }
}
function total(obj){
var price = +$(obj).text();//得到对应的单价
var count = +$(obj).next().find(".count-input").val();//得到对应的数量
$(obj).closest("tr").find(".subtotal").text((price*count).toFixed(2));
}

js2–价格和选择：

/**
 * Created by Administrator on 2016/3/15.
 */
$(document).ready(function(){
//批量删除的事件
$("#deleteAll").click(function(){
$(".check-one").each(function(){
if($(this).is(":checked")){
$(this).closest("tr").remove();
            }
        });
allTotal();
    });
//全选的复选框的点击事件（此处可以用点击click）
$(".check-all").change(function(){
if($(this)[0].checked){
for(var i =0; i<$(".check").length;i++){
$(".check")[i].checked=true;
            }
        }else{
for(var i =0; i<$(".check").length;i++){
$(".check")[i].checked=false;
            }
        }
allTotal();
    });
//复选框被改变时触发合计金额的事件
$(".check-one").change(function(){
allTotal();
    });
//数量发生改变时也要触发合计金额的事件
$(".count-input").change(function(){
allTotal();
    });
//数量按钮被点击的时候也要触发合计金额的事件
$(".reduce,.add").on("click",function(){
allTotal();
    });
/*//在点击已选商品的弹出按钮时触发的事件
    $(".up").click(function(){
        $(this).closest("div").find(".arrow").toggle();
        $(".selected-view").toggle();
        alert($(".selected-view").css("display"))

    });*/
    //在点击已选商品的收回按钮时触发的事件
$("#selected").click(function(){
$(this).closest("div").find(".arrow").toggle();
$(".selected-view").toggle();
if($(".selected-view").css("display")=="block"){
var imgSrc=[];
imgSrc=chooseGoods();//立即获得已经选中图片的地址
if(imgSrc.length==0){
$("#selectedViewList").append("<h4>您没有选择任何商品！</h4>");
return;
            }
for(var i = 0; i<imgSrc.length; i++) {
chosen(imgSrc[i]);
            }
        }else if($(".selected-view").css("display")=="none"){
$("#selectedViewList").children().each(function(){
$(this).remove();
            });
        }
    });
//添加已选商品的图片放入已选商品的div中
function chosen(imgSrc){
$("#selectedViewList").append("<div><img src=\""+imgSrc+"\"><span onclick='cancelChoose(this)'>取消选择</span></div>");
    }
});
//取消选择的点击事件
function cancelChoose(obj){
$(obj).closest("div").remove();
$(".check-one").each(function(){
var c1 = $(this).closest("td").next().find("img").attr("src");
var c2 = $(obj).prev().attr("src");
if(c1==c2){
this.checked=false;//这里让对应的复选框的状态改为不选中
allTotal();
return;
        }
    });
}
//计算所选商品总数和合计价格的方法，可以和下面的得到图片（得到表格的行td）方法合并---可优化！！！！
function allTotal(){
var allTotal= 0,
nums=0;
$(".subtotal").each(function(){
var isChecked=$(this).closest("tr").find(".check-one");
if(isChecked.is(":checked")){
allTotal = +$(this).text()+allTotal;
nums=nums+(+$(this).closest("tr").find(".count-input").val());
        }
    });
$("#priceTotal").text(allTotal.toFixed(2));
$("#selectedTotal").text(nums);
}
//即时得到选择了的图片地址，其实这个方法可以改善为返回对应的td单元格元素，便于其他地方调用
function chooseGoods(){
var imgSrc=[];
$(".check-one").each(function(){
if($(this).is(":checked")){
var src=$(this).closest("tr").find("img").attr("src");//获取选中的元素的图片地址
imgSrc.push(src);
        }
    });
return imgSrc;
}

噬魂灬龍若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车效果实现

先放效果图：还是jQuery的应用，猛然发现以前的笔记中还是有很多东西的； html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车的实现</title> <link rel="stylesheet" href="css/homework.css"></he
复制链接

扫一扫

专栏目录