php购物车页面如何做,HTML代码实现简易购物车

网上关于购物车实现的代码非常多&＃xff0c;本次的这篇文章主要是和大家分享了HTML代码实现简易购物车&＃xff0c;有需要的小伙伴可以看一下&＃xff0c;接下来讲解一下具体的实现。

1、用html实现内容&＃xff1b;

2、用css修饰外观&＃xff1b;

3、用js(jq)设计动效。

第一步&＃xff1a;首先是进行html页面的设计&＃xff0c;我用一个大的p将所有商品包含&＃xff0c;然后用不同的p将不同的商品进行封装&＃xff0c;商品列表中我用了ul li实现&＃xff0c;具体实现代码如下(代码中涉及到的商品都是网上随便copy的&＃xff0c;不具有参考价值)&＃xff1a;

• 
• &＃xffe5;25.00
• 《飞鸟集》中很多诗歌是用孟加拉文创作的&＃xff0c;这部诗集最早由郑振铎先生译介到中国。
• 加入购物车

• 
• &＃xffe5;56.00
• 本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。
• 加入购物车

• 
• &＃xffe5;37.00
• 用文字打败时间。冯唐最畅销作品&＃xff0c;杂文才是其销量最好、最受欢迎的作品。
• 加入购物车

• 
• &＃xffe5;25.00
• 《飞鸟集》中很多诗歌是用孟加拉文创作的&＃xff0c;这部诗集最早由郑振铎先生译介到中国。
• 加入购物车

• 
• &＃xffe5;56
• 本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。
• 加入购物车

• 
• &＃xffe5;37.00
• 用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。
• 加入购物车

0

其中涉及到一个知识点&＃xff1a;在

中&＃xff0c;我用到了Javascript:;这个的意思表示不进行跳转&＃xff0c;执行一个空事件。

第二步&＃xff1a;进行外观设计&＃xff0c;为了更好的显示&＃xff0c;我将包含每个商品列表的p设置了width和height,以及border,值得注意的是&＃xff0c;我为了让购物车固定在某个位置&＃xff0c;将其position设置为fixed&＃xff0c;然后通过设置top和left让其固定在你想要的位置上。另外&＃xff0c;要学会灵活使用margin和padding&＃xff0c;让显示更美观。

注意&＃xff1a;如果想给行内元素设置width和height或者其他块级元素的属性&＃xff0c;那么需要设置display:block才可以。具体设计代码如下&＃xff1a;

* {

padding: 0px;

margin: 0px;

font-family: "微软雅黑";

}

.goodsItem{

width:280px;

height: 400px;

float: left;

border: 1px solid #ccc;

margin:5px;

}

#goods{

width:910px;

}

.goditem{

list-style: none;

}

.godpic img{

display: block;

width:250px;

height: 250px;

margin:0px auto;

}

.godprice,.godinfo,.godadd{

display: block;

width:220px;

margin:0px auto;

text-align: center;

}

.godprice{

font-size: 20px;

color: #f00;

}

.godinfo{

text-align: center;

font-size: 14px;

margin: 10px 0px;

}

.godadd a{

display: block;

width: 150px;

height: 36px;

background-color: #fd6a01;

border-radius: 10px;

margin: 0px auto;

text-decoration: none;

color:#fff;

line-height: 36px;

}

#godcar{

position: fixed;

right: 0px;

top:40%;

width: 72px;

height: 64px;

}

#godcar .dnum{

width:24px;

height: 24px;

border-radius: 12px;

background-color: #f00;

text-align: center;

line-height: 24px;

position: absolute;

font-size: 12px;

top:0px;

}

.godadd .bg {

background-color: #808080;

}

第一个*表示为所有元素设置属性&＃xff0c;在一开始就设置margin和padding是一个很好的习惯。

第三步&＃xff1a;实现了静态页面&＃xff0c;接下来需要通过jq进行购物车具体的实现&＃xff0c;比如加入购物车&＃xff0c;购物车数量变化等。我花了一些时间在设计&＃xff1a;如何让商品加入购物车时&＃xff0c;图片能够慢慢移动到购物车&＃xff0c;然后变小&＃xff0c;最后消失。其中&＃xff0c;我用到了animate函数实现这个过程。要实现这个功能的难点在于&＃xff1a;图片要怎么移动&＃xff0c;怎么变化。

接下来讲解如何实现这个过程&＃xff1a;

1)首先需要获取到商品的图片&＃xff0c;然后将获取到的图片复制一份&＃xff1b;

var img &＃61; $(this).parent().find(".godpic").find("img");

var cimg &＃61; img.clone();

2)得到商品图片的top和left值&＃xff0c;购物车的top和left值&＃xff0c;这样才可以通过animate函数实现移动&＃xff1b;var imgtop &＃61; img.offset().top;

var imgleft &＃61; img.offset().left;

var cartop &＃61; $("#godcar").offset().top;

var carleft &＃61; $("#godcar").offset().left;

3)编写animate函数&＃xff0c;实现具体的效果&＃xff1b;cimg.appendTo($("body")).css({

"position": "absolute",//绝对定位

"opacity": "0.7",

"top": imgtop,

"left": imgleft

}).animate({

"top": cartop,

"left": carleft,

"width": "40px",

"height": "40px",

"opacity": "0.3" //透明度

}, 1000, function () {

cimg.remove(); //图片消失

$(".dnum").text(i); //购物车数量变化

});

简单的移动和变化就实现了。

但是后面又想&＃xff0c;每次刷新购物车的数量重新归0好像不符合事实&＃xff0c;于是就想着如何实现刷新页面时&＃xff0c;不让购物车的数量发生变化&＃xff0c;查了资料&＃xff0c;总结了三种方法&＃xff1a;

(1)保存到数据库&＃xff1b;

(2)通过COOKIE方法&＃xff1b;

(3)通过h5的localStorage方法&＃xff1b;

最后我决定采用第三种方法&＃xff0c;因为想试试h5的新方法(出于好奇心理~~&＃xff0c;也是因为刚好看到这个方法&＃xff0c;就试试看)&＃xff0c;localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后&＃xff0c;数据依然可用。我的代码具体实现&＃xff1a;localStorage.getItem。

好了&＃xff0c;所有该讲的都讲完了&＃xff0c;附上jq的所有代码&＃xff0c;喜欢的就点个赞&＃xff1a;

var i &＃61; 0;

$(function(){

var inum &＃61; 0;

if(localStorage.getItem("inum")!&＃61;&＃61;null){

inum &＃61; localStorage.getItem("inum");

}

$(".dnum").text(inum);

$(".godadd").click(function(){

if (!$(this).find("a").hasClass("bg")) {

i&＃43;&＃43;;

$(this).find("a").addClass("bg");

var img &＃61; $(this).parent().find(".godpic").find("img");

var cimg &＃61; img.clone();

var imgtop &＃61; img.offset().top;

var imgleft &＃61; img.offset().left;

var cartop &＃61; $("#godcar").offset().top;

var carleft &＃61; $("#godcar").offset().left;

cimg.appendTo($("body")).css({

"position": "absolute",

"opacity": "0.7",

"top": imgtop,

"left": imgleft

}).animate({

"top": cartop,

"left": carleft,

"width": "40px",

"height": "40px",

"opacity": "0.3"

}, 1000, function () {

cimg.remove();

$(".dnum").text(i);

localStorage.setItem("inum", i);

});

}

});

});

最终效果图&＃xff1a;

聪明的你学会了吗&＃xff0c;赶快实践起来吧&＃xff01;