Escrever uma Função de Carrinho de Compras Simples em JavaScript

Há muitos códigos sobre a implementação do carrinho de compras na internet, hoje vi alguns pontos de conhecimento, decidi escrever por conta própria, então escrevi um carrinho de compras simples, e vou explicar a implementação específica a seguir.　

1、Usar html para implementar o conteúdo;　

2、Usar css para modificar a aparência;　

3、Usar js(jq) para projetar efeitos animados.

Primeiro passo:Primeiro, o design da página html, uso de um grande div para incluir todos os produtos, e então usar diferentes divs para encapsular diferentes produtos, na lista de produtos usei ul li, a implementação específica do código é como follows (o código envolvido nos produtos são copiados da internet, não têm valor de referência):　

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">Muitas das poesias do "Livro das Aves Voando" foram escritas em bengali, e essa coletânea foi introduzida na China pelo Sr. Zheng Zhenzhuo.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56.00</li>
    <li class="godinfo">Este livro apresenta como usar as tecnologias web existentes para construir aplicativos Android.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">Derrotar o tempo com palavras. O trabalho mais vendido de Feng Tang, os ensaios são os que têm as melhores vendas e a maior popularidade.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">Muitas das poesias do "Livro das Aves Voando" foram escritas em bengali, e essa coletânea foi introduzida na China pelo Sr. Zheng Zhenzhuo.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">Este livro apresenta como usar as tecnologias web existentes para construir aplicativos Android.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">Derrotar o tempo com palavras. O trabalho mais vendido de Feng Tang, os ensaios são os que têm as melhores vendas e a maior popularidade.</li>
    <li class="godadd"><a href="javascript:;">Adicionar ao carrinho</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

其中涉及到一个知识点：在 <li class="godadd"><a href="javascript:;">加入购物车</a></li>中，我用到了javascript:;这个的意思表示不进行跳转，执行一个空事件。　

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

注：如果想给行内元素设置width和height或者其他块级元素的属性，那么需要设置display:block才可以。　

具体设计代码如下：　

* {
 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;
};

o primeiro*representa definir atributos para todos os elementos, definir margem e preenchimento no início é um bom hábito.

Terceiro passo:Implementei a página estática, em seguida, preciso implementar a carrinho de compras específico através do jq, por exemplo, adicionar ao carrinho de compras, mudança de quantidade do carrinho de compras, etc. Gastei algum tempo no design: como fazer com que a imagem do produto se mova lentamente para o carrinho de compras, encolha e desapareça. Entre eles, usei a função animate para implementar este processo. O ponto difícil para implementar esta função é: como mover a imagem, como mudar.　

A seguir, explico como implementar este processo:　

1) primeiramente, precisamos obter a imagem do produto, e copiar a imagem obtida;

var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2) obter os valores top e left da imagem do produto, os valores top e left do carrinho de compras, para que possamos usar a função animate para mover;

var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left; 

3) escrever a função animate, para implementar os efeitos específicos;
　cimg.appendTo($("body")).css({

    "posição": "absoluta",//posição absoluta
    "opacidade": "0.7",
    "cima": imgtop,
    "esquerda": imgleft
   }).animate({
    "cima": cartop,
    "esquerda": carleft,
    "largura": "40px",
    "altura": "40px",
    "opacidade": "0.3" //transparência
   }, 1000, function () {
    cimg.remove(); //desaparecimento de imagens
    $(".dnum").text(i); //mudança de quantidade do carrinho de compras
   });

movimento e mudança simples

Mas depois pensei, cada vez que a quantidade do carrinho de compras é resetada parece não estar em conformidade com a realidade, então pensei como fazer para que a quantidade do carrinho de compras não mude ao recarregar a página, pesquisei informações,总结了三种方法：　

(1) salvar no banco de dados;　
(2) através do método cookie;　
(3) através de h5método localStorage;　

No final, decidi usar o terceiro método, porque queria tentar h5nova método (por curiosidade ~ ~, também porque acabei de ver este método, então tentei), os dados armazenados pelo método localStorage não têm limite de tempo. No dia seguinte, na segunda semana ou no próximo ano, os dados ainda são úteis. A implementação específica do meu código: localStorage.getItem.

Bom, tudo o que devia ser dito foi dito, aqui está todo o código do jq, se gostaram, dêem um like:

var i = 0;
$(function() {
 var inum = 0;
 if (localStorage.getItem("inum") !== null) {
  inum = localStorage.getItem("inum");
 };
 $(".dnum").text(inum);
 $(".godadd").click(function() {
  if (!$(this).find("a").hasClass("bg")) {
   i++;
   $this.find("a").addClass("bg");
   var img = $(this).parent().find(".godpic").find("img");
   var cimg = img.clone();
   var imgtop = img.offset().top;
   var imgleft = img.offset().left;
   var cartop = $("#godcar").offset().top;
   var carleft = $("#godcar").offset().left;
   cimg.appendTo($("body")).css({
    "posição": "absoluta",
    "opacidade": "0.7",
    "cima": imgtop,
    "esquerda": imgleft
   }).animate({
    "cima": cartop,
    "esquerda": carleft,
    "largura": "40px",
    "altura": "40px",
    "opacidade": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  };
 });
}); 

Efeito visual:

Isso é tudo o que há no artigo, esperamos que ajude na sua aprendizagem e que você apóie o tutorial Grito.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Apenas se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)