原生js實現購物車邏輯和功能

本文例項為大家分享了實現購物車邏輯和功能的具體程式碼，供大家參考，具體內容如下

1、購物車的主體內容佈局儘量用表格的佈局模式

2、判斷使用者是否登入

程式碼如下，可以根據自己頭部的佈局來具體修改

// 判斷使用者是否登入
var username = getCookie("username");
//如果登入成功就執行這段程式碼
if(username){
    var vip = $(`<a href=':;'>歡迎${username}來到天貓超市</a>`)
    var loginout = $(`<a href='script:;' class="loginout">退出</a>`)
    $(".hLeft").empty()
    $(".hLeft").append(vip)
    $(".hLeft").append(loginout)
    $(".hLeft>a").({
        "color":"#666","lineHeight":"32px","marginLeft":"10px"
    })
    $(".hLeft>a>b").css({
        "color":"red","fontWeight":"800",})
    $(".loginout").click(function(){
        removeCookie("username")
        $(".hLeft").empty()
        $(".hLeft").html( 
` <a href="home.html" >天貓首頁</a>
        <a href="javascript:;" >喵，歡迎來到天貓</a>
        <a href="login.html" >請登入</a>
        <a href="register-test.html" >免費註冊</a>`)
    })
}else{
    alert("請先登入");
    location.assign("./login.html");
}

3、判斷從詳情頁是否有資料傳過來

在這裡我資料是儲存到本地儲存裡面的，你可以根據自己儲存的地方來獲取資料

程式碼如下：

// 接收詳情頁傳過來的資料
// 先判斷本地儲存中有沒有商品
var data = localStorage.getItem("cart");
if(!data){
    $(".page-con").empty();
    var str = "";
    str +=`<h2>購物車空空如也！！！</h2>
    <p>請快點移步到列表頁選擇商品把<p><a href="./list.html" >進入列表頁</a>
    `
    $(".page-con").html(str);
    $(".page-con").css({width:"900px",margin:"40px auto 0"});
    $(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
    $http://www.cppcns.com 
(".page-con p").css({fontSize:"20px",lhttp://www.cppcns.comineHeight:"26px"});
    $(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}else{
    // 再判斷是否有當前使用者的購物車是資料
    // 將資料轉成陣列型別
    data = JSON.parse(data);
    // 檢視資料是否存在
    for(var j=0;j<data.length;j++){}
    var res = data.some(v=>{
        return v.username == username;
    })
    if(!res){
        $(".page-con").empty();
        var str = "";
        str +=`<h2>購物車空空如也！！！</h2>
        <p>請快點移步到列表頁選擇商品把<p><a href="./list.html" >進入列表頁</a>
        `
        $(".page-con").html(str);
        $(".page-con").css({width:"900px",margin:"40px auto 0"});
        $(".page-con h2").css({fontSize:"50px",lineHeight:"80px"})
        $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
        $(".page-con a").css({width:"100px",display:"block"})
    }else{
        // 有資料 且有自己的資料
        // 先把自己的資料找出來
        var arr = data.filter(v=>v.username == username);
        // 遍歷獲取的資料 
        // 在陣列中沒有想要的商品資料，需要從中獲取一下 通過id在資料庫中查詢資料
        var ids = arr.map(v=>v.goodsid);
        
        ids = ids.join(",")

4，查詢有詳情頁傳送過來的資料時，我們可以通過傳過來的id到資料庫中查詢我們想要的資料

傳送ajax到資料庫中查詢商品的資訊

$.ajax({
            url:"./server/cart.",dataType:"json",data:{ids:ids},type:"get",success:res=>{
                var str = '';
                for(var i=0;i<res.length;i++){
                    // 根據res[i] 每一條商品，從arr中找出number數量
                    var number = arr.find(v=>v.goodsid==res[i].id).number;
                    
                    str +=`
                        <div class="pageMtop">
                            <input type="checkbox" name="onetop"><i></i><span>店鋪：${res[i].name}</span><em></em>
                        </div>
                        <div class="pageMcontent">
                            <h3><img src="images/cat10.png">8.6 0點開享,每滿300減30</h3>
                            <ul>
                                <li>
                                    <input type="checkbox" name="one">
                                </li>
                                <li>
                                    <a href="#" >
                                        <img src="${res[i].imgpath}">
                                    </a>
                                </li>
                                <li>
                                    <p>
                                        <a href="#" >${res[i].introduce}</a>
                                    </p>
                                    <img src="images/cat03.png" alt="原生js實現購物車邏輯和功能">
                                    <a href="javascript:;" ><img src="images/cat04.png" alt="原生js實現購物車邏輯和功能"></a>
                                </li>
                                <li>
                                    <p>尺碼：M</p>
                                    <p>主要顏色：6685白色+6691霧霾藍（M碼預售8月8號發出</p>
                                    <a href="#" >修改</a>
                                </li>
                                <li>
                                    <span>${res[i].price}</span>
                                </li>
                                <li class="data-name" data-id = "${res[i].id}">
                                <input type="button" class="reduce" value="-">
                                <input class="numberone"  type="number" name="number" data-stock="${res[i].stock}" value="${number}">
                                <input type="button" class="add" value="+">
                                </li>
                                <li class="subtotal">
                                    ${res[i].price*number}
                                </li>
                                <li>
                                    <p>移入資料夾</p>
                                    <p class="btn">刪除</p>
                                    <p>寶貝</p>
                                </li>
                            </ul>
                        </div>
                    `
                }
                $(".page-middle").html(str)
                 //在這裡新增全選功能
                // 在這裡寫的話 程式碼巢狀太深 - 將功能寫在外面，然後在這邊呼叫函式
                //呼叫全選的功能
                selectAll()
                //呼叫單選功能
                selectone()
                // 計算總價和總數量
                priceAndNumberAll()
                // 數量加減
                addAndReduce()
                // 點選刪除鍵
                removebtn()
            }
        })
    }

在這裡商品列的佈局和內容渲染我們需要動態載入，然後新增到放主體內容的大盒子裡

5、實現購物車頁面的功能

因功能程式碼比較多，都放在ajax中會顯得冗餘，我們把每個功能封裝成函式，在ajax完成後的回撥函式中直接呼叫

6、全選功能

程式碼如下：

// 全選功能
function selectAll(){
    // 給上下兩個全選都繫結事件
    $("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
        // 設定單選的狀態
        $("[name='one']").prop("checked",$(this).prop("checked"))
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        // 給兩個複選框新增全選
        $("[name='topAll']").prop("checked",$(this).prop("checked"))
        $("[name='footAll']").prop("checked",$(this).prop("checked"))
        priceAndNumberAll()
    }
}

7、單選功能

程式碼如下：

// 單選功能
function selectone(){
    $("[name='http://www.cppcns.comone']").click(function(){
        // 判斷是否所有的都選中
        //$("[name='one']")是一個偽陣列，不能呼叫陣列方法 先把它轉成陣列
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        var arr = Array.prototype.slice.call($("[name='one']"))
        // 呼叫every方法 如果有一個沒選中就返回false
        var res = arr.every(v=>$(v).prop("checked"));
        if(res){
            $("[name='topAll']").prop("checked","checked");
            $("[name='onetop']").prop("checked","checked");
            $("[name='footAll']").prop("checked","checked");
        }else{
            $("[name='topAll']").prop("checked",false);
            $("[name='footAll']").prop("checked",false)
        }
        priceAndNumberAll()
    })
}

8、計算數量的總計和價格的總價

程式碼如下：

// 計算總價和總數量
function priceAndNumberAll(){
    // 根據選中的框來計算
    // 選擇被選中的那個數量number
    var allNumInput = $("[name='one']:checked").parent().siblings(".data-name").find("[name='number']")
    var allNum = 0;
    allNumInput.each(function(k,v){
        allNum += v.value-0;
    })
    $(".allnumber").text(allNum);
    var allPriceEle = $("[name=one]:checked").parent().siblings(".subtotal")
    var allPrice = 0;
    allPriceEle.each(function(k,v){
        allPrice += allPriceEle.text()-0;
    })
    $(".allprice").text(allPrice);
}

9、點選加減按鈕讓數量和金額進行加減

程式碼如下：

// 點選加減讓數量進行加減
function addAndReduce(){
    // 點選加的按鈕 
    $(".add").click(function(){
        // 先獲取input框裡面的數值
        var num = $(this).prev().val()-0;
        // 每點選一次就讓input裡面的值++
        num ++
        // 資料是不能無線加的 要進行判斷 如果加到最大值 就不讓他加了
        if(num>=$(this).prev().attr("data-stock")-0){
            num=$(this).prev().attr("data-stock")-0
            $(this).prop("disabled",true);
            $(this).addClass("bgadd");
            $(this).prev().prev().prop("disabled",false);
        }else{
            $(this).prop("disabled",false);
            $(this).prev().prev().removeClass("bgreduce");
        }
        $(this).prev().val(num)
        // 計算小計裡面的價格
        // 找到放單價的那個標籤和值
        var price = $(this).parent().prev().find("span").text()-0;
        // 重新計算小計
        var subtotal = price*num;
        // 計算好小計之後放到存放那個td中
        $(this).parent().next().text(subtotal);
        // 重新設定本地儲存
        // 獲取本地儲存的資料
        var data = localStorage.getItem("cart");
        // 轉換成陣列
        data = JSON.parse(data);
        // 遍歷陣列 查詢陣列中滿足條件的資料
        var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(data))
        priceAndNumberAll()
    })
    $(".reduce").click(function(){
        // 先獲取input框裡面的數值
        var num = $(this).next().val()-0;
        // 每點選一次就讓input裡面的值++
        num --
        // 資料是不能無線加的 要進行判斷 如果加到最大值 就不讓他加了
        if(num<1){
            num=1;
            $(this).prop("disabled",true);
            $(this).addClass("bgreduce");
            $(this).next().next().prop("disabled",false)
        }else{
            $(this).prop("disabled",false);
            $(this).next().next().removeClass("bgadd");
        }
        $(this).next().val(num)
        
        var price = $(this).parent().prev().find("span").text()-0;
        // 重新計算小計
        var subtotal = price*num;
        // 計算好小計之後放到存放那個td中
        $(this).parent().next().text(subtotal);
        // 將資料重新儲存到本地儲存
        var data =  localStorage.getItem("cart");
        data = JSON.parse(data);
        // 查詢滿足新增的資料
        var obj = data.find(v=>{
            return v.username==username&&v.goodsid==$(this).parent().attr("data-id");
        })
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(data));
        priceAndNumberAll()
    })
}

10、點選刪除按鈕功能

程式碼如下：

// 點選刪除的函式
function removebtn(){
    // 點選事件
    $(".btn").click(function(){
        // 提示是否要刪除
        if(!confirm("你確定要刪除嗎")){
            return false;
        }
        // 將本地儲存的這條資料刪除
        var data = localStorage.getItem("cart");
        data = JSON.parse(data);
        var index = data.findIndex(function(v){
            v.username==username&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")
        });
        data.splice(index,1);
        localStorage.setItem("cart",JSON.stringify(data))
        var tr = $(this).parent().parent();
        tr.remove()
        if(!data.filter(v=>v.username==username).length){
            // 如果資料沒了就不顯示錶格
            $(".page-middle").empty();
            // 讓頁面顯示自定義的內容
            var str = "";
            str += `<h2>購物車空空如也！！！</h2>
        <p>請快點移步到列表頁選擇商品把<p><a href="./list.html" >進入列表頁</a>
        `
        $(".page-middle").html(str);
        $(".page-middle").css({width:"1200px",margin:"40px auto 0"});
        $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
        }

    })
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

原生js實現購物車邏輯和功能

原生js實現購物車邏輯和功能

原生js實現購物車功能

原生js實現密碼強度驗證功能

原生js實現購物車

原生js 實現表單驗證功能

JS實現“全選”和"全不選"功能程式碼例項

原生JS實現留言板功能

原生js實現的觀察者和訂閱者模式簡單示例

原生JS實現匯率轉換功能程式碼例項

原生js實現from功能

js實現全選和全不選功能

原生js實現表格翻頁和跳轉

JS實現購物車基本功能

原生JS實現拖拽功能

Vue.js實現購物車基礎功能

原生Js實現的畫廊功能

Ajax——原生Js實現和Jquery實現

js實現購物車加減以及價格計算功能

js實現購物車加減和價格運算

原生js實現下拉重新整理和上拉載入更多

原生js實現購物車邏輯和功能

相關推薦