用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。相关的知识，希望对你有一定的参考价值。
html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax
纯前端的话可以参考下面的
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>cart</title>
<style type="text/css">
body,p,a,input
margin: 0;
padding: 0;
font-size: 12px;
.container
width: 100%;
.main
width: 1000px;
height: 500px;
margin:100px auto;
.main .cart-container table
width: 100%;
.main .cart-container table tr
text-align: center;
.main .cart-container table tr:hover
background: rgba(128, 128, 128, 0.2);
.main .cart-container table .table-header
height: 30px;
background: #d9d9d9;
font-size: 1.2em;
.main .cart-container table .table-header td:first-child
border-left: solid 4px red;
box-sizing: border-box;
.main .cart-container table tr td:nth-child(1),
.main .cart-container table tr td:nth-child(2)
text-align: left;
.main .cart-container table tr td:nth-child(2)
width: 52%;
.main .cart-container table tr td:nth-child(3)
width: 12%;
.main .cart-container table tr td:nth-child(4)
width: 12%;
.main .cart-container table tr td:nth-child(5)
width: 12%;
.main .cart-container table tr td:last-child
width: 10%;
.cart-good
height: 60px;
.cart-good img
float: left;
margin: 10px;
width: 60px;
.cart-good td p
margin: 10px 0px;
/*加、减按钮*/
.cart-good td input[type='button']
width: 20px;
height: 20px;
background: #00f300;
outline: none;
border: none;
.cart-good td input[type='button']:disabled
background: grey;
.cart-good td input[type='button']:first-child
margin-right: -4px;
.cart-good td input[type='button']:last-child
margin-left: -4px;
.cart-good td input[type='text']
width: 30px;
height: 20px;
outline: none;
border: none;
text-align: center;
.table-footer
display: flex;
justify-content: space-between;
line-height: 40px;
.table-footer div
font-size: 1.2em;
.table-footer div button
background: red;
width: 120px;
height: 40px;
color: white;
</style>
</head>
<body>
<div class="container">
<header></header>
<section class="main">
<div class="cart-container">
<table cellspacing="0">
<tr class="table-header">
<td><input type="checkbox" id="chk_alla"></td>
<td>聚美优品发货</td>
<td>聚美价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!--<tr class="cart-good">-->
<!--<td><input type="checkbox" id="001"></td>-->
<!--<td>-->
<!--<img src="https://p2.jmstatic.com/product/001/293/1293263_std/1293263_60_60.jpg" alt="">-->
<!--<p>[极速免税]PITTA MASK 口罩3枚入</p>-->
<!--<p>型号：新版防晒款 容量：3枚入</p>-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td>-->
<!--<input type="button" value="-">-->
<!--<input type="text" value="1">-->
<!--<input type="button" value="+">-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td><a href="#">删除</a></td>-->
<!--</tr>-->
</table>
<div class="table-footer">
<div>
<input type="checkbox" id="chk_allb"> <label for="chk_allb">全选</label>
<span style="margin-left: 20px">继续购物 | 清空选中商品</span>
</div>
<div>
共 <span id="good_count">5</span>件商品 商品应付总额：<span id="goods_total">¥229.00</span>
<button class="btn_menu">去结算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function ()
var skin_products= [
"id":"002",
"title": "Estee Lauder 多效智妍精华霜15ml",
"img_url": "http://p0.jmstatic.com/product/003/565/3565880_std/3565880_350_350.jpg",
"price": 249.0,
"number":6,
"acount": "520",
"ischecked":true
,
"id":"004",
"title": "EsteeLauder 肌透修护洁面乳30ml",
"img_url": "http://p4.jmstatic.com/product/003/155/3155764_std/3155764_350_350.jpg",
"price": 49.9,
"number":1,
"acount": "5911",
"ischecked":false
,
"id":"008",
"title": "雅诗兰黛无痕持妆粉底液",
"img_url": "http://p3.jmstatic.com/product/003/662/3662318_std/3662318_350_350.jpg",
"price": 69.9,
"number":2,
"acount": "3972",
"ischecked":true
,
"id":"0012",
"title": "Estee Lauder 肌初赋活原生液30ml",
"img_url": "http://p4.jmstatic.com/product/003/565/3565914_std/3565914_350_350.jpg",
"price": 159.0,
"number":1,
"acount": "2338"
,
"id":"001",
"title": "雅诗兰黛无痕持妆粉底液30ml",
"img_url": "http://p2.jmstatic.com/product/001/648/1648502_std/1648502_350_350.jpg",
"price": 298.0,
"number":4,
"acount": "5071",
"ischecked":false
,
"id":"009",
"title": "雅诗兰黛眼部精华霜15ml",
"img_url": "http://p1.jmstatic.com/product/001/049/1049746_std/1049746_350_350.jpg",
"price": 399.0,
"number":1,
"acount": "4022",
"ischecked":false
]
// 添加商品
function load()
var tbody=document.querySelector('.cart-container table tbody');
for(let good of skin_products)
tbody.innerHTML+=` <tr class="cart-good" id="$good.id">
<td><input type="checkbox" class="good-check" $good.ischecked?"checked":''></td>
<td>
<img src="$good.img_url" alt="">
<p>[极速免税]PITTA MASK 口罩3枚入</p>
<p>型号：新版防晒款 容量：3枚入</p>
</td>
<td>$good.price</td>
<td>
<input type="button" value="-" $good.number<=1?"disabled":''>
<input type="text" value="$good.number">
<input type="button" value="+">
</td>
<td>$good.price*good.number</td>
<td><a href="#">删除</a></td>
</tr>`
totalAcount();
load();
// end all..........
// 1. 为table注册单击事件
var table01=document.querySelector('.cart-container table');
table01.onclick=function (event)
var node=event.target
if(node.getAttribute('type')=='button')
// alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
else if(node.className=='good-check')
checkedAllRows();
else if(node.id=='chk_alla')
var f=event.target.checked;
var chks=document.querySelectorAll('.good-check');
for(var ck of chks)
ck.checked=f;
for(var good of skin_products)
good.ischecked=f;
else if(node.nodeName.toLowerCase()=='a')
var tr=event.target.parentNode.parentNode;
for(var i=0;i<skin_products.length;i++)
if(skin_products[i].id==tr.id)
skin_products.splice(i,1);
console.log(skin_products);
tr.parentNode.removeChild(tr);
totalAcount();
;
//单击增加或减少按钮的方法
function changeNumber(event)
var node=event && event.target;
var v=0;
if(node.value && node.value=='+')
// node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;
else
// if(node.value && node.value=='+')
if(node.nextElementSibling.value>1)
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1)
node.disabled=true;
// 存储商品数量
var id=node.parentNode.parentNode.id;
for(var good of skin_products)
if(id==good.id)
good.number=v;
// 每个商品小计的方法
function subtotal(event)
var node=event && event.target;
// var id=node.parentNode.parentNode.id;
// for(var g of skin_products)
// if(g.id==id)
// alert(g.price);
//
//
// var price=；
var price=node.parentNode.previousElementSibling.innerText;
var num=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
// 检验该商品是否选中
function checkedRow(event)
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
// event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
// var tbody=event.target.parentNode.parentNode.parentNode;
// event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
// 检查是否全选
function checkedAllRows()
var chks=document.querySelectorAll('.good-check');
var flag=true;
for(var ck of chks)
if(!ck.checked)
flag=false;
break;
document.querySelector('#chk_alla').checked=flag;
// 统计商品总量和总价格
function totalAcount()
var total=0;
var total_price=0;
var chks=document.querySelectorAll('.good-check');
for(var ck of chks)
if(ck.checked)
id=ck.parentNode.parentNode.id;
for(var good of skin_products)
if(id==good.id)
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;
document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;
)();
</script>
</body>
</html> 参考技术A 用js去实现 参考技术B HTML只是前端计算给用户看看的，你可不能直接就把计算总和插进数据库里。服务器上还要重新算一边的追问
要是不用链接数据库呢？就只是能计算一下总和呢？
jQuery复习 简单实现购物车功能
每天记录自己在学校学到的点点滴滴，让每天的生活过的更加充实！加油！
注：本次案例简单实现购物选择的功能！
实现效果：添加部分产品，左边为勾选框，右边为商品和数量选择，数量可以增加或减少，只有复选框勾选的时候，添加产品才可以显示所需金额，下方为商品总价格！
html代码：
<table id="tb1"> <tr> <td>勾选状态</td> <td>商品名称</td> <td>商品价格</td> <td>数量</td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>空调</td> <td class="auto-style1">2400</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>长虹电视</td> <td class="auto-style1">2600</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>小米3</td> <td class="auto-style1">2200</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>BlurAir空气净化器</td> <td class="auto-style1">5000</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>三星显示器</td> <td class="auto-style1">2000</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> </table> <h3>总价格:<span id="spNumber"></span></h3>
Jquery代码：
<script type="text/javascript"> $(document).ready(function () { $(".sum").click(function () { 添加产品数量 var tdlist = $(this).next("input").val(); 获取文本框数量值 var number = parseInt(tdlist) + 1; 加一 var sum = 0; $(this).next("input").val(number); getSum(); }); $(".min").click(function () { 减少产品数量 var tdlist = $(this).prev("input").val(); if (tdlist > 0) { 数量不能为负 var number = parseInt(tdlist) - 1; 减一 $(this).prev("input").val(number); getSum(); } }); $(".a").click(function () { getSum(); }) function getSum() { 获取产品总金额 var trlist = $("#tb1").find("tr:gt(0)"); var sum = 0; trlist.each(function () { var check = $(this).find("input[type=‘checkbox‘]").prop("checked"); 勾选框为true if (check == true) { var monery = $(this).find(".auto-style1").text(); 获得商品单价 var number = $(this).find("input:text").val(); 选择商品数量 var s = parseInt(monery) * parseInt(number); 相乘 sum += s; } $("#spNumber").text(sum); 赋值 }); } }); </script>
代码到这里就结束啦！后边还会再加一些功能！再接再厉！
以上是关于用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Rails 4 中显示购物车中每种产品的材料价格总和？