Scrittura di una funzione di carrello di acquisto semplice in JavaScript

Ci sono molti codici relativi all'implementazione del carrello della spesa su internet. Oggi ho letto alcune conoscenze, ho deciso di farlo da solo, quindi ho scritto un carrello della spesa semplice. Ora spiegherò l'implementazione specifica.　

1、Implementare il contenuto con html;　

2、Modificare l'aspetto con css;　

3、Progettare l'effetto animato con js(jq).

Primo passo:Prima di tutto, si deve progettare la pagina HTML. Ho utilizzato un grande div per includere tutti i prodotti, poi ho utilizzato diversi div per impacchettare diversi prodotti, nella lista dei prodotti ho utilizzato ul li. Ecco il codice di implementazione specifico (il codice dei prodotti menzionati è stato copiato da internet e non ha valore di riferimento):　

<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">Molti dei poemi nella raccolta "Il集子" sono stati scritti in bengalese, questa raccolta è stata tradotta in cinese per la prima volta dal signor Zheng Zhenzhou.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</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">Questo libro spiega come utilizzare le tecnologie Web esistenti per costruire applicazioni Android.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</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">Combattere il tempo con la parola. Le opere più vendute di Feng Tang, i saggi sono le sue opere con le migliori vendite e popolarità.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</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">Molti dei poemi nella raccolta "Il集子" sono stati scritti in bengalese, questa raccolta è stata tradotta in cinese per la prima volta dal signor Zheng Zhenzhou.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</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">Questo libro spiega come utilizzare le tecnologie Web esistenti per costruire applicazioni Android.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</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">Combatti il tempo con le parole. Le opere più vendute di Feng Tang, i saggi sono le sue opere più vendute e popolari.</li>
    <li class="godadd"><a href="javascript:;">aggiungi al carrello</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

Tra cui una conoscenza: nel <li class="godadd"><a href="javascript:;">aggiungi al carrello</a></li>, ho utilizzato javascript:; che significa non effettuare lo spostamento, eseguire un evento vuoto.　

Secondo passo:Per la progettazione dell'aspetto, per una migliore visualizzazione, ho impostato width e height, nonché border per ciascun div della lista dei prodotti. È importante notare che, per mantenere il carrello della spesa fisso in una posizione specifica, ho impostato position: fixed e impostato top e left per fissare la posizione desiderata. Inoltre, imparare a utilizzare flexibilmente margin e padding per rendere la visualizzazione più attraente.　

Nota:Se si desidera impostare width e height per un elemento inline o altre proprietà di elementi bloccanti, è necessario impostare display: block.　

Il codice di progettazione specifico è il seguente:　

* {
 riempimento: 0px;
 margine: 0px;
 font-family: "微软雅黑";
}
.goodsItem{
 larghezza: 280px;
 altezza: 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;
}

Il primo * rappresenta l'impostazione delle proprietà per tutti gli elementi, impostare margin e padding all'inizio è un'abitudine molto buona.

Passo terzo:È stato implementato la pagina statica, ora è necessario implementare specificamente il carrello della spesa tramite jq, ad esempio aggiungere al carrello, cambiare il numero nel carrello, ecc. Ho passato del tempo nel progettare: come far muovere lentamente l'immagine del prodotto nel carrello, poi ridurre di dimensioni e infine scomparire. In questo processo, ho utilizzato la funzione animate per realizzare questo processo. La difficoltà di realizzare questa funzione sta nel modo in cui l'immagine si muove e cambia.　

Quindi spiego come implementare questo processo:　

1) Prima di tutto, è necessario ottenere l'immagine del prodotto, quindi copiare l'immagine ottenuta;

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

2) Ottieni i valori top e left dell'immagine del prodotto e i valori top e left del carrello, così è possibile utilizzare la funzione animate per muoversi; var imgtop = img.offset().top;

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

3) Scrivi la funzione animate per ottenere l'effetto specifico;
　cimg.appendTo($("body")).css({

    "position": "absolute",// Posizione assoluta
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" // Opacità
   }, 1000, function () {
    cimg.remove(); // Scomparsa dell'immagine
    $(".dnum").text(i); // Cambio del numero del carrello
   });

Semplici movimenti e cambiamenti sono stati implementati.

Ma poi ho pensato che ogni volta che si ricarica il numero del carrello sembra non essere in linea con la realtà, quindi ho pensato a come implementare il fatto di non cambiare il numero del carrello quando si ricarica la pagina, ho cercato informazioni, ho riassunto tre metodi:　

(1) Salva nel database;　
(2) Attraverso il metodo cookie;　
(3) Attraverso il metodo localStorage di h5;　

Alla fine ho deciso di adottare il terzo metodo, perché volevo provare il nuovo metodo h5 (per curiosità~~, anche perché ho visto questo metodo, quindi ho deciso di provarlo), i dati memorizzati con localStorage non hanno limiti di tempo. Il giorno successivo, la settimana successiva o anche l'anno prossimo, i dati sono ancora disponibili. La mia implementazione specifica è: localStorage.getItem.

Bene, tutto ciò che c'era da dire è stato detto, allego tutto il codice di jq, se ti piace, fammi un 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({
    "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);
   });
  }
 });
}); 

Esempio di effetto:

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente i tutorial di urlania.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.