Schreiben Sie eine einfache Warenkorbfunktion in JavaScript

Es gibt viele Codes für die Warenkorbimplementierung. Ich habe heute einige Wissenspunkte gelesen und beschlossen, sie selbst zu schreiben. Als Nächstes werde ich die spezifische Implementierung erklären.

1. Verwenden Sie HTML, um den Inhalt zu implementieren.

3 ), um Animationseffekte zu entwerfen.

Der erste Schritt besteht darin, die HTML-Seite zu entwerfen. Ich verwende ein großes Div, um alle Produkte aufzunehmen, und verwende dann verschiedene Divs, um verschiedene Produkte zu kapseln. Für die Produktliste verwende ich ul li Der spezifische Implementierungscode lautet wie folgt (die am Code beteiligten Produkte werden beiläufig online kopiert und haben keinen Referenzwert):

Es handelt sich um einen Wissenspunkt: in 337ce4393c432bbfbe8c9e86c537d13cdc296d7ae6e6f15e7743dfda54c79fbbZum Warenkorb hinzufügen5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb, ich habe Javascript:; verwendet. Dies bedeutet, dass kein Sprung ausgeführt wird und ein leeres Ereignis ausgeführt wird .

<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">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</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"></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"></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"></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"></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"></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">
  </div>
 </div>

Schritt 2: Zur besseren Darstellung stelle ich die Breite, Höhe und den Rand des Divs ein, das jede Produktliste enthält. Um den Warenkorb zu fixieren, ist es wichtig zu beachten , setzen Sie die Position auf „Fest“ und stellen Sie sie dann auf die gewünschte Position ein, indem Sie „oben“ und „links“ festlegen. Darüber hinaus müssen Sie lernen, Ränder und Polster flexibel zu nutzen, um die Anzeige schöner zu gestalten.

Hinweis: Wenn Sie Breite und Höhe oder andere Elementattribute auf Blockebene für Inline-Elemente festlegen möchten, müssen Sie display:block festlegen.

Der spezifische Designcode lautet wie folgt:

Das erste * bedeutet das Festlegen von Attributen für alle Elemente. Es ist eine gute Angewohnheit, den Rand und den Abstand am Anfang festzulegen.

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

Schritt 3: Implementieren Sie die statische Seite. Als Nächstes müssen Sie die spezifische Implementierung des Warenkorbs über jq implementieren, z. B. das Hinzufügen zum Warenkorb, das Ändern der Anzahl der Einkaufswagen usw. Ich habe einige Zeit mit dem Entwerfen verbracht: Wie kann ich dafür sorgen, dass das Bild langsam in den Warenkorb wandert, dann kleiner wird und schließlich verschwindet, wenn das Produkt in den Warenkorb gelegt wird? Unter anderem habe ich die Animationsfunktion verwendet, um diesen Prozess zu implementieren. Die Schwierigkeit bei der Realisierung dieser Funktion besteht darin, das Bild zu verschieben und zu ändern.

Im Folgenden wird erläutert, wie dieser Prozess implementiert wird:

1) Zuerst müssen Sie das Bild des Produkts abrufen und dann das erhaltene Bild kopieren

2) Holen Sie sich die oberen und linken Werte des Produktbildes sowie die oberen und linken Werte des Warenkorbs, damit die Bewegung über die Animationsfunktion realisiert werden kann = img.offset().top;

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

3) Schreiben Sie die Animationsfunktion, um bestimmte Effekte zu erzielen;

cimg.appendTo($("body")).css({

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

Einfache Bewegungen und Änderungen werden erreicht

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

Aber dann dachte ich, es scheint unvereinbar mit der Tatsache zu sein, dass die Menge im Warenkorb jedes Mal, wenn ich die Seite aktualisiere, auf 0 zurückgeht, also habe ich Ich habe darüber nachgedacht, wie ich verhindern kann, dass sich die Menge im Warenkorb beim Aktualisieren der Seite ändert, und habe drei Methoden zusammengefasst:

(1) In der Datenbank speichern. Durch Cookie-Methode;
(3) Durch localStorage-Methode von h5;

Schließlich habe ich mich für die dritte Methode entschieden, weil ich die neue Methode von h5 ausprobieren wollte ~~ und Da ich diese Methode zufällig gesehen habe, habe ich sie ausprobiert. Die von der localStorage-Methode gespeicherten Daten sind nach der zweiten Woche oder dem nächsten Jahr noch verfügbar. Die spezifische Implementierung meines Codes.

Okay, ich habe alles gesagt, was gesagt werden muss. Im Anhang finden Sie den gesamten Code von jq >

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist, und ich hoffe, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zum Schreiben einer einfachen Warenkorbfunktion In JavaScript achten Sie bitte auf die chinesische PHP-Website!