Écrivez une fonction de panier d'achat simple en JavaScript

Il existe de nombreux codes pour la mise en œuvre d'un panier d'achat sur Internet. J'ai lu quelques points de connaissances aujourd'hui et j'ai décidé de les écrire moi-même, j'ai donc écrit un simple panier d'achat. Ensuite, j'expliquerai la mise en œuvre spécifique.

1. Utilisez html pour implémenter le contenu

2. Utilisez CSS pour modifier l'apparence

3. ) pour concevoir des effets d'animations.

La première étape consiste à concevoir la page html. J'utilise un grand div pour contenir tous les produits, puis j'utilise différents div pour encapsuler différents produits, j'utilise ul li is. implémenté. Le code d'implémentation spécifique est le suivant (les produits impliqués dans le code sont copiés avec désinvolture en ligne et n'ont aucune valeur de référence) :

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/1.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/2.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥56.00</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/3.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/1.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/2.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="images/3.png" alt="Écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
 </div>
 
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img  src="images/car.jpg" alt="Écrivez une fonction de panier d'achat simple en JavaScript" >
  </div>
 </div>

Cela implique un point de connaissance : in

Ajouter au panier

, j'ai utilisé javascript:; Cela signifie qu'aucun saut ne sera effectué et qu'un vide sera exécuté. événement .

Étape 2 : Concevoir l'apparence. Pour un meilleur affichage, j'ai défini la largeur, la hauteur et la bordure du div contenant chaque liste de produits. Il est à noter que afin de fixer le panier, une certaine position. , définissez sa position sur fixe, puis réglez-la sur la position souhaitée en définissant en haut et à gauche. De plus, vous devez apprendre à utiliser la marge et le remplissage avec flexibilité pour rendre l'affichage plus beau.

Remarque : Si vous souhaitez définir la largeur et la hauteur ou d'autres attributs d'élément au niveau du bloc pour les éléments en ligne, vous devez définir display:block.

Le code de conception spécifique est le suivant :

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

Le premier * signifie définir des attributs pour tous les éléments. C'est une bonne habitude de définir la marge et le remplissage au début.

Étape 3 : Implémenter la page statique. Ensuite, vous devez implémenter l'implémentation spécifique du panier via jq, comme l'ajout au panier, la modification du nombre de paniers, etc. J'ai passé du temps à concevoir : comment faire en sorte que l'image se déplace lentement vers le panier, puis devienne plus petite et enfin disparaisse lorsque le produit est ajouté au panier. Parmi eux, j'ai utilisé la fonction animer pour implémenter ce processus. La difficulté pour réaliser cette fonction est : comment déplacer et changer l'image.

Ce qui suit explique comment mettre en œuvre ce processus :

1) Tout d'abord, vous devez obtenir l'image du produit, puis copier l'image obtenue

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

2) Obtenez les valeurs en haut et à gauche de l'image du produit, ainsi que les valeurs en haut et à gauche du panier, afin que le mouvement puisse être réalisé via la fonction d'animation ; = img.offset().top;

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

3) Écrivez la fonction d'animation pour obtenir des effets spécifiques

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); //购物车数量变化
});

Des mouvements et des changements simples sont obtenus.

Mais ensuite j'ai pensé que cela semble incompatible avec le fait que la quantité dans le panier reviendra à 0 à chaque fois que j'actualise la page, alors je j'ai réfléchi à la façon d'éviter que la quantité dans le panier ne change lors de l'actualisation de la page. J'ai vérifié les informations et résumé trois méthodes Méthode :

(1) Enregistrer dans la base de données

(2 ; ) Via la méthode cookie ;
(3) Via la méthode localStorage de h5

Finalement j'ai décidé d'utiliser la troisième méthode car je voulais essayer la nouvelle méthode de h5; ~~ et parce que j'ai vu cette méthode, je l'ai donc essayée). Les données stockées par la méthode localStorage n'ont pas de limite de temps. Après la deuxième semaine ou l'année suivante, les données sont toujours disponibles. mon code :

D'accord, j'ai dit tout ce qu'il fallait dire. Ci-joint tous les codes de jq Comme :

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({
    "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);
   });
  }
 
 });
});

Rendu :

<.>

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun, et j'espère que tout le monde soutiendra le site Web PHP chinois

Pour plus d'articles liés à l'écriture. une simple fonction de panier d'achat en JavaScript, veuillez faire attention au site Web PHP chinois !