HTML-Code zur Implementierung eines einfachen Warenkorbs-HTML-Tutorial-php.cn

Es gibt viele Codes für die Warenkorbimplementierung. Dieser Artikel teilt Ihnen hauptsächlich den HTML-Code zur Implementierung eines einfachen Warenkorbs mit die konkreten Details bewerkstelligen.

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

2 Ändern Sie das Erscheinungsbild.

3. Verwenden Sie js (jq), um dynamische Effekte zu entwerfen.

Der erste Schritt: Der erste besteht darin, die HTML-Seite zu entwerfen, ich verwende eine große p enthält alle Produkte und verwendet dann unterschiedliche p, um verschiedene Produkte zu verpacken. Der spezifische Implementierungscode lautet wie folgt (die im Code beteiligten Produkte werden alle beiläufig online kopiert und haben keinen Referenzwert. ):

<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>

Nach dem Login kopieren

was einen Wissenspunkt beinhaltet: in

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

Nach dem Login kopieren

, ich habe Javascript verwendet:; Das bedeutet kein Sprung, führt ein leeres Ereignis aus.

Schritt 2: Gestalten Sie das Erscheinungsbild , zur besseren Darstellung füge ich für jede Produktliste p hinzu. Die Breite und Höhe , und Rand sind festgelegt. Um den Warenkorb an einer bestimmten Position zu fixieren, setze ich seine Position auf „Fest“ und stelle ihn dann oben und links ein, um ihn an der gewünschten Position zu fixieren. 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 für Inline-Elemente festlegen möchten oder Wenn andere Blöcke ein Elementattribut haben, müssen Sie display:block festlegen.
Der spezifische Designcode lautet wie folgt:

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

Nach dem Login kopieren

Das erste * bedeutet Einstellung für Bei allen Elementeigenschaften ist es eine gute Angewohnheit, den Rand und den Abstand am Anfang festzulegen.

Schritt 3: Implementieren Sie die statische Seite. Als Nächstes müssen Sie den spezifischen Warenkorb über jq implementieren Hinzufügen eines Warenkorbs, Änderungen der Warenkorbmenge 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

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

Nach dem Login kopieren

2) Holen Sie sich die oberen und linken Werte des Produktbildes, die oberen und linken Werte des Warenkorbs, damit Sie die Animationsfunktion übergeben können, um Bewegungen zu realisieren >

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

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

Nach dem Login kopieren

Einfache Bewegungen und Veränderungen werden gelingen.

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

Nach dem Login kopieren

Aber dann dachte ich, dass es unvereinbar mit der Tatsache zu sein scheint, dass die Menge des Warenkorbs jedes Mal, wenn ich den Warenkorb aktualisiere, auf 0 zurückgesetzt wird, also habe ich darüber nachgedacht, wie Um zu verhindern, dass der Warenkorb beim Aktualisieren der Seite zurückgesetzt wird, habe ich die Informationen überprüft und drei Methoden zusammengefasst: (1) In der Datenbank speichern

(2) Durch Cookie-Methode

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

    });
});

Nach dem Login kopieren

最终效果图：

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

Das obige ist der detaillierte Inhalt vonHTML-Code zur Implementierung eines einfachen Warenkorbs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!