用HTML+CSS和jq写简易购物车代码？
以下是一个简易购物车的HTML+CSS和jQuery代码示例：
HTML部分：
困悔div class="cart-container"
h2购物车/h2
ul class="cart-items"
li class="cart-item"
img src="item1.jpg" alt="商品1"
span class="item-name"商品1/span
span class="item-price"100元/span
input type="number" class="item-quantity" value="1"改尺枝
button class="remove-btn"删除/button
/li
li class="cart-item"
img src="item2.jpg" alt="商品2"
span class="item-name"商品2/核敏span
span class="item-price"200元/span
input type="number" class="item-quantity" value="1"
button class="remove-btn"删除/button
/li
/ul
p class="total-price"总价：span300元/span/p
/div
CSS部分：
.cart-container {
width: 400px;
border: 1px solid #ccc;
padding: 20px;
}
.cart-items {
list-style-type: none;
padding: 0;
margin: 0;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.cart-item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.item-name, .item-price {
flex: 1;
}
.item-quantity {
width: 50px;
margin-right: 10px;
}
.remove-btn {
background-color: #ccc;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.total-price {
margin-top: 20px;
text-align: right;
}
jQuery部分：
$(document).ready(function() {
// 计算初始总价
updateTotalPrice();
// 删除商品按钮点击事件
$('.remove-btn').click(function() {
$(this).parent().remove();
updateTotalPrice();
});
// 商品数量输入框变化事件
$('.item-quantity').change(function() {
updateTotalPrice();
});
// 更新总价函数
function updateTotalPrice() {
var total = 0;
$('.cart-item').each(function() {
var price = parseInt($(this).find('.item-price').text());
var quantity = parseInt($(this).find('.item-quantity').val());
total += price * quantity;
});
$('.total-price span').text(total + '元');
}
});
该示例中，使用了HTML和CSS来构建购物车的界面，使用jQuery来实现购物车的逻辑。购物车中的每个商品都包含了商品名称、商品图片、商品价格、商品数量和删除按钮，当点击删除按钮时，对应的商品会从购物车中删除并重新计算总价；当商品数量变化时，总价也会自动更新。
静态HTML网页可以实现购物车功能吗？而且不用数据库...
一般购物车用session或者cookie实现。如果要实现session，HTML是不可能
如果用孙御cookie可以用js来做。理论上是可以实现。但没多少人做这种事情。
可能是因为这样对用户的认证是一大问题，正常点的网站不可能不中凯携实行用户认证的。
不过退一步，用flash做的话，不但变量保存问题可以比较容易解决，网页效果也会好很多。当然，步骤稍微麻烦点，技术要求高点。
通常卖伏不会用mailto来发邮件。除非你只想发几句话。稍微大一点的文本就发不了了。
用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。
html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax
纯前端的话可以参考下面的
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titlecart/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"
tdinput type="checkbox" id="chk_alla"/td
td聚美优品发货/td
td聚美价/td
td数量/td
td小计/td
td操作/td
/tr
!--tr class="cart-good"--
!--tdinput type="checkbox" id="001"/td--
!--td--
!--img src="" alt=""--
!--p[极速免税]PITTA MASK 口罩3枚入/p--
!--p型号：新版防晒款 容量：3枚入/p--
!--/td--
!--td89.00/td--
!--td--
!--input type="button" value="-"--
!--input type="text" value="1"--
!--input type="button" value="+"--
!--/td--
!--td89.00/td--
!--tda 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": "",
"price": 249.0,
"number":6,
"acount": "520",
"ischecked":true
},
{
"id":"004",
"title": "EsteeLauder 肌透修护洁面乳30ml",
"img_url": "",
"price": 49.9,
"number":1,
"acount": "5911",
"ischecked":false
},
{
"id":"008",
"title": "雅诗兰黛无痕持妆粉底液",
"img_url": "",
"price": 69.9,
"number":2,
"acount": "3972",
"ischecked":true
},
{
"id":"0012",
"title": "Estee Lauder 肌初赋活原生液30ml",
"img_url": "",
"price": 159.0,
"number":1,
"acount": "2338"
},
{
"id":"001",
"title": "雅诗兰黛无痕持妆粉底液30ml",
"img_url": "",
"price": 298.0,
"number":4,
"acount": "5071",
"ischecked":false
},
{
"id":"009",
"title": "雅诗兰黛眼部精华霜15ml",
"img_url": "",
"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}"
tdinput 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
tda 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;iskin_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.value1){
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
求PHP里的TP5的购物车代码
可以参考如下代码
?php
class Cart extends Think {
//当前购物车名
public $sessionName;
//购物车总价格
public $totalPrice
public function __construct($sessionName)
{
$this-sessionName=$sessionName;
if(!isset($_SESSION[$this-sessionName]))
{
$_SESSION[$this-sessionName]="";
}
}
//获取购物车的信息
public function getCart(){
$cur_cart_array=$_SESSION[$this-sessionName];
return $cur_cart_array;
}
//获取购物车商品清单
public function getCartList()
{
$cur_cart_array=$_SESSION[$this-sessionName];
if($cur_cart_array!="")
{
$mode_goods_data=M("goods_data");
$len=count($cur_cart_array);
for($i=0;$i$len;$i++)
{
$goodsid=$cur_cart_array[$i]["id"];
$num=$cur_cart_array[$i]["num"];
$query="select (select sfilename from goods_pic where goodsid=a.goodsid order by sno desc limit 0,1) as sfilename,b.clsname as clsname,a.goodsid as goodsid,a.goodsname as goodsname,a.Price as Price,a.Storageqty as Storageqty from goods_data a left join 含芹goods_cls b on a.Clsid=b.clsid where a.goodsid=$goodsid";
$list=$mode_goods_data-query($query);
$list[0]["qty"]=$num;
$list[0]["amount"]=$num*$list[0]["Price"];
$cartList[$i]=$list[0];
$totalPrice+=$list[0]["amount"];
}
//返回商品总价格
$this-totalPrice=$totalPrice;
友老判 return $cartList;
}
}
//加入购物车,购物车的商品id和购物车的商品数量
public function addcart($goods_id,$goods_num){
$cur_cart_array=$_SESSION[$this-sessionName];
if($cur_cart_array=="")
{
$cart_info[0]["id"]=$goods_id;//商品id保存到二维数组中好改
$cart_info[0]["num"]=$goods_num;//商品数量保存到二维数组中
$_SESSION[$this-sessionName]=$cart_info;
}
else
{
//返回数组键名倒序取最大
$ar_keys=array_keys($cur_cart_array);
$len=count($ar_keys);
$max_array_keyid=$ar_keys[$len-1]+1;
//遍历当前的购物车数组
//遍历每个商品信息数组的0值，如果键值为0且货号相同则购物车该商品已经添加
$is_exist=$this-isexist($goods_id,$goods_num,$cur_cart_array);
if($is_exist==false)
{
$cur_cart_array[$max_array_keyid]["id"] = $goods_id;
$cur_cart_array[$max_array_keyid]["num"] = $goods_num;
$_SESSION[$this-sessionName]=$cur_cart_array;
}
else
{
$arr_exist=explode("/",$is_exist);
$id=$arr_exist[0];
$num=$arr_exist[1];
$cur_cart_array[$id]["num"]=$num;
$_SESSION[$this-sessionName]=$cur_cart_array;
}
}
}
//判断购物车是否存在相同商品
public function isexist($id,$num,$array)
{
$isexist=false;
foreach($array as $key1=$value)
{
foreach($value as $key=$arrayid)
{
if($key=="id" $arrayid==$id)
{
$num=$value["num"]+$num;
$isexist=$key1."/".$num;
}
}
}
return $isexist;
}
thinkphp开发使得我们比较容易的去进行了
//从购物车删除
public function delcart($goods_array_id){
//回复序列化的数组
$cur_goods_array=$_SESSION[$this-sessionName];
//删除该商品在数组中的位置
unset($cur_goods_array[$goods_array_id]);
$_SESSION[$this-sessionName]=$cur_cart_array;
//使数组序列化完整的保存到cookie中
}
//清空购物车
public function emptycart(){
$_SESSION[$this-sessionName]="";
}
//修改购物车货品数量
public function update_cart($up_id,$up_num){
//回复序列化的数组
$cur_goods_array=$_SESSION[$this-sessionName];
$cur_goods_array[$up_id]["num"]=$up_num;
$_SESSION[$this-sessionName]=$cur_cart_array;
}
}
?
设计一个购物车，包含html和php两个文件，html让客户输入个人信息以及显示商品信息。php将订单信息返回给
订单表，客户信息表，商品信息团汪迅表，购物车表存放客户信息表，商品信息表陵仿的主键id，用来关联，并且建立一个数量的字段，用来计算总价。客户录入表单去提交页面添加判断然后跳转购物页，添加购物车的话直接基于数量和两个主键id去添加，下单的话塌此基于时间戳生成订单编号和客户编号存放在订单表中，记得主外键关联
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
