实现购物车动态效果代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_实现购物车动态操作</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        table{width:600px; text-align:center;
            border-collapse:collapse;
        }
        td,th{border:1px solid black}
        td[colspan="3"]{text-align:right;}
    </style>
</head>
<body>
    <table id="data">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>iPhone6</td>
            <td>&yen;<span>4488</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>4488</span></td>
        </tr>
        <tr>
            <td>iPhone6 plus</td>
            <td>&yen;<span>5288</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>5288</span></td>
        </tr>
        <tr>
            <td>iPad Air 2</td>
            <td>&yen;<span>4288</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>4288</span></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">Total:</td>
            <td>&yen;<span>14064</span></td>
        </tr>
        </tfoot>
    </table>


    <script>
        // 1. 为button绑定click事件
$("button").click(function(event){
// 判断当前是-还是+
var elem = event.target;
if($(elem).text() == "+"){
// 修改span元素的文本内容
var num = parseInt($(elem).prev().text());
$(elem).prev().text(num+1);
}else{
var num = parseInt($(elem).next().text());
$(elem).next().text(num-1);
// num=0
if(num == 0){
$(elem).next().text("0");
}
}
// 修改小计的值
// 数量

// 单价
var price  = parseInt($(elem).parent().prev().children("span").text());
// 修改小计
$(elem).parent().next().children("span").text((num+1)*price);
// 合计
var $spans = $("#data>tbody>tr :last-child>span");
// 遍历
var total = 0;
for(var i=0;i<$spans.length;i++){
var span = $spans[i];
var num = parseInt($(span).text());
total += num;
}


$("#data>tfoot>tr>td:last>span").text(total);
});
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript购物实现效果可以非常丰富和实用。通过使用JavaScript编写的购物功能,可以构建一个类似于电子商务网站中常见的购物系统。 首先,在网页的商品列表中,通过JavaScript代码将每个商品的信息进行绑定和处理。当用户点击将商品添加到购物按钮时,JavaScript将捕获用户的点击事件,并从商品列表中获取相关信息,例如商品的id、名称、价格以及数量等。 接下来,JavaScript会将获取到的商品信息保存到一个购物对象中,这个购物对象可以是一个数组或者是一个json对象。购物对象会在用户点击添加商品按钮时实时更新,以反映当前购物中的商品情况。 同时,JavaScript还会对购物进行一些额外的处理。例如,当用户点击购物图标时,JavaScript会将购物对象中的商品信息动态显示在购物弹窗中,包括商品的名称、价格和数量等。用户还可以在购物中修改商品数量、删除商品或者清空购物等操作。 此外,JavaScript还可以实现一些购物的功能增强。例如,当用户修改商品的数量时,JavaScript会自动更新购物中的商品总价和数量,并将其实时展示给用户。另外,JavaScript还可以对购物中的商品进行排序、搜索和筛选等操作,以提供更好的用户体验。 总之,通过使用JavaScript实现购物功能,我们可以实现一个用户友好、交互性强的购物系统,为用户提供便捷、高效的购物体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值