Écrire une fonctionnalité de panier d'achat simple en JavaScript

Il y a beaucoup de codes pour la mise en œuvre du panier sur le web. Aujourd'hui, j'ai vu quelques points de connaissances, j'ai décidé de me mettre à écrire, donc j'ai écrit un panier d'achat simple, et je vais expliquer l'implémentation spécifique à suivre.　

1、Implémenter le contenu avec html ;　

2、Ornements de l'apparence avec css ;　

3、Concevoir des effets animés avec js(jq).

Première étape :Tout d'abord, il s'agit de concevoir la page HTML. J'ai utilisé un grand div pour inclure tous les produits, puis j'ai encapsulé différents produits avec des div différents. Dans la liste des produits, j'ai utilisé ul li pour l'implémentation, l'implémentation spécifique du code est la suivante (les produits mentionnés dans le code ne sont que des copies de la toile et n'ont pas de valeur de référence) :　

<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">Beaucoup de poèmes dans le recueil "Les Oiseaux Volants" ont été écrits en bengali, ce recueil a été traduit en chinois pour la première fois par M. Zheng Zhen duo.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</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">Ce livre présente principalement comment utiliser les technologies Web existantes pour construire des applications Android.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</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">Combattre le temps avec des mots. Les œuvres les plus populaires de Feng Tang, les essais sont ses œuvres les plus vendues et les plus populaires.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</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">Beaucoup de poèmes dans le recueil "Les Oiseaux Volants" ont été écrits en bengali, ce recueil a été traduit en chinois pour la première fois par M. Zheng Zhen duo.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</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">Ce livre présente principalement comment utiliser les technologies Web existantes pour construire des applications Android.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</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">Combattre le temps avec des mots. Les œuvres les plus populaires de Feng Tang, les essais sont ses œuvres les plus vendues et les plus populaires.</li>
    <li class="godadd"><a href="javascript:;">ajouter au panier</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

Il s'agit d'un point de connaissance : dans <li class="godadd"><a href="javascript:;">ajouter au panier</a></li>où j'ai utilisé javascript:; qui signifie ne pas sauter, exécuter un événement vide.　

Deuxième étape :Pour le design visuel, afin de mieux afficher, j'ai défini la largeur et la hauteur, ainsi que la bordure pour chaque div de liste de produits. Il est important de noter que pour fixer le panier d'achat à un certain endroit, j'ai défini position: fixe, puis j'ai fixé top et left pour le faire固定 dans l'emplacement souhaité. De plus, apprenez à utiliser flexiblement margin et padding pour rendre l'affichage plus beau.　

Remarque :Si vous souhaitez définir la largeur et la hauteur pour un élément en ligne ou les propriétés d'un élément en bloc, il est nécessaire de définir display:block.　

Le code de conception spécifique est le suivant :　

* {
 marge: 0px;
 marge: 0px;
 police-famille: "微软雅黑";
}
.goodsItem{
 largeur:280px;
 hauteur: 400px;
 flottant: gauche;
 bordure: 1px solide #ccc;
 marge:5px;
}
#goods{
 largeur:910px;
}
.goditem{
 liste-style: none;
}
.godpic img{
 affichage: bloc;
 largeur:250px;
 hauteur: 250px;
 marge:0px auto;
}
.godprice,.godinfo,.godadd{
 affichage: bloc;
 largeur:220px;
 marge:0px auto;
 texte-aligner: centre;
}
.godprice{
 police-taille: 20px;
 couleur: #f00;
}
.godinfo{
 texte-aligner: centre;
 police-taille: 14px;
 marge: 10px 0px;
}
.godadd a{
 affichage: bloc;
 largeur: 150px;
 hauteur: 36px;
 background-couleur: #fd6a01;
 bordure-rayon: 10px;
 marge: 0px auto;
 texte-décoration: none;
 couleur:#fff;
 ligne-hauteur: 36px;
}
#godcar{
 position: fixe;
 droite: 0px;
 haut:40%;
 largeur: 72px;
 hauteur: 64px;
}
#godcar .dnum{
 largeur:24px;
 hauteur: 24px;
 bordure-rayon: 12px;
 background-couleur: #f00;
 texte-aligner: centre;
 ligne-hauteur: 24px;
 position: absolu;
 police-taille: 12px;
 top:0px;
}
.godadd .bg {
 background-color: #808080;
}

Le premier*Il est une bonne habitude de définir les propriétés des éléments pour tous, en définissant d'abord la marge et le rembourrage.

Troisième étape :Une page statique a été réalisée, il faut ensuite réaliser spécifiquement le panier avec jq, par exemple ajouter au panier, le changement du nombre de panier, etc. J'ai passé du temps à la conception : comment faire en sorte que l'image puisse se déplacer lentement dans le panier lorsque le produit est ajouté, puis devenir plus petite, enfin disparaître. Parmi eux, j'ai utilisé la fonction animate pour réaliser ce processus. Le point difficile à réaliser cette fonctionnalité est : comment déplacer l'image, comment elle change.　

Voici comment réaliser ce processus :　

1) D'abord, il faut obtenir l'image du produit, puis copier l'image obtenue ;

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

2) Obtenir les valeurs top et left de l'image du produit, les valeurs top et left du panier, afin que l'animate function puisse réaliser le déplacement ; var imgtop = img.offset().top;

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

3) Écrire la fonction animate pour réaliser l'effet spécifique ;
　cimg.appendTo($("body")).css({

    "position": "absolute",//Position absolu
    "opacity": "0.7
    "top": imgtop,
    "left": imgleft
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //Transparence
   }, 1000, function () {
    cimg.remove(); //Disparition de l'image
    $(".dnum").text(i); //Changement du nombre de panier
   });

Un simple déplacement et une variation suffisent.

Mais ensuite, je me suis dit que remettre à zéro le nombre de panier à chaque actualisation ne correspondait pas à la réalité, alors j'ai pensé à comment réaliser que le nombre de panier ne change pas lors de l'actualisation de la page, j'ai cherché des informations, résumé trois méthodes :　

(1) sauvegarder dans la base de données ;　
(2) via la méthode cookie ;　
(3) via h5la méthode localStorage;　

Finalement, j'ai décidé d'essayer la troisième méthode, parce que je veux essayer h5nouvelle méthode (par curiosité~~, c'est aussi parce que j'ai vu cette méthode, alors essayons), les données stockées par la méthode localStorage n'ont pas de limite de temps. Le lendemain, la deuxième semaine ou l'année prochaine, les données restent utilisables. Mon implémentation spécifique : localStorage.getItem.

Bien, tout ce qu'il fallait dire a été dit, voici tout le code de jq, si vous aimez, cliquez pour liker :

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
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }
 });
}); 

Effet visuel :

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutenerez également le tutoriel à crier.

Déclaration : Le contenu de cet article est issu du réseau, propriété des auteurs respectifs, apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site n'engage pas la propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, n'hésitez pas à envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour signaler un abus, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)