效果图
源代码
<!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) //参数：购物车的id，价格
{
//alert(cs1+" - " +cs2);
//document.getElementById("feiyong").innerHTML = cs2;
feiyong=document.getElementById("feiyong").innerHTML;
//alert(document.getElementById("xuhao"+cs1).checked)
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)//参数：购物车的id，数量，价格
{
//alert(cs1+" - " +cs2+" - " +cs3 );
//更改数量显示
document.getElementById("shu"+cs1).value = Number(document.getElementById("shu"+cs1).value) + Number(1);
//alert(document.getElementById("shu"+cs1).value);
//更改数据库中的数量
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)//参数：购物车的id，数量，价格
{
//alert(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); //jijia1(cs1,cs2) //参数：购物车的id，价格
}
}
}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); //jijia1(cs1,cs2) //参数：购物车的id，价格
}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; //有产品附图，默认0没有，1有
$xg_cp_tupian1="";
$xg_cp_tupian2="";
$xg_cp_tupian3="";
$xg_cp_tupian4="";
$xg_zhuangtai_yn=0; //0默认在销，1下架
$xg_tuijian_yn=0; //0默认不首页推荐，1首页推荐
$xg_jianjie_yn=0; //0默认，1有
$xg_jianjie="";
$xg_neirong="";
$xg_fabu_riqi="";
//$xg_="";
while ($row_xg=mysqli_fetch_array($jieguo_xg,MYSQLI_ASSOC)){
//echo "{$row["id"]}"."{$row["cn"]}"."{$row["en"]}"."<br>";
$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"]; //有产品附图，默认0没有，1有
$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"];; //0默认在销，1下架
$xg_tuijian_yn=$row_xg["tuijian_yn"];; //0默认不首页推荐，1首页推荐
$xg_jianjie_yn=$row_xg["jianjie_yn"];; //0默认，1有
$xg_jianjie=$row_xg["jianjie"];
$xg_neirong=$row_xg["neirong"];
$xg_fabu_riqi=$row_xg["fabu_riqi"];
//$xg_=$row[""];
}
?>
<!--购物车-产品列表-->
<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>
参考网址：www.pc-365.net
扫一扫
6749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
