javascript如何實(shí)現(xiàn)購物車效果

這篇文章將為大家詳細(xì)講解有關(guān)javascript如何實(shí)現(xiàn)購物車效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。javascript實(shí)現(xiàn)購物車效果的方法：1、使用table來進(jìn)行界面布局；2、自行封裝getClasses函數(shù)；3、通過js實(shí)現(xiàn)選中和全選商品，以及商品數(shù)量的增減等功能即可。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),東山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:東山等地區(qū)。東山做網(wǎng)站價(jià)格咨詢:028-86922220

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦

javascript怎么實(shí)現(xiàn)購物車效果？

用javascript實(shí)現(xiàn)的購物車實(shí)例

基于javascript實(shí)現(xiàn)的購物車實(shí)例：

首先是效果和功能，如下圖所示，具有購物車的基本功能。

包括1、選中和全選商品；2、商品數(shù)量的增減；3、單個(gè)商品價(jià)格的計(jì)算；4、總價(jià)的計(jì)算；5、刪除商品。

javascript如何實(shí)現(xiàn)購物車效果

一、界面布局

使用的是table來進(jìn)行布局，由于用js來獲取tr 和 td節(jié)點(diǎn)的時(shí)候，可以獲取帶下標(biāo)的元素集合，操作起來較為便利。

html+css的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <style>
        *{margin:0px; padding:0px;}
        table,td,td{
            border:1px solid #000000;
            font-size:10px;
        }
        table{
            display: block;
        }

        img{
            float:left;
        }
        tr{
            text-align: center;
        }
        #box{
            width:900px;
        }

        #cart{
            float:left;
            border-collapse:collapse;
        }
        #head{
            background:#F0FFFF;
        }
        #settlement{
            margin-top:20px;
            width:805px;
            height:30px;
            border:1px solid #EBEBEB;
            float:left;
            background: #EBEBEB;

            font-size:10px;
            line-height:30px ;
        }
        #settlement div{
            float:left;
        }
        #addupto{
            color:#ff0000;
            font-weight:700;
        }
        #NumofGoods{
            color:#ff0000;
            font-weight:700;
        }

        .goods{
            padding:5px;
            text-align: left;
        }
        .number{
            position:relative;
            left:19px;
            width:60px;
            height:10px;
            border:1px solid #cccccc;
        }

        .acc{
            width:40px;
            height:10px;
            border-left:0px solid #cccccc;
            border-right:0px solid #cccccc;
            line-height: 10px;
            float:left;
        }
        .desymbol{
            width:10px;
            height:10px;
            line-height: 10px;
            background:#ccc;
            float:left;
            cursor:pointer;
        }
        .adsymbol{
            width:10px;
            height:10px;
            line-height: 10px;
            background:#ccc;
            float:right;
            cursor: pointer;
        }
        /*.dele{
            cursor: pointer;
        }*/
        .total{
            color:#ff0000;
            font-weight:700;
        }
    </style>
</head>
<body>
<div id="box">
    <table id="cart">
        <tr id="head">
            <td width="50px"><input type="checkbox">  全選</td>
            <td width="400px;">商品</td>
            <td width="100px">單價(jià)</td>
            <td width="100px">數(shù)量</td>
            <td width="100px">小計(jì)</td>
            <td width="50px">操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img src="img/goods1.jpg">外星人筆記本電腦17 R4 15R3 13寸 17寸 alienware今晚吃雞游戲本</td>
            <td>12888.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>刪除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img src="img/goods2.jpg">任天堂（Nintendo）Switch 家用游戲機(jī) 掌機(jī)NS智能體感游戲主機(jī)</td>
            <td>2258.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>刪除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img src="img/goods3.jpg">Microsoft/微軟 Surface Pro i5 8G 256G 筆記本平板電腦二合一</td>
            <td>4999.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>刪除</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td><img src="img/goods4.jpg">Apple/蘋果 10.5 英寸 iPad Pro</td>
            <td>3666.00</td>
            <td>
                <div>
                    <div>-</div>
                    <div>1</div>
                    <div>+</div>
                </div>
            </td>
            <td></td>
            <td>刪除</td>
        </tr>
    </table>

    <div id="settlement">
        <div style="width:550px"><input type="checkbox">    全選</div>
        <div style="width:120px">全選商品<span id="NumofGoods"></span><span>件^</span></div>
        <div style="width:80px">合計(jì)：￥<span id="addupto"></span></div>
        <div style="width:50px;text-align: center;border-left:1px solid #000000;">結(jié)算</div>
    </div>

</div>

<script src="cart.js"></script>
</body>
</html>

二、javascript代碼

自行封裝了getClasses（）函數(shù)，避免兼容性問題。

var prices = getClasses("price"),
    cart = document.getElementById("cart");
    acc = getClasses("acc"),
    totals = getClasses("total"),
    detracts = getClasses("desymbol"),
    adds = getClasses("adsymbol"),
    NumofGoods = document.getElementById("NumofGoods"),
    addupto = document.getElementById("addupto"),
    allSelect = getClasses("allSelect"),
    select = getClasses("select"),
    dele = getClasses("dele");

count();
countAll();

for(var i=0; i<allSelect.length; i++ ){
    allSelect[i].onclick = function(){
        for(var j=0; j<select.length; j++){
            select[j].checked = this.checked;
        }
        for(j=0; j<allSelect.length; j++){
            allSelect[j].checked = this.checked;
        }
        //每次點(diǎn)擊選框就計(jì)算一次總價(jià)
        countAll();
    }
}

for(i=0; i<select.length; i++){
    select[i].onclick = function(){
        if(ifAllSelected()){
            for(j=0; j<allSelect.length; j++){
                allSelect[j].checked = true;
            }
        }
        if(ifNotAllSelected()){
            for(j=0; j<allSelect.length; j++){
                allSelect[j].checked = false;
            }
        }
        countAll();
    }
}

for(i=0; i<adds.length; i++){

    adds[i].onclick = function(){
        console.log(this.parentNode.childNodes[3].innerHTML);
        var num = parseInt(this.parentNode.childNodes[3].innerHTML);
        num += 1;
        this.parentNode.childNodes[3].innerHTML = num;
        count();
        countAll();
    }
    detracts[i].onclick = function(){
        var num = parseInt(this.parentNode.childNodes[3].innerHTML);
        num -= 1;
        if(num<1){
            num=1;
        }
        this.parentNode.childNodes[3].innerHTML = num;
        count();
        countAll();
    }
    //刪除時(shí)也應(yīng)該重新計(jì)算總價(jià)，或者先判斷商品是否被選中，有選中則重新計(jì)算
    dele[i].onclick = function(){
        cart.childNodes[1].removeChild(this.parentNode);
        countAll();
    }
}

//避免兼容性問題，自行封裝classname
function getClasses(className){
    var arr = [],
        nodes = document.getElementsByTagName("*");
    for(var i=0; i<nodes.length; i++){
        if(nodes[i].className == className){
            arr.push(nodes[i]);
        }
    }
    return arr;
}

//進(jìn)行單價(jià)的計(jì)算，保留兩位小數(shù)
function count(){
    for(var i=0; i<prices.length; i++){
        totals[i].innerHTML = (prices[i].innerHTML*acc[i].innerHTML).toFixed(2);
    }
}
//計(jì)算總價(jià)的函數(shù)
function countAll(){
    var num1=0;
    var num2=0;
    //注意，每次計(jì)算總價(jià)應(yīng)該重新取得一次select,acc和totals，因?yàn)閳?zhí)行刪除操作時(shí)，會(huì)讓這幾個(gè)值發(fā)生變化
    var select = getClasses("select"),
        acc = getClasses("acc"),
        totals = getClasses("total");
    for(var i=0; i<select.length; i++){
        if(select[i].checked == true){
            num1 += parseInt(acc[i].innerHTML);
            num2 += parseFloat(totals[i].innerHTML);
        }
    }
    NumofGoods.innerHTML = num1;
    addupto.innerHTML = num2;
}

//判斷是否全部選中或者全部沒有選中的函數(shù)
function ifAllSelected(){
    var allSelected = true;

    for(var i=0; i<select.length; i++){
        if(select[i].checked == false){
            allSelected = false;
        }
    }
    return allSelected;
}
function ifNotAllSelected(){
    var notAllSelected = false;
    for(var i=0; i<select.length; i++){
        if(select[i].checked == false){
            notAllSelected = true;
        }
    }
    return notAllSelected;
}

關(guān)于javascript如何實(shí)現(xiàn)購物車效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞標(biāo)題：javascript如何實(shí)現(xiàn)購物車效果
當(dāng)前網(wǎng)址：http://bm7419.com/article26/igsjcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、建站公司、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、網(wǎng)站改版、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)