Code HTML pour implémenter un panier d'achat simple

Il existe de nombreux codes pour la mise en œuvre d'un panier d'achat sur Internet. Cet article partage principalement avec vous le code HTML pour implémenter un panier d'achat simple. Les amis qui en ont besoin peuvent y jeter un œil. les détails spécifiques accomplir.

1. Utilisez HTML pour implémenter le contenu

2. modifier l'apparence ;

3. Utilisez js (jq) pour concevoir des effets dynamiques.

La première étape : La première est de concevoir la page html, j'utilise un gros p contient tous les produits, puis utilise différents p pour emballer différents produits. J'ai utilisé ul li pour implémenter la liste de produits. Le code d'implémentation spécifique est le suivant (les produits impliqués dans le code sont tous copiés en ligne avec désinvolture et n'ont aucune valeur de référence. ) :

<p id="goods">
        <p 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>
        </p>
        <p 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>
        </p>
        <p 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>
        </p>
        <p 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>
        </p>
        <p 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>
        </p>
        <p 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>
        </p>
    </p>

    <p id="godcar">
        <p class="dnum">0</p>
        <p class="dcar">
            <img src="images/car.jpg">
        </p>
    </p>

qui implique un point de connaissance : en

<li class="godadd"><a href="javascript:;">加入购物车</a></li>

, j'ai utilisé javascript :; Cela signifie pas de saut, exécute un événement vide.

Étape 2 : Concevoir l'apparence , pour un meilleur affichage, j'inclurai p pour chaque liste de produits La largeur, la hauteur , et la bordure sont définies. Il convient de noter que pour fixer le panier dans une certaine position, je règle sa position sur fixe, puis je règle le haut et la gauche pour le fixer à la position souhaitée. 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 des éléments en ligne ou autres attributs d'élément de niveau de blocs, vous devez alors 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 réglage pour toutes les propriétés des é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 le panier spécifique via jq, tel que. ajout du panier, modifications de la quantité du panier, 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, les valeurs en haut et à gauche ​​​​du panier, afin que vous puissiez passer la fonction d'animation pour réaliser le mouvement

var imgtop = img.offset().top;
var imgleft = img.offset().left;

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

3) Écrire une 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 réalisés.

Mais ensuite j'ai pensé que cela semblait incohérent avec le fait que la quantité du panier reviendrait à 0 à chaque fois que je rafraîchissais le panier, alors j'ai réfléchi à comment pour éviter que le panier ne soit réinitialisé lors de l'actualisation de la page. La quantité a changé, j'ai vérifié les informations et résumé trois méthodes :

(1) Enregistrer dans la base de données

;

(2) Par la méthode des cookies

（3）通过h5的localStorage方法；

最后我决定采用第三种方法，因为想试试h5的新方法（出于好奇心理~~，也是因为刚好看到这个方法，就试试看），localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。我的代码具体实现：localStorage.getItem。

好了，所有该讲的都讲完了，附上jq的所有代码，喜欢的就点个赞：

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);
            });
        }

    });
});

最终效果图：

聪明的你学会了吗，赶快实践起来吧！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!