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="/static/imghw/default1.png"  data-src="images/1.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">《飛鳥集》中很多詩(shī)歌是用孟加拉文創(chuàng)作的，這部詩(shī)集最早由鄭振鐸先生譯介到中國(guó)。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="/static/imghw/default1.png"  data-src="images/2.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥56.00</li>
    <li class="godinfo">本書主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="/static/imghw/default1.png"  data-src="images/3.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">用文字打敗時(shí)間。馮唐最暢銷作品，雜文才是其銷量最好、最受歡迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="/static/imghw/default1.png"  data-src="images/1.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">《飛鳥集》中很多詩(shī)歌是用孟加拉文創(chuàng)作的，這部詩(shī)集最早由鄭振鐸先生譯介到中國(guó)。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="/static/imghw/default1.png"  data-src="images/2.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">本書主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img  src="/static/imghw/default1.png"  data-src="images/3.png"  class="lazy"   alt="écrivez une fonction de panier d'achat simple en JavaScript" ></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">用文字打敗時(shí)間。馮唐最暢銷作品,雜文才是其銷量最好、最受歡迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
   </ul>
  </div>
 </div>
 
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img  src="/static/imghw/default1.png"  data-src="images/car.jpg"  class="lazy"   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",//絕對(duì)定位
 "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); //購(gòu)物車數(shù)量變化
});

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 !