效果图
代码
<!doctype html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>黄菊华:H5
+CSS3商城界面实战
-购物车
</title
>
<meta name
="viewport" content
="width=device-width, initial-scale=1, user-scalable=no">
<link rel
="stylesheet" href
="css/gouwuche.css">
<script language
="javascript">
function del(url
)
{
if (confirm("确定要删除该信息?删除后不可恢复!"))
{
window
.location
.href
=url
;
}
}
</script
>
</head
>
<body
>
<?php
require
"conn.php";
?>
<form name
="form1" method
="post" action
="gwc_xiadan.php" onSubmit
="return jiesuan();" >
<!--购物车
-顶部导航
-->
<div class
="dingbu">
<a href
="index.php" class
="dingbu_lianjie">
<img src
="img/back.png" alt
="" class
="dingbu_lianjie_img" />
</a
>
<p class
="dingbu_biaoti">购物车
</p
>
</div
>
<iframe name
="frm01" width
="0" height
="0" frameborder
="0" src
=""></iframe
>
<script
>
var feiyong
=0;
function jijia1(cs1
,cs2
)
{
feiyong
=document
.getElementById("feiyong").innerHTML
;
if(document
.getElementById("xuhao"+cs1
).checked
==true)
{
feiyong
= Number(feiyong
) + Number(cs2
)*Number(document
.getElementById("shu"+cs1
).value
);
}else
{
feiyong
= Number(feiyong
) - Number(cs2
)*Number(document
.getElementById("shu"+cs1
).value
);
}
document
.getElementById("feiyong").innerHTML
= feiyong
;
}
function jia(cs1
,cs2
,cs3
)
{
document
.getElementById("shu"+cs1
).value
= Number(document
.getElementById("shu"+cs1
).value
) + Number(1);
frm01
.location
= "gwc_update_shuliang.php?cs_gwc_id="+cs1
+"&cs_cp_shuliang=" +document
.getElementById("shu"+cs1
).value
feiyong
=document
.getElementById("feiyong").innerHTML
;
if(document
.getElementById("xuhao"+cs1
).checked
==true)
{
feiyong
= Number(feiyong
)+Number(cs3
);
document
.getElementById("feiyong").innerHTML
= feiyong
;
}
}
function jian(cs1
,cs2
,cs3
)
{
shu
= document
.getElementById("shu"+cs1
).value
;
if(shu
==1)
{
alert("数量不能少于1");
}
else
{
document
.getElementById("shu"+cs1
).value
= Number(document
.getElementById("shu"+cs1
).value
)-Number(1)
frm01
.location
= "gwc_update_shuliang.php?cs_gwc_id="+cs1
+"&cs_cp_shuliang=" +document
.getElementById("shu"+cs1
).value
feiyong
=document
.getElementById("feiyong").innerHTML
;
if(document
.getElementById("xuhao"+cs1
).checked
==true)
{
feiyong
= Number(feiyong
)-Number(cs3
);
feiyong
=document
.getElementById("feiyong").innerHTML
= feiyong
;
}
}
}
function qx()
{
if(document
.getElementById("quanxian").checked
==true)
{
var objNameList
=document
.getElementsByName('xuhao[]');
for(var i
=0;i
<objNameList
.length
;i
++){
if(objNameList
[i
].checked
==true)
{}else{
objNameList
[i
].checked
=true;
var blm
="jijia1(" + objNameList
[i
].value
+ ")"
eval(blm
);
}
}
}else{
var objNameList
=document
.getElementsByName('xuhao[]');
for(var i
=0;i
<objNameList
.length
;i
++){
if(objNameList
[i
].checked
==true)
{
objNameList
[i
].checked
=false;
var blm
="jijia1(" + objNameList
[i
].value
+ ")"
eval(blm
);
}else{
}
}
}
}
function jiesuan()
{
var gouwushu
= 0
var objNameList
=document
.getElementsByName('xuhao[]');
for(var i
=0;i
<objNameList
.length
;i
++)
{
if(objNameList
[i
].checked
==true)
{
gouwushu
= gouwushu
+ 1;
}else{}
}
if(gouwushu
<=0)
{
alert("请选择产品!");
return false;
}
}
</script
>
<?php
$sql_gwc
="select * from gouwuche where u_id=".@$_COOKIE
["h_id"]." and zt=1 order by id desc ";
$jieguo_gwc
=mysqli_query($conn
,$sql_gwc
);
if(!$jieguo_gwc
){
die("不能获取数据");
}
while ($row_gwc
=mysqli_fetch_array($jieguo_gwc
,MYSQLI_ASSOC
))
{
$var_gwc_id
= $row_gwc
["id"];
$var_cp_shuliang
= $row_gwc
["cp_shuliang"];
$var_jiage_chengjiao
= $row_gwc
["jiage_chengjiao"];
$sql_xg
="select * from shangpin where id=".$row_gwc
["cp_id"];
$jieguo_xg
=mysqli_query($conn
,$sql_xg
);
if(!$jieguo_xg
){
die("获取商品数据失败");
}
$xg_mingcheng
="";
$xg_lx_id1
=0;
$xg_lx_id2
=0;
$xg_kucun
=0;
$xg_yixiaoshou
=0;
$xg_jiage1
=0;
$xg_jiage2
=0;
$xg_jiage3
=0;
$xg_cp_tupian
="";
$xg_cp_tupian_yn
=0;
$xg_cp_tupian1
="";
$xg_cp_tupian2
="";
$xg_cp_tupian3
="";
$xg_cp_tupian4
="";
$xg_zhuangtai_yn
=0;
$xg_tuijian_yn
=0;
$xg_jianjie_yn
=0;
$xg_jianjie
="";
$xg_neirong
="";
$xg_fabu_riqi
="";
while ($row_xg
=mysqli_fetch_array($jieguo_xg
,MYSQLI_ASSOC
)){
$xg_mingcheng
=$row_xg
["mingcheng"];
$xg_lx_id1
=$row_xg
["lx_id1"];
$xg_lx_id2
=$row_xg
["lx_id2"];
$xg_kucun
=$row_xg
["kucun"];
$xg_yixiaoshou
=$row_xg
["yixiaoshou"];
$xg_jiage1
=$row_xg
["jiage1"];
$xg_jiage2
=$row_xg
["jiage2"];
$xg_jiage3
=$row_xg
["jiage3"];
$xg_cp_tupian
=$row_xg
["cp_tupian"];
$xg_cp_tupian_yn
=$row_xg
["cp_tupian_yn"];
$xg_cp_tupian1
=$row_xg
["cp_tupian1"];
$xg_cp_tupian2
=$row_xg
["cp_tupian2"];
$xg_cp_tupian3
=$row_xg
["cp_tupian3"];
$xg_cp_tupian4
=$row_xg
["cp_tupian4"];
$xg_zhuangtai_yn
=$row_xg
["zhuangtai_yn"];;
$xg_tuijian_yn
=$row_xg
["tuijian_yn"];;
$xg_jianjie_yn
=$row_xg
["jianjie_yn"];;
$xg_jianjie
=$row_xg
["jianjie"];
$xg_neirong
=$row_xg
["neirong"];
$xg_fabu_riqi
=$row_xg
["fabu_riqi"];
}
?>
<!--购物车
-产品列表
-->
<div class
="gwc_cp">
<!--购物车
-产品列表
-单号栏
-->
<div class
="dingdan_hao">
<div class
="dingdan_hao_zuo">时间:
<?php echo $row_gwc
["shijian_gouwuche"] ?></div
>
<a class
="dingdan_hao_you" style
="cursor:hand;" onClick
=del("gwc_del.php?cs_gwcid=<?php echo $row_gwc["id
"] ?>") >
<img src
="img/del.png" alt
="" class
="dingdan_hao_you_img" />
</a
>
</div
>
<!--购物车
-产品区块制作
-->
<div class
="gwc_cp_xiangmu">
<!--购物车
-产品区块制作
-左侧
-选择项
-->
<div class
="gwc_cp_xiangmu_xuanzhhe">
<input type
="checkbox" class
="gwc_cp_xiangmu_xuanzhhe_chk"
onChange
="jijia1(<?php echo $var_gwc_id ?>,<?php echo $var_jiage_chengjiao ?>)"
id
="xuhao<?php echo $var_gwc_id ?>" name
="xuhao[]" value
="<?php echo $var_gwc_id ?>,<?php echo $var_jiage_chengjiao ?>"
/>
</div
>
<!--购物车
-产品区块制作
-中间
-图片
-->
<div class
="gwc_cp_xiangmu_tupian">
<img src
="/up/<?php echo $xg_cp_tupian ?>" class
="gwc_cp_xiangmu_tupian_img" />
</div
>
<!--购物车
-产品区块制作
-右侧
-产品信息
-->
<div class
="gwc_cp_xiangmu_xinxi">
<div class
="gwc_cp_xiangmu_xinxi_biaoti">
<?php echo $row_gwc
["cp_mingcheng"] ?>
</div
>
<div class
="gwc_cp_xiangmu_xinxi_shuxing">
库存:
<?php echo $xg_kucun
?> | 已销售:
<?php echo $xg_yixiaoshou
?>
</div
>
<!--购物车
-产品区块制作
-右侧
-产品信息
-价格
-->
<div class
="gwc_cp_xiangmu_xinxi_jiage">
<div class
="gwc_cp_xiangmu_xinxi_jiage_zuo">
<span style
="color:#999; font-size: 12px;"><strike
>¥
<?php echo $row_gwc
["jiage_shichang"] ?></strike
></span
> 
; 
;
¥
<?php echo $row_gwc
["jiage_chengjiao"] ?>
</div
>
<div class
="gwc_cp_xiangmu_xinxi_jiage_you">
<!--减少产品数量
-->
<img src
="img/jian1.png" class
="gwc_cp_xiangmu_xinxi_jiage_you1"
onClick
="jian(<?php echo $var_gwc_id ?>,<?php echo $var_cp_shuliang ?>,<?php echo $var_jiage_chengjiao ?>)"
/>
<input type
="text" class
="gwc_cp_xiangmu_xinxi_jiage_you2" size
="2" value
="<?php echo $var_cp_shuliang ?>"
id
="shu<?php echo $var_gwc_id ?>" name
="shu"
/>
<!--增加产品数量
-->
<img src
="img/jia1.png" class
="gwc_cp_xiangmu_xinxi_jiage_you3"
onClick
="jia(<?php echo $var_gwc_id ?>,<?php echo $var_cp_shuliang ?>,<?php echo $var_jiage_chengjiao ?>)"
/>
</div
>
</div
>
</div
>
</div
>
</div
>
<div class
="huise10"></div
>
<?php
}
?>
<div class
="dibu_jiesuan">
<div class
="dibu_jiesuan_zuo">
<input type
="checkbox" class
="dibu_jiesuan_zuo_chk" id
="quanxian" name
="quanxian" onChange
="qx();" />
<label
for="quanxian">全选
</label
>
</div
>
<div class
="dibu_jiesuan_zhong">
合计:¥
<span id
="feiyong"></span
>
</div
>
<input type
="submit" value
="去结算" class
="dibu_jiesuan_you" >
</div
>
</form
>
</body
>
</html
>
转载请注明原文地址: https://lol.8miu.com/read-13637.html