JS实现的购物车案例

最新推荐文章于 2022-09-08 16:14:46 发布
最新推荐文章于 2022-09-08 16:14:46 发布
阅读量1.4k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： JS 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zpr5554321/article/details/86750144
本文详细介绍了一个购物车网页的设计与实现过程，包括HTML结构、CSS样式和JavaScript交互逻辑。展示了如何使用事件监听、DOM操作和简单的算法来实现商品选择、数量调整、小计计算及总价显示等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

慕课网课程：https://www.imooc.com/learn/34
那里也有一些案例源码可以下载的。
style.css文件

* {
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    text-decoration: none;
}
body {
    padding: 20px;
    color: #666;
}
.fl{
    float: left;
}
.fr {
    float: right;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    text-align: center;
    width: 937px;
}
th, td {
    border: 1px solid #CADEFF;
}
th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}
td {
    padding: 10px;
    color: #444;
}
tbody tr:hover {
    background: RGB(238,246,255);
}
.on {   
    background-color: RGB(224,222,225)；
}
.checkbox {
    width: 60px;
}
.goods {
    width: 300px;
}
.goods span {
    width: 180px;
    margin-top: 20px;
    text-align: left;
    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;
}
.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 {
    width: 80px;
}
.operation span:hover, a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}
img {
    width: 100px;
    height: 80px;
    /*border: 1px solid #ccc;*/
    margin-right: 10px;
    float: left;
}

.foot {
    width: 935px;
    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;
}
.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: 20px;
    margin-bottom: -20px;
}
#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
}
#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: RGBA(0,0,0,.5);
    cursor: pointer;
}
#selectedViewList div:hover span {
    display: block;
}

shopcart.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript">
        window.onload = function () {
            var cartTable = document.getElementById('cartTable');
            var tr = cartTable.children[1].rows;
            var checkInputs = document.getElementsByClassName('check');
            var checkAllInputs = document.getElementsByClassName('check-all');
            var selectedTotal = document.getElementById('selectedTotal');
            var priceTotal = document.getElementById('priceTotal');
            var selected = document.getElementById('selected');
            var foot = document.getElementById('foot');
            var selectedViewList = document.getElementById('selectedViewList');
            var deleteAll = document.getElementById('deleteAll');

            // 扩展document.getElementsByClassName方法
            //为了兼容低版本的浏览器没有该方法适用于有多个类名
            if (!document.getElementsByClassName) {
                document.getElementsByClassName = function (cls) {
                    var ret = [];
                    var els = document.getElementsByTagName('*');
                    for (var i = 0, len = els.length; i < len; i++) {

                        if (els[i].className.indexOf(cls + ' ') >=0 || els[i].className.indexOf(' ' + cls + ' ') >=0 || els[i].className.indexOf(' ' + cls) >=0) {
                            ret.push(els[i]);
                        }
                    }
                    return ret;
                }
            }
            //计算函数getTotal，计算总价格，数目，并更新已选弹层的HTML
            function getTotal(){
                var selected = 0;
                var price = 0;
                var HTMLsrc = "";
                for (var i = 0; i < tr.length; i++) {
                    if(tr[i].getElementsByTagName("input")[0].checked){
                            tr[i].style.background='lightblue';
                            selected += parseInt(tr[i].getElementsByTagName('input')[1].value);
                            price += parseFloat(tr[i].cells[4].innerHTML);
                            HTMLsrc +=  '<div><img src="'+tr[i].getElementsByTagName('img')[0].src+'"><span class="del" index="'+i+'">取消选择</span></div>';
                    }else{
                        tr[i].style.background='';
                    }
                }
                selectedTotal.innerHTML = selected;
                priceTotal.innerHTML = price.toFixed(2);//保留2位小数
                selectedViewList.innerHTML = HTMLsrc;

                if(selected == 0){
                    foot.className = "foot";
                }

            }
            //小计价格函数getSubTotal
            function getSubTotal(tr){
            	var td = tr.cells;
            	var price = parseFloat(td[2].innerHTML);
            	var count = parseInt(tr.getElementsByTagName('input')[1].value);
            	var SubTotal = parseFloat(price * count);
            	td[4].innerHTML = SubTotal;
            }
            //绑定勾选框事件
            for(var i=0;i<checkInputs.length;i++){
                checkInputs[i].onclick = function(){
                    if(this.className === "check-all check"){
                        for (var i = 0; i < checkInputs.length; i++) {
                            checkInputs[i].checked = this.checked;
                        }
                    }
                    if(this.checked == false){
                        for (var k = 0; k < checkAllInputs.length; k++) {
                            checkAllInputs[k].checked = false;
                        }
                    }
                    getTotal();
                }
                
            }
            //绑定已选按钮事件，用于显示或者隐藏浮层
            selected.onclick = function(){
                if(foot.className === 'foot'){
                    if(selectedTotal.innerHTML != 0)
                    foot.className = 'foot show';
                }
                else{
                    foot.className = 'foot';
                }
            }
            //在已选弹层上事件代理，用于删除已选
            selectedViewList.onclick = function(e){
                var e = e||window.event;
                var el = e.srcElement;
                if(el.className == 'del'){
                    var index = el.getAttribute('index');
                    var input = tr[index].getElementsByTagName('input')[0];
                    input.checked = false;
                    input.onclick();
                }
            }
            for (var i = 0; i < tr.length; i++) {

                //表格每一行上事件代理
                tr[i].onclick = function(e){
                	e = e||window.event;
                	var el = e.srcElement;
                	var cls = el.className;
                	var input = this.getElementsByTagName('input')[1];
                	var reduce = this.getElementsByTagName('span')[1];
                	var val = parseInt(input.value);
                	switch(cls){
                		case 'add':
                			input.value = val + 1;
                			reduce.innerHTML = '-';
                			getSubTotal(this);
                			break;
                		case 'reduce':
                			if(val>1){
                				input.value = val - 1;
                			}else{
                				reduce.innerHTML = '';
                			}
                			getSubTotal(this);
                			break;
                		case 'delete':
                			var conf = confirm('确定删除吗？');
                			if(conf){
                				this.parentNode.removeChild(this);
                			}
                			break;
                		default:
                			break;
                	}
                	getTotal();
                }
                //绑定数量输入框事件，实时更新小计价格
                tr[i].getElementsByTagName('input')[1].onkeyup = function(){
                	var val = parseInt(this.value);
                	var tr = this.parentNode.parentNode;
                	var reduce = tr.getElementsByTagName('span')[1];
                	if(val<1 || isNaN(val)){
                		val = 1;
                	}
                	this.value = val;
                	if(val <= 1){
                		reduce.innerHTML = '';
                	}else{
                		reduce.innerHTML = '-';
                	}
                	getSubTotal(tr);
                	getTotal();
                }     
            }
            // 绑定删除按钮事件， 删除已选项
            deleteAll.onclick = function(){
            	if(selectedTotal.innerHTML != '0'){
            		var conf = confirm('确定删除吗？');
            		if(conf){
	            		for (var i = 0; i < tr.length; i++) {
	            			var input = tr[i].getElementsByTagName('input')[0];
	            			if(input.checked){
	            				tr[i].parentNode.removeChild(tr[i]);
	            				i--;
	            			}
	            		}
	            	}
            	}
            }
            // 默认选择所有商品
            
            checkAllInputs[0].onclick();          
        }
    </script>
</head>
<body>
<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="http://img.mukewang.com/53b4c12b0001b0a702200220.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="http://img.mukewang.com/53b4c149000144b202200220.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="http://img.mukewang.com/53b4c16000011dfd02200220.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="http://img.mukewang.com/53b4c12b0001b0a702200220.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="javascript:;">删除</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/1.jpg"><span>取消选择</span></div>-->
        </div>
        <span class="arrow">◆<span>◆</span></span>
    </div>
</div>
</body>
</html>
js案例——小型购物车计算
qq_43151638的博客
10-18 422
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box"> <table border="1" cellspacing="0" c...
javascript购物车案例
weixin_67150631的博客
03-12 4068
JavaScript购物车案例
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告；5、勾选或取消勾选商品总价会相应变化；6、总价默认计算被选中的商品，添加商品到购物车时默认被选中；7、可以进行全选和反选，并一键删除，库存返回清单，总价改变。
js之购物车案例
qq_41662119的博客
08-14 589
  这里主要提供思路： 一共两个页面通过原生来实现，我们需要对cookie进行封装。 在商品列表页，我们将点击添加的商品放入一个对象中，而后将该对象放入数组中，一个对象可以说就是一个商品。在购物车页面将数据从cookie中读取出来，然后再渲染到页面中。即可完成购物车的操作。 源码传送门：链接：https://pan.baidu.com/s/1unVKtb90k2TdKrgah...
Vue.js-购物车案例
weixin_48137421的博客
06-07 3208
认识Vuejs-->Vue体验-->插值操作-->v-bind学习-->计算属性-->ES6相关知识-->事件监听-->条件判断-->循环遍历-->购物车案例
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
vue实现购物车小案例
12-13
Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。...总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 JavaScript 来构建一个简单的交互式应用，通过数据驱动视图，简化了前端开发过程。
前端学习——JavaScript原生实现购物车案例
m0_46084075的博客
03-30 4980
一. 购物车案例 1.1 案例介绍 今天我们来写另外一个购物车案例，说实话对于我来说这个是花了将近三个小时的时间然后才做出来的，里面可能还存在一些我没有发现的问题，但是能完成基本的功能，对于一些基本的需求都是可以完成的，下面照旧是案例实现的gif图片 根据上图我们可以看到，每个购物车的选项都是互不影响的，每个商店也都是互不影响的，单独运算，每个店的总计也是单独计算的，有一个计算复选框总价的功能，而且这是个通用的模板，不论有多少个店铺，店铺里面的商品有多少个，只要html的结构不变都是可以通用的，那么不多说
Javascript实现购物车案例--Javascript学习
你若成风，我则化雨
06-10 4603
JavaScript实现购物车来进行设计一个购物车的功能 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" hre...
购物车——js小项目实例
u013430418的博客
09-08 5624
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
用JavaScript做简易的购物车的代码示例
10-19
主要介绍了用JavaScript做简易的购物车的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
购物车实例
01-27
通过Session机制实现的简单购物车实例，同时里面也有传递带中文参数的转码设置
基于JavaScript实现购物车功能
10-20
主要为大家详细介绍了基于JavaScript实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript购物车.zip
08-11
项目介绍：https://blog.youkuaiyun.com/weixin_40805686/article/details/99221539 在线演示地址：http://www.weichufeng.cn/csdn/shopCar/shopCar.html
vuejs手把手教你写一个完整的购物车实例代码
10-19
主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript做简单的购物车效果（增、删、改、查、克隆）
公众号【猴哥说前端】
04-14 7466
比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下：.buy { width: 200px; ...
javascript购物车
style201904的博客
06-04 1364
购物车 <style type="text/css"> body,html{ background-color: whitesmoke; } .shopBox{ width: 425px; height: 375px; background-color: white; margin: 0 auto; position: ...
原生js-购物车案例（一）整体思路和实施步骤
qq_25503949的博客
04-29 1565
原生js-购物车案例（一）整体思路和实施步骤 在准备写购物车之前补充一个小小的知识点（有关table的一个api）： <body> <table id="tab"> <tbody> <tr> <td>333</td> &...
一个简单的购物车样例
战斗暴龙兽的博客
06-16 657
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript实现购物车功能案例分析
4. 事件处理：在JavaScript购物车案例中，用户与页面的交互往往通过事件来触发。例如，用户点击“添加到购物车”按钮时，会触发一个添加事件，购物车需要相应地添加商品；用户修改购物车内商品的数量时，会触发一个...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值