JavaScript写了一个简单的购物车函数

网上有很多关于购物车实现的代码。今天看了一些知识点，决定自己写，就写了一个简单的购物车。接下来，我将解释具体的实现。

1.用html实现内容；

2.用css装饰外观；

3.用js(jq)设计动态效果。

第一步：首先，设计html页面。我用一个大div来包含所有的产品，然后用不同的div包装不同的产品。我使用ul li来实施产品清单。具体实现代码如下(代码涉及的所有产品都是在网上随便复制的，没有参考价值):

div id=' goods ' div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/1 . png '/Li Li class=' god price '25.00/Li Li class=' god info ' 《飞鸟集》，很多诗词都是/Li Li class=' god add ' a href=' JavaScript :添加到购物车/a/Li/ul/div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/2 . png '/Li Li class=' god price '56.00/class=' god info '本书主要介绍/Li Li class=' god add ' a href=' JavaScript :'添加到购物车/a/Li/ul/div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/3 . png '/Li Li class=' god price '37.00/李丽丽class=' god info '用文字打败时间冯唐最畅销的作品，随笔是其最畅销、最受欢迎的作品。/Li Li class=' godd ' a href=' JavaScript :添加到购物车/a/Li/ul/div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/1 . png '/Li Li class=' god price '25.00/Li Li class=' god info ' 《飞鸟集》中的很多诗都是用孟加拉语写的，这套诗集最早是郑振铎老师翻译介绍到中国的。/Li Li class=' godd ' a href=' JavaScript :'添加到购物车/a/Li/ul/div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/2 . png '/Li Li class=' god price '56/Li Li class=' god info '本书主要介绍如何使用现有的/Li Li class=' god add ' a href=' JavaScript :'添加到购物车/a/Li/ul/div class=' goods item ' ul class=' god item ' Li class=' god pic ' img src=' http : images/3 . png '/Li Li class=' god price '37.00/李丽丽class=' god info '用文字打败时间冯唐最畅销的作品，随笔是其最畅销、最受欢迎的作品。/Li Li class=' godd ' a href=' JavaScript :添加到购物车/a/Li/ul/div/div id=' god car ' div class=' dnum ' 0/div class=' dcar ' img src=' http : images/car . jpg '/div/div涉及到一个知识点：在Li class=' god add ' a href=' JavaScript加入购物车/a/Li中，我使用了javascript:这意味着不跳转地执行空事件。

第二步：外观设计。为了更好地显示，我设置了包含每个项目列表的div的宽度、高度和边框。值得注意的是，为了把购物车固定在某个位置，我把它的位置设置为fixed，然后设置top和left把它固定在你想要的位置。此外，学会灵活使用边距和填充，让显示更加美观。

注意：如果要为内嵌元素设置块级元素的宽度和高度或其他属性，则需要设置display:block。

具体设计代码如下：

* { padding: 0pxmargin: 0pxFont-family: '微软雅黑'；}.goodsItem { width:280px高度： 400 px；向左浮动：border: 1px固体# cccmargin:5px} #货物{ width:910px}.god item { list-style : none；}.godpic img { display:块；宽度width:250px高度： 250 px；margin:0px汽车；}.戈德普莱斯。godinfo，godadd { display:块；宽度width:220pxmargin:0px汽车；文本对齐：中心；}.god price { font-size : 20px；color: # f00}.god info { text-align : center；font-size : 14px；margin: 10px 0px}.godadd a { display:块；宽度： 150 px；height: 36px背景-颜色： # fd6a 01；border-radius : 10px；margin: 0px自动；文本装饰：无；color: # fff线高： 36px；}#godcar{位置：固定；right: 0pxtop :40%；宽度： 72px；height: 64px} #神车。dnum { width:24pxheight: 24pxborder-radius : 12px；背景-color : # f00；文本对齐：中心；线高： 24px；绝对位置：font-size : 12px；top:0px}.上帝啊。bg {背景色： # 808080；}第一个*表示为所有元素设置属性，在开头设置边距和填充是一个好习惯。

第三步：实现静态页面，然后通过jq实现购物车，比如加入购物车，改变购物车数量。我花了一些时间设计：如何让图片慢慢移动到购物车，然后变小，最后消失。其中，我使用了动画功能来实现这个过程。实现这个功能的难点在于如何移动和改变画面。

接下来，解释如何实现这个过程：

1)首先需要获得商品的图片，然后将获得的图片进行复制；

var img=$(this)。父项()。查找('。god pic’)。find(' img ')；var cimg=img . clone()；2)获取产品图片的左上值和购物车的左上值，可以通过动画功能进行移动；var imgtop=img.offset()。顶部；

var imgleft=img.offset()。向左；var cartop=$('#godcar ')。偏移量()。顶部；var carleft=$('#godcar ')。偏移量()。向左；3)编写动画功能，实现具体效果；cimg.appendTo($('body '))。CSS({ 0

位置' : '绝对'，//绝对定位'不透明度' :' 0.7 '，'顶部' : img顶部，'左侧' : img英尺})。animate ({'top' : cartop，' left ' : car left)Width ' : ' 40px '，' height' :' 40px '，' opacity ' : ' 0.3 '//transparency }，1000，function(){ cimg . remove()；//图片消失$('。dnum ')。文本；//购物车数量的变化})；实现了简单的运动和变化。

但是后来我觉得每次刷新页面购物车数量都回到0好像不是真的，于是我就想怎么在刷新页面的时候防止购物车数量发生变化。我查了数据，总结了三个方法：

(1)保存到数据库；(2)通过cookie方法；(3)采用h5 localStorage方法；

最后，我决定采用第三种方法，因为我想尝试h5的新方法(出于好奇，就因为看到了这个方法，就尝试一下)，localStorage方法存储的数据没有时间限制。第二天、第二周或第二年之后，数据仍然可用。我的代码实现了：localStorage.getItem

好了，所有的讲座都结束了，附上jq的所有代码，喜欢就好：

var I=0；$(function(){ var inum=0；if(localStorage.getItem('inum ')！==null){ inum=本地存储。getitem(' inum ')；} $('.dnum ').文本（分钟);$('.godadd ').单击(function(){ if(！$(这个)。查找(' a ').有类(' BG '){ I；$(这个)。查找(' a ').add CLaSS(' BG ')；var img=$(this).父项()。查找('。上帝保佑.find(' img ')；var cimg=img。clone()；var imgtop=img.offset().顶部；var imgleft=img.offset().向左；var cartop=$('#godcar ').偏移量()。顶部；var carleft=$('#godcar ').偏移量()。向左；cimg . appendo($(' 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。移除()；$('.dnum ').文本;localStorage.setItem('inum '，I)；});} });});效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。