PHP session实现购物车功能
在wamp环境下,用PHP的session会话控制完成购物车的效果,数据存放在数组里练习,没有连接数据库,效果不错,简单易懂,以下是各部分的代码
common.php
1,'img'=>'img/1.jpg','title'=>'小米移动电源5000mAh','price'=>49), array('id'=>2,'img'=>'img/2.jpg','title'=>'20000mAh小米移动电源2','price'=>149), array('id'=>3,'img'=>'img/3.jpg','title'=>'小米圈铁耳机Pro','price'=>129), array('id'=>4,'img'=>'img/4.jpg','title'=>'小米家电动滑板车','price'=>1999), array('id'=>5,'img'=>'img/5.jpg','title'=>'小米笔记本','price'=>3499), array('id'=>6,'img'=>'img/6.jpg','title'=>'米家LED智能台灯','price'=>169), array('id'=>7,'img'=>'img/7.jpg','title'=>'小米体重秤','price'=>99), array('id'=>8,'img'=>'img/8.png','title'=>'小米电视3s48英寸','price'=>2599) );
index.php
商品展示 section{ width:1032px; height:700px; margin:40pxauto; } .top{ float:right; position:relative; width:190px; height:34px; border:1pxsolid#ccc; margin-right:32px; text-align:center; line-height:34px; border-radius:4px; transition:all.3slinear; -moz-transition:all.3slinear; -webkit-transition:all.3slinear; } .topa{ color:#d00; } .top:hover{ width:210px; color:#fff; font-weight:bold; background-color:#d00; border-radius:6px; } .top:hovera{ color:#fff; } .top:hoverspan{ background-color:#fff; color:#d00; } .top:hover.star{ right:150px; top:0; font-size:14px; color:#ff0; transform:rotate(1080deg); } .topspan{ position:absolute; top:2px; right:40px; width:18px; height:18px; font-weight:bold; border-radius:9px; line-height:18px; text-align:center; font-size:12px; font-weight:border; color:#fff; } .star{ color:#fff; font-size:48px; font-style:normal; position:absolute; right:530px; top:186px; transform:rotate(60deg); transition:all.3sease; } .on{ background-color:#e00; } .list{ margin:20px20px; padding:36px0; list-style:none; } a{ display:block; color:#757575; text-decoration:none; } .listli{ float:left; height:246px; width:234px; padding:10px020px; margin-right:12px; margin-top:20px; border:1pxsolid#ccc; background:#fff; -webkit-transition:all.2slinear; transition:all.2slinear; } .listli:hover{ box-shadow:2px4px5px#aaa; } .figure{ width:150px; height:150px; margin:0auto18px; } .title{ color:#222; font-size:14px; font-weight:normal; text-align:center; } .price{ margin:010px10px; text-align:center; color:#ff6700; } .cart{ margin:015px5px; text-align:center; } .carta{ color:#a34; width:190px; height:24px; border-radius:4px; margin:08px5px; text-align:center; } .carta:hover{ color:#eee; box-shadow:02px1px#333,02px1px#666; background-color:#ccc; background-image:linear-gradient(#33a6b8,#0089a7) } .num{ text-align:center; color:#ff6700; } 我的购物车 "> ★